Compare commits

...

2 Commits

Author SHA1 Message Date
Muyao CHEN
2e9391d502 Creating a landing page 2024-06-28 23:20:01 +02:00
Muyao CHEN
6e6b003e05 Enabling static files 2024-06-28 22:30:19 +02:00
6 changed files with 131 additions and 0 deletions

View File

@ -20,5 +20,8 @@ func routes(app *config.AppConfig) http.Handler {
mux.Get("/", handlers.Repo.Home) mux.Get("/", handlers.Repo.Home)
mux.Get("/about", handlers.Repo.About) mux.Get("/about", handlers.Repo.About)
fileServer := http.FileServer(http.Dir("./static/"))
mux.Handle("/static/*", http.StripPrefix("/static", fileServer))
return mux return mux
} }

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>

BIN
static/images/outside.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
static/images/tray.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -5,6 +5,7 @@
<div class="col"> <div class="col">
<h1>This is the home page</h1> <h1>This is the home page</h1>
<p>This is the content</p> <p>This is the content</p>
<img src="/static/images/outside.png" alt="outside image" height="1330" width="2364">
</div> </div>
</div> </div>
</div> </div>