updated home page

hotel_booking/index.php

@@ -206,7 +206,7 @@
                                     <input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
                                 </div>
                                 <div class="col-lg-2">
-                                    <label class="form-label" style="color: black; font-weight: 500;">Guests</label>
+                                    <label class="form-label" style="color: black; font-weight: 500;">Adults</label>
                                     <select class="form-select" style="font-size: 14px;">
                                         <option value="1">1</option>
                                         <option value="2">2</option>
@@ -217,7 +217,7 @@
                                     </select>
                                 </div>
                                 <div class="col-lg-2">
-                                    <label class="form-label" style="color: black; font-weight: 500;">Rooms</label>
+                                    <label class="form-label" style="color: black; font-weight: 500;">Children</label>
                                     <select class="form-select" style="font-size: 14px;">
                                         <option value="1">1</option>
                                         <option value="2">2</option>
@@ -239,9 +239,42 @@
             </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">Midtown Hotel epitomizes comfort and service with spacious accommodation for you to enjoy every moment</h1>
+        <a class="btn-th" href="#" style="margin-bottom: 10px;">Hotel</a>
+    </div>
+    <!--pre section2-->
+    <div class="panel" data-color="khaki">
+        <div class="swiper mySwiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/presec1.jpg"/>
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/presec2.jpg"/>
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/presec3.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="pre-section2-container">
+            <div class="pre-section2-wrapper">
+                <div class="pre-section2-text">
+                    <p>Favorite hotel</p>
+                    <p>Find inspiration</p>
+                    <p>Experience the ultimate in luxury</p>
+                    <p>Discover the ultimate indulgence</p>
+                    <p>In the heart of Florida</p>
+                </div>
+            </div>
+        </div>
+    </div>
     <!--Rooms-->
-    <div>
+    <div class="panel" data-color="white">
-        <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>
+        <h3 class="pt-4 text-center fw-bold logo-font" 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">
@@ -273,12 +306,71 @@
                         </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 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-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 mb-5">
+                    <a href="" class="btn-th">More</a>
                 </div>
             </div>
         </div>
     </div>
+        
 
 
 
@@ -287,24 +379,9 @@
 
 
 
-
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    
-    <script>
+    <script src="./script.js"></script>
-        const burgerLinks = document.querySelector('.burger-links');
-        const burger = document.querySelector('.burger');
-        const body = document.querySelector('body');
-
-        burgerButton = function()
-        {
-        burgerLinks.classList.toggle('active');
-        burger.classList.toggle('active');
-        body.classList.toggle('active');
-        }
-
-
-
-
-
-  </script>
 </body>
 </html>

hotel_booking/script.js

@@ -0,0 +1,63 @@
+//===== navbar =====//
+const burgerLinks = document.querySelector('.burger-links');
+const burger = document.querySelector('.burger');
+const body = document.querySelector('body');
+
+burgerButton = function(){
+    burgerLinks.classList.toggle('active');
+    burger.classList.toggle('active');
+    body.classList.toggle('active');
+}
+//===== pre section =====//
+function checkForVisibility() {
+    var headers = document.querySelectorAll(".pre-header");
+    headers.forEach(function(preheader) {
+      if (isElementInViewport(preheader)) {
+        preheader.classList.add("headerVisible");
+      } else {
+        preheader.classList.remove("headerVisible");
+      }
+    });
+}
+function isElementInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
+if (window.addEventListener) {
+    addEventListener("DOMContentLoaded", checkForVisibility, false);
+    addEventListener("load", checkForVisibility, false);
+    addEventListener("scroll", checkForVisibility, false);
+}
+//===== background color (jquery) =====//
+$(window).scroll(function() {
+    var $window = $(window),
+        $body = $('body'),
+        $panel = $('.panel');
+    var scroll = $window.scrollTop() + ($window.height() / 3);
+    $panel.each(function () {
+      var $this = $(this);
+      if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
+        $body.removeClass(function (index, css) {
+          return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
+        });
+        $body.addClass('color-' + $(this).data('color'));
+      }
+    });    
+}).scroll();
+//===== swiper =====//
+var swiper = new Swiper(".mySwiper", {
+    spaceBetween: 30,
+    centeredSlides: true,
+    effect: "fade",
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+    },
+});

hotel_booking/style.css

@@ -1,8 +1,10 @@
 *{
     font-family: "Lora", serif;
 }
-.logo-font{
+body{
-    font-family: "Tangerine";
+    color: #000;
+    background-color: #f4f4f4;
+    transition: background-color 1s ease;
 }
 a{
     text-decoration: none !important;
@@ -10,6 +12,39 @@ a{
 ul{
     list-style: none;
 }
+.logo-font{
+    font-family: "Tangerine";
+}
+/*---Btn---*/
+.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, .btn-th:hover{
+    background-color: #625e5b;
+    color: white;
+    transition: all 0.5s ease;
+}
+.btn-minor{
+    background-color: #747264;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 3px;
+}
+.btn-th{
+    border: 1px solid #747264;
+    padding: 15px 35px;
+    border-radius: 3px;
+    color: black;
+}
 /*-Hero-*/
 .hero {
     position: relative;
@@ -182,31 +217,81 @@ ul{
 .burger-links.active {
     top: 0%;
 }
-/*---Room---*/
+/*-- pre section --*/
-.btn-main{
+.panel {
-    background-color: #3C3633;
+    min-height: 100vh;
-    border: none;
+    display: flex;
-    color: white;
+    flex-direction: column;
-    padding: 10px 20px;
+    justify-content: center;
-    text-align: center;
+    align-items: center;
-    font-size: 14px;
-    border-radius: 3px;
 }
-.btn-main:hover, .btn-minor:hover{
+.color-khaki {
-    background-color: #625e5b;
+    background-color: #CBC0AF;
-    color: white;
 }
-.btn-minor{
+.pre-header{
-    background-color: #747264;
+    opacity: 0;
-    border: none;
+    transform: translateY(50px);
-    color: white;
+    transition: all 1.2s ease-out;
-    padding: 10px 20px;
     text-align: center;
-    font-size: 14px;
+    font-size: 50px;
-    border-radius: 3px;
+    margin-bottom: 50px;
+    width: 50%;
+}
+.headerVisible{
+    opacity: 1;
+    transform: translateY(0);
+}
+/*-- pre section2 --*/
+.pre-section2-container{
+    position: absolute; 
+    z-index: 1; 
+    width: 350px; 
+    height: 400px; 
+    background-color:white;
+}
+.pre-section2-wrapper{
+   width: 300px; 
+   height: 350px; 
+   border: 1px solid lightgray; 
+   margin-top: 25px; 
+   margin-left: 25px; 
+}
+.pre-section2-text{
+    width: 300px; 
+    height: 350px; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+/*--Swiper--*/
+.swiper{
+    width: 80%;
+    height: 800px;
+}
+.swiper-slide{
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.swiper-slide img{
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-/*---Responsive---*/
+
+/*---------- Responsive ----------*/
+@media (max-width:980px) {
+    .pre-header{
+        width: 80%;
+    }
+}
 @media (max-width:768px) {
     .nav-wrapper {
       padding: 30px;
@@ -227,10 +312,12 @@ ul{
     .burger-links{
       display: flex;
     }
+    .pre-header{
+        font-size: 40px;
+    }
 }
 @media (max-width: 450px){
     .hero-head{
-        margin-top: 100px;
         margin-bottom: 10px;
     }
     .hero-title{
@@ -243,6 +330,25 @@ ul{
         padding-left: 10px;
         padding-right: 10px;
     }
+    .pre-header{
+        font-size: 30px;
+    }
+    .pre-section2-container{
+        width: 280px; 
+        height: 450px; 
+    }
+    .pre-section2-wrapper{
+       width: 230px; 
+       height: 400px;
+       margin-top: 25px; 
+       margin-left: 25px; 
+    }
+    .pre-section2-text{
+        width: 230px; 
+        height: 400px;
+    }
+    .swiper{
+        height: 700px;
+    }
 }
 
-