muayjtp/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated home page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-01 13:29:45 -05:00
parent 03b810d617
commit 1c598a66dd
9 changed files with 115 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
hotel_booking/images/h.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

BIN
hotel_booking/images/home2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 MiB

BIN
hotel_booking/images/home3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
hotel_booking/images/home4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
hotel_booking/images/home5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
hotel_booking/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
hotel_booking/images/single_room.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 MiB

55
hotel_booking/index.php
View file

@ -4,9 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midtown Hotel | The best hotels & accommodations</title>
<link rel="shortcut icon" href="./images/h.png" type="image/x-icon">
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
@ -14,6 +15,7 @@
<body>
<!--Hero & Navbar section-->
<div class="hero">
<div class="load"></div>
<!--Navbar section (bootstrap)-->
<div class="wrap w-100">
<div class="row align-items-center m-0 d-none d-md-flex sticky-top" style="padding-top: 50px;">
@ -35,7 +37,7 @@
</div>
<div class="col-2 bg-transparent px-3">
<a href="index.php" style="text-decoration: none;">
<h1 class="text-center fw-bold figure-img logo-font">Midtown Hotel</h1>
<h1 class="text-center fw-bold figure-img logo-font" style="color: white;">Midtown Hotel</h1>
</a>
</div>
<div class="col-5 text-center rounded-pill">
@ -57,10 +59,10 @@
</div>
<!--Navbar responsive (css)-->
<div>
<div class="nav-parent">
<div class="nav-parent sticky-top">
<div class="nav-wrapper">
<div class="branding">
<a href="#" class="logo-font">Midtown Hotel</a>
<a href="#" class="logo-font" style="color: white;" >Midtown Hotel</a>
</div>
<a class="burger" onclick="burgerButton()">
<div class="bar"></div>
@ -227,7 +229,7 @@
</div>
<div class="col-lg-2">
<div class="d-grid" style="align-items: center; margin-top: 30px;">
<button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Register</button>
<button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Submit</button>
</div>
</div>
</div>
@ -239,8 +241,43 @@
</div>
<!--Rooms-->
<div>
<h3 class="mt-5 pt-4 text-center">Popular Rooms</h3>
<p class="mb-5 text-center">Comfortably furnished smaller accommodation</p>
<h3 class="mt-5 pt-4 text-center logo-font fw-bold" style="color:#776B5D; font-size: 56px; text-shadow: 2px 2px #EBE3D5;">Rooms</h3>
<p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 300px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5>
<p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
<div class="accommodation mt-4 mb-3">
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
</div>
<div class="equipment">
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
</div>
<div class="d-flex gap-2 items-center justify-content-center mt-4">
<a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
<a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
</div>
</div>
</div>
</div>
<div class="col-lg-12 text-center mt-5">
<a href="" class="btn btn-sm btn-outline-dark rounded">More</a>
</div>
</div>
</div>
</div>
@ -264,6 +301,10 @@
body.classList.toggle('active');
}
</script>
</body>
</html>

72
hotel_booking/style.css
View file

@ -2,8 +2,7 @@
font-family: "Lora", serif;
}
.logo-font{
font-family: "Righteous", sans-serif;
color: white;
font-family: "Tangerine";
}
a{
text-decoration: none !important;
@ -14,11 +13,51 @@ ul{
/*-Hero-*/
.hero {
position: relative;
background: url('./images/home1.jpg') center/cover no-repeat;
/*background: url('./images/home1.jpg') center/cover no-repeat;*/
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
animation: slide 15s infinite;
display: flex;
flex-direction: column;
}
@keyframes slide{
0%{
background-image: url(images/home1.jpg);
}
20%{
background-image: url(images/home1.jpg);
}
20.01%{
background-image: url(images/home2.jpg);
}
40%{
background-image: url(images/home2.jpg);
}
40.01%{
background-image: url(images/home3.jpg);
}
60%{
background-image: url(images/home3.jpg);
}
60.01%{
background-image: url(images/home4.jpg);
}
80%{
background-image: url(images/home4.jpg);
}
80.01%{
background-image: url(images/home5.jpg);
}
100%{
background-image: url(images/home5.jpg);
}
}
.load{
animation: slide 0.2s;
}
.hero::before{
content: "";
position: absolute;
@ -143,6 +182,31 @@ ul{
.burger-links.active {
top: 0%;
}
/*---Room---*/
.btn-main{
background-color: #3C3633;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 14px;
border-radius: 3px;
}
.btn-main:hover, .btn-minor:hover{
background-color: #625e5b;
color: white;
}
.btn-minor{
background-color: #747264;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 14px;
border-radius: 3px;
}
/*---Responsive---*/
@media (max-width:768px) {
.nav-wrapper {
padding: 30px;
@ -182,5 +246,3 @@ ul{
}