ronreciproco123
/
B322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1f50fd942a'
${ noResults }
B322/groupwork/frontend/s18/activity/index-group.html

199 lines
8.4 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activity S18 Wireframes, Mockup and Prototypes</title>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- external css -->
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid py-2" id="nav-b">
<a class="navbar-brand" href="#" id="logo">
<img src="./images/Logo.png" class=" px-5 img-fluid">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link pd-5" href="#">HOME</a>
<a class="nav-link pd-3" href="#">GALLERY</a>
<a class="nav-link pd-3" href="#">CONTACT</a>
</div>
</div>
</div>
</nav>
<!-- landing -->
<div class="py-5 container-fluid" id="landing">
<div class="row my-5 py-5 justify-content-center">
<div class="col-md-8 pt-md-5 text-left ">
<h1 class="title">Replace This </h1>
<h1 class="title">With Your Title</h1>
<div class="col-md-7 text-left p-wrap-size">
<p class=" text-left">You can use this section to narrate a short description for the title or page.</p>
<div id="but-text">
<a href="" class="button-1">Get Started</a>
</div>
</div>
</div>
</div>
</div>
<!-- end landing -->
<!-- Gallery -->
<section id="gallery" class="text-center mt-cus">
<div>
<h1 class="h1-cus">GALLERY</h1>
<p class="col col-md-8 col-lg-7 mx-auto p1-cus mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</section>
<!-- Carousel -->
<section id="carousel-1">
<div class="container-fluid">
<div class="container-carousel-1 container">
<div class="container-info-1 pt-lg-5">
<h1 class="h1-cus">ALBUM 1</h1>
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="carousel-container container-fluid">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/album1-1.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album1-2.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album1-3.png" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</section>
<section id="carousel-1">
<div class="container-fluid">
<div class="container-carousel-1 container">
<div class="container-info-1 pt-lg-5">
<h1 class="h1-cus">ALBUM 2</h1>
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="carousel-container">
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/album2-1.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album2-2.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album2-3.png" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls1" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls1" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</section>
<section id="carousel-1">
<div class="container-fluid">
<div class="container-carousel-1 container">
<div class="container-info-1 pt-lg-5">
<h1 class="h1-cus">ALBUM 3</h1>
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="carousel-container">
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/album3-1.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album3-2.png" class="d-block w-100 img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/album3-3.png" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls2" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls2" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</section>
<!-- Contact US -->
<div class="container-fluid" id="contact-us">
<div class="row">
<div class="col-6">
<img src="./images/building.png" id="build-img">
</div>
<div class="col-3">
<h1 id="cnt-us">CONTACT US</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<!-- FORM DETAILS -->
<form action="./index.html">
<ul>
<li><label for="nameInput">Name</label></li>
<li><input type="text" id="nameInput"></li>
<li><label for="emailInput">Email Address</label></li>
<li><input type="text" id="emailInput"></li>
<li><label for="msgInput">Message</label></li>
<li><textarea rows="4" id="msgInput"></textarea></li>
<li><button type="submit" id="submit-btn">Submit</button></li>
</ul>
</form>
<!-- End of Form -->
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink