updated service page
This commit is contained in:
parent
471c7e4421
commit
a8b371a391
4 changed files with 103 additions and 13 deletions
|
@ -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
BIN
hotel_booking/images/service_page1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 3 MiB |
|
@ -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>
|
|
@ -32,6 +32,9 @@ ul{
|
|||
.color-cream{
|
||||
background-color: #DDD8D0;
|
||||
}
|
||||
.color-blue{
|
||||
background-color: #EEF7FF;
|
||||
}
|
||||
/*---Btn---*/
|
||||
.btn-main{
|
||||
background-color: #3C3633;
|
||||
|
|
Loading…
Add table
Reference in a new issue