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-02 18:10:05 -05:00
parent 8355547cfd
commit e362a7131a
6 changed files with 61 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1,010 KiB

36
hotel_booking/index.php
View file

@ -18,7 +18,7 @@
<div class="load"></div> <div class="load"></div>
<!--Navbar section (bootstrap)--> <!--Navbar section (bootstrap)-->
<div class="wrap w-100"> <div class="wrap w-100">
<div class="row align-items-center m-0 d-none d-md-flex sticky-top" style="padding-top: 50px;"> <div class="row align-items-center m-0 d-none d-md-flex sticky-top">
<div class="col-5 text-center rounded-pill" > <div class="col-5 text-center rounded-pill" >
<ul class="d-flex list-unstyled justify-content-center m-0"> <ul class="d-flex list-unstyled justify-content-center m-0">
<li class="nav-item"> <li class="nav-item">
@ -37,7 +37,7 @@
</div> </div>
<div class="col-2 bg-transparent px-3"> <div class="col-2 bg-transparent px-3">
<a href="index.php" style="text-decoration: none;"> <a href="index.php" style="text-decoration: none;">
<h1 class="text-center fw-bold figure-img logo-font" style="color: white;">Midtown Hotel</h1> <img src="./images/logo-white.png" class="logo-img"/>
</a> </a>
</div> </div>
<div class="col-5 text-center rounded-pill"> <div class="col-5 text-center rounded-pill">
@ -62,7 +62,7 @@
<div class="nav-parent sticky-top"> <div class="nav-parent sticky-top">
<div class="nav-wrapper"> <div class="nav-wrapper">
<div class="branding"> <div class="branding">
<a href="#" class="logo-font" style="color: white;" >Midtown Hotel</a> <img src="./images/logo-white.png" style="width: 150px; margin-left: -40px;"/>
</div> </div>
<a class="burger" onclick="burgerButton()"> <a class="burger" onclick="burgerButton()">
<div class="bar"></div> <div class="bar"></div>
@ -274,12 +274,12 @@
</div> </div>
<!--Rooms--> <!--Rooms-->
<div class="panel" data-color="white"> <div class="panel" data-color="white">
<h3 class="pt-4 text-center fw-bold logo-font" style="color: #776B5D; font-size: 56px; text-shadow: 2px 2px #EBE3D5;">Rooms</h3> <h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Our Rooms</h3>
<p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p> <p class="mb-4 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4 col-md-6 my-3"> <div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 300px; margin: auto;"> <div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top"> <img src="./images/single_room.jpg" class="card-img-top">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5> <h5 class="card-title" style="color: #222831;">Single room</h5>
@ -308,7 +308,7 @@
</div> </div>
<div class="col-lg-4 col-md-6 my-3"> <div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 300px; margin: auto;"> <div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top"> <img src="./images/single_room.jpg" class="card-img-top">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5> <h5 class="card-title" style="color: #222831;">Single room</h5>
@ -337,7 +337,7 @@
</div> </div>
<div class="col-lg-4 col-md-6 my-3"> <div class="col-lg-4 col-md-6 my-3">
<div class="card shadow" style="max-width: 300px; margin: auto;"> <div class="card shadow" style="max-width: 350px; margin: auto;">
<img src="./images/single_room.jpg" class="card-img-top"> <img src="./images/single_room.jpg" class="card-img-top">
<div class="card-body"> <div class="card-body">
<h5 class="card-title" style="color: #222831;">Single room</h5> <h5 class="card-title" style="color: #222831;">Single room</h5>
@ -364,12 +364,30 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-12 text-center mt-5 mb-5"> <div class="col-lg-12 text-center mt-5 mb-2">
<a href="" class="btn-th">More</a> <a href="" class="btn-th">More</a>
</div> </div>
</div> </div>
</div> </div>
</div> </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>
<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">
<img src="./images/service1.jpg" style="width: 100%;"/>
</div>
<div class="col-lg-4">
<img src="./images/service2.jpg" style="width: 100%"/>
</div>
<div class="col-lg-4">
<img src="./images/service3.jpg" style="width: 100%"/>
</div>
</div>
</div>
</div>

46
hotel_booking/style.css
View file

@ -15,6 +15,23 @@ ul{
.logo-font{ .logo-font{
font-family: "Tangerine"; font-family: "Tangerine";
} }
.font-title{
font-size: 56px;
}
/*---Background color---*/
.panel{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-khaki{
background-color: #CBC0AF;
}
.color-cream{
background-color: #DDD8D0;
}
/*---Btn---*/ /*---Btn---*/
.btn-main{ .btn-main{
background-color: #3C3633; background-color: #3C3633;
@ -46,6 +63,9 @@ ul{
color: black; color: black;
} }
/*-Hero-*/ /*-Hero-*/
.logo-img{
width: 13vw;
}
.hero { .hero {
position: relative; position: relative;
/*background: url('./images/home1.jpg') center/cover no-repeat;*/ /*background: url('./images/home1.jpg') center/cover no-repeat;*/
@ -218,16 +238,6 @@ ul{
top: 0%; top: 0%;
} }
/*-- pre section --*/ /*-- pre section --*/
.panel {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-khaki {
background-color: #CBC0AF;
}
.pre-header{ .pre-header{
opacity: 0; opacity: 0;
transform: translateY(50px); transform: translateY(50px);
@ -265,7 +275,7 @@ ul{
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
/*--Swiper--*/ /*-Swiper-*/
.swiper{ .swiper{
width: 80%; width: 80%;
height: 800px; height: 800px;
@ -284,13 +294,22 @@ ul{
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
/*-- services --*/
/*---------- Responsive ----------*/ /*---------- Responsive ----------*/
@media (max-width:980px) { @media (max-width:980px) {
.logo-img{
width: 15vw;
}
.pre-header{ .pre-header{
width: 80%; width: 80%;
} }
.swiper{
width: 95%;
}
.font-title{
font-size: 50px;
}
} }
@media (max-width:768px) { @media (max-width:768px) {
.nav-wrapper { .nav-wrapper {
@ -315,6 +334,9 @@ ul{
.pre-header{ .pre-header{
font-size: 40px; font-size: 40px;
} }
.font-title{
font-size: 40px;
}
} }
@media (max-width: 450px){ @media (max-width: 450px){
.hero-head{ .hero-head{