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

updated service page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-04 22:16:47 -05:00
parent 471c7e4421
commit a8b371a391
4 changed files with 103 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
hotel_booking/components/footer.php
View file

@ -1,20 +1,18 @@
<div class="footer">
<div class="footer-grid">
<div class="footer-grid-1">
<a href="#">Rooms</a>
<a href="#room">Rooms</a>
<a href="../services.php">Services</a>
<a href="#">News</a>
<a href="#">Gallery</a>
<a href="#">Info</a>
<a href="#">About</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>
<a href="#">Information<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>
<a href="#">Presidential rooms</a>
<a href="#">General information</a>
<a href="#">Loyalty program</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;"/>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

101
hotel_booking/services.php
View file

@ -38,9 +38,82 @@
background-image: url(images/service_page3.jpg);
}
}
.pre-header-subtitle{
width: 30%;
}
.service-container{
display: flex;
width: 90%;
height: 100vh;
flex-direction: column;
align-items: center;
text-align: center;
margin: 20px;
}
.service-frame{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 50px;
}
.service-frame1{
width: 60px;
height: 80px;
border: 1px solid black;
}
.service-frame2{
width: 40px;
height: 60px;
border: 1px solid black;
margin-top: 10px;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.service-title{
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
}
.service-subtilte{
width: 50%;
font-size: 50px;
font-weight: 500;
margin-bottom: 50px;
}
@media (max-width:980px){
.pre-header-subtitle{
width: 80%;
}
.service-frame1{
width: 40px;
height: 60px;
}
.service-frame2{
width: 20px;
height: 40px;
font-size: 24px;
}
.service-subtilte{
width: 90%;
}
}
@media (max-width:768px) {
.service-subtilte{
font-size: 40px;
}
}
@media (max-width:450px) {
.service-subtilte{
font-size: 30px;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="service-hero">
<div class="load"></div>
<?php require('./components/header.php') ?>
@ -51,15 +124,31 @@
</div>
</div>
</div>
<!--pre section-->
<div class="panel" data-color="white">
<img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
<h1 class="pre-header">We craft enchanting moments of tranquility and serenity, far away from the chaos and stress of daily life</h1>
<p class="pre-header pre-header-subtitle" style="font-size: 16px;">We ensure the well-being of your body, invigorate your senses, and provide tranquility for your mind. Our pools, suana, and massage therapy have become synonymous with relaxation and wellness.</p>
</div>
<!--pool section-->
<div class="panel" data-color="blue">
<div class="service-container">
<div class="service-frame">
<div class="service-frame1">
<div class="service-frame2">I</div>
</div>
<p class="service-title">Pools</p>
</div>
<p class="service-subtilte">Relax with massaging spa jets in the perfect water temperature</p>
<img src="./images/service_page1.jpg" style="width: 100%; height: 100%; objectfit: cover;"/>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<?php require('./components/script.php') ?>
</body>
</html>

3
hotel_booking/style.css
View file

@ -32,6 +32,9 @@ ul{
.color-cream{
background-color: #DDD8D0;
}
.color-blue{
background-color: #EEF7FF;
}
/*---Btn---*/
.btn-main{
background-color: #3C3633;