updated homepage

hotel_booking/index.php

@@ -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">
-                    <img src="./images/service1.jpg" style="width: 100%;"/>
+                    <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">
-                    <img src="./images/service2.jpg" style="width: 100%"/>
+                    <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">
-                    <img src="./images/service3.jpg" style="width: 100%"/>
+                    <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>
+
+
         
 
 

hotel_booking/script.js

@@ -38,8 +38,8 @@ if (window.addEventListener) {
 //===== background color (jquery) =====//
 $(window).scroll(function() {
     var $window = $(window),
-        $body = $('body'),
+      $body = $('body'),
-        $panel = $('.panel');
+      $panel = $('.panel');
     var scroll = $window.scrollTop() + ($window.height() / 3);
     $panel.each(function () {
       var $this = $(this);
@@ -60,4 +60,12 @@ var swiper = new Swiper(".mySwiper", {
       delay: 2500,
       disableOnInteraction: false,
     },
+});
+var swiper = new Swiper(".swiper-testimonials", {
+  spaceBetween: 30,
+  centeredSlides: true,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
 });

hotel_booking/style.css

@@ -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;
+    }
 }