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

updated homepage

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-03 15:38:07 -05:00
parent e362a7131a
commit 5e724d1425
4 changed files with 221 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
hotel_booking/images/single_room.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 MiB

97
hotel_booking/index.php
View file

@ -7,6 +7,7 @@
<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://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<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">
@ -60,9 +61,9 @@
<!--Navbar responsive (css)-->
<div>
<div class="nav-parent sticky-top">
<div class="nav-wrapper">
<div class="nav-wrapper" style="margin-top: -20px;">
<div class="branding">
<img src="./images/logo-white.png" style="width: 150px; margin-left: -40px;"/>
<img src="./images/logo-white.png" style="width: 120px; margin-left: -40px;"/>
</div>
<a class="burger" onclick="burgerButton()">
<div class="bar"></div>
@ -280,9 +281,9 @@
<div class="row">
<div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top">
<img src="./images/home3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5>
<h5 class="card-title" style="color: #222831;">Standard rooms</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>
@ -309,9 +310,9 @@
<div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top">
<img src="./images/home3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5>
<h5 class="card-title" style="color: #222831;">Standard rooms</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>
@ -338,9 +339,9 @@
<div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top">
<img src="./images/home3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5>
<h5 class="card-title" style="color: #222831;">Standard rooms</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>
@ -372,22 +373,100 @@
</div>
<!--services-->
<div class="panel" data-color="cream">
<h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Accommodation</h3>
<h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Services</h3>
<p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #A4907C;">Exceptional service - endless possibilities</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img src="./images/service1.jpg" style="width: 100%;"/>
<div class="card-img-overlay service-card">
<h5 class="card-title-service">Swimming Pools</h5>
<p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<img src="./images/service2.jpg" style="width: 100%"/>
<div class="card-img-overlay service-card">
<h5 class="card-title-service">Traditional Sauna</h5>
<p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<img src="./images/service3.jpg" style="width: 100%"/>
<div class="card-img-overlay service-card">
<h5 class="card-title-service">Massages and treatments</h5>
<p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--testimonials-->
<div class="panel" data-color="white">
<img src="./images/logo.png" class="pre-header-testimonials"/>
<div class="swiper swiper-testimonials">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="profile">
<p class="testimonials-text">I recently had the pleasure of staying at the midtown hotel and was blown away by the exceptional service and comfortable accommodations.
I would highly recommend this hotel to anyone looking for a relaxing and enjoyable stay.</p>
<p class="testimonials-user">-Jennifer</p>
</div>
</div>
<div class="swiper-slide">
<div class="profile">
<p class="testimonials-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="testimonials-user">-anonymous</p>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="footer-grid">
<div class="footer-grid-1">
<a href="#">Rooms</a>
<a href="#">Services</a>
<a href="#">News</a>
<a href="#">Gallery</a>
<a href="#">Info</a>
</div>
<div class="footer-grid-2">
<div class="footer-grid-2-title">
<a href="#">More about rooms <i class="bi bi-arrow-right-circle"></i></a>
</div>
<a href="#">Standard rooms</a>
<a href="#">Excutive rooms</a>
<a href="#">Suite rooms</a>
</div>
<div class="footer-grid-3">
<img src="./images/logo-white.png" class="pre-header-img" style="width: 120px; margin-bottom:80px; margin-top:50px;"/>
<div class="footer-grid-3-title" style="margin-bottom:100px;">
<p style="font-size: 22px;">Midtown Hotel</p>
<p style="margin-top: 10px;">36381 Trantow Hill,</p>
<p style="margin-top: -10px;">New Port, FL 57941</p>
<p style="margin-top: 50px;">+123 45 678 90 00</p>
<p style="margin-top: -10px;">reception@midtownhotel.com</p>
</div>
<div style="display: flex; margin-bottom:50px; gap: 10px; font-size: 30px;">
<a href="#" style="color:lightgray;"><i class='bx bxl-trip-advisor'></i></a>
<a href="#" style="color:lightgray;"><i class='bx bxl-facebook-circle'></i></a>
<a href="#" style="color:lightgray;"><i class='bx bxl-instagram'></i></a>
<a href="#" style="color:lightgray;"><i class='bx bxl-youtube' ></i></a>
</div>
</div>
</div>
</div>

8
hotel_booking/script.js
View file

@ -61,3 +61,11 @@ var swiper = new Swiper(".mySwiper", {
disableOnInteraction: false,
},
});
var swiper = new Swiper(".swiper-testimonials", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});

122
hotel_booking/style.css
View file

@ -283,7 +283,6 @@ ul{
.swiper-slide{
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
@ -295,7 +294,94 @@ ul{
object-fit: cover;
}
/*-- services --*/
.service-card{
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
text-align: center;
color: white;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.card-title-service{
font-size: 32px;
}
.card-text-service{
font-size: 14px;
}
/*--testimonials--*/
.swiper-testimonials{
width: 850px;
height: 50vh;
justify-content: center;
align-items: center;
}
.testimonials-text{
font-size: 22px;
}
.testimonials-user{
color: #3C3633;
}
.pre-header-testimonials{
width: 100px;
margin-bottom: 50px;
margin-top: 200px;
}
/*--Footer--*/
.footer{
width: 100%;
height: 100%;
}
.footer-grid{
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.footer-grid-1, .footer-grid-2{
display: flex;
flex-direction: column;
background-color: #194141;
height: 100vh;
padding-left: 100px;
padding-top: 250px;
color: #93B1A6;
}
.footer-grid-1 a{
color: #93B1A6;
font-size: 40px;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.footer-grid-2 a{
color: #93B1A6;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.footer-grid-2-title a{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
color: #93B1A6;
font-size: 22px;
margin-bottom: 30px;
}
.footer-grid-1 a:hover, .footer-grid-2 a:hover{
color: white;
}
.footer-grid-3{
background-color: #112E2E;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer-grid-3-title, .footer-grid-3-social{
color: lightgray;
}
/*---------- Responsive ----------*/
@media (max-width:980px) {
.logo-img{
@ -310,6 +396,13 @@ ul{
.font-title{
font-size: 50px;
}
.profile{
padding-left: 50px;
padding-right: 50px;
}
.footer-grid{
display: block;
}
}
@media (max-width:768px) {
.nav-wrapper {
@ -372,5 +465,30 @@ ul{
.swiper{
height: 700px;
}
.profile{
padding-left: 30px;
padding-right: 30px;
}
.pre-header-testimonials{
margin-top: 300px;
margin-bottom: 30px;
}
.footer-grid-1, .footer-grid-2{
height: 50vh;
padding-left: 50px;
padding-top: 100px;
}
.footer-grid-1 a{
color: #93B1A6;
font-size: 30px;
margin-bottom: 20px;
}
.footer-grid-2 a{
margin-bottom: 10px;
}
.footer-grid-2-title a{
font-size: 22px;
margin-bottom: 30px;
}
}