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.
199 lines
8.4 KiB
HTML
199 lines
8.4 KiB
HTML
1 year ago
|
<!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>
|