vinchent/udemy-go-web-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creating a landing page

Browse Source
This commit is contained in:
Muyao CHEN
2024-06-28 23:20:01 +02:00
parent 6e6b003e05
commit 2e9391d502
1 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
home.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My hotel project</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/rooms" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Rooms
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/rooms/first">First Room</a></li>
<li><a class="dropdown-item" href="/rooms/second">Second Room</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/book">Book Now</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="hotelcarousel" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#hotelcarousel" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#hotelcarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#hotelcarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="static/images/woman-laptop.png" d-block w-100" alt="Woman with a laptop">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="static/images/tray.png" d-block w-100" alt="Tray with a coffee">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="static/images/outside.png" d-block w-100" alt="Outside">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#hotelcarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#hotelcarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row text-center">
<div class="col mt-3">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis urna, vitae congue
odio. Sed pulvinar diam a odio tristique, nec porta eros suscipit. Sed lacinia ut nisl ultrices
condimentum. Vivamus imperdiet sapien sit amet mauris ornare accumsan. Proin varius imperdiet
gravida. Suspendisse posuere velit leo, sit amet egestas quam porta quis. Duis in nulla eu quam
iaculis iaculis. Etiam commodo gravida venenatis. Phasellus in vehicula est, aliquam condimentum
nisi. In id ligula lacinia, varius leo vel, tincidunt libero. Nullam cursus vel lectus at consequat.
Quisque malesuada efficitur sem et sollicitudin. Donec eget tincidunt arcu. Quisque ut posuere ex.
</p>
</div>
</div>
<div class="d-flex justify-content-center py-3">
<button type="button" class="btn btn-primary btn-lg">Book now</button>
</div>
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
</ul>
<p class="text-center text-body-secondary">© 2024 Company, Inc</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>