Merge pull request #1624 from shivam8112005/new2

feat: Enhanced UI of packages page

packages.html

@@ -7,6 +7,17 @@
     <title>Trip & Hotel Packages</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
+
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
     <link rel="stylesheet" href="styles.css" />
     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
     <style>
@@ -469,31 +480,129 @@
         <section class="hotel-packages">
             <h2 class="section-title">Our Packages</h2>
             <div class="line"></div>
-            <p class="subtitle">Find the best deals and offers for your next adventure!</p>
+            <p class="subtitle" style="color: #0697f1;">Find the best deals and offers for your next adventure!</p>
             <div class="package-grid">
-                <div class="package-card">
-                    <img src="https://images.unsplash.com/photo-1560457079-9a6532ccb118?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80" alt="Package 1">
-                    <div class="package-info">
-                        <h3>Package 1</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/download24.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">Hotel Paradise</h3>
+                            <p class="card1-description">Luxurious city hotel with rooftop pool and spa, perfect for relaxation after a day of exploring.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Nestled in the heart of the city, Hotel Paradise offers luxurious rooms with modern amenities. Guests can enjoy a stunning rooftop pool, a world-class spa, and fine dining at our in-house restaurant, serving gourmet meals prepared by top chefs. Perfect for both business and leisure travelers.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
                     </div>
                 </div>
-                <div class="package-card">
-                    <img src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80" alt="Package 2">
-                    <div class="package-info">
-                        <h3>Package 2</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/download21.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">Seaside Resort</h3>
+                            <p class="card1-description">Beachfront resort with water sports, stunning ocean views, and relaxing beachfront dining options.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Experience the ultimate beach getaway at Seaside Resort. With direct access to pristine beaches, guests can indulge in various water sports activities or relax at our beachfront dining area. Our resort offers comfortable accommodations and breathtaking ocean views, making it the perfect destination for relaxation and adventure.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
                     </div>
                 </div>
-                <div class="package-card">
-                    <img src="https://images.unsplash.com/photo-1521185496955-15097b20c5fe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80" alt="Package 3">
-                    <div class="package-info">
-                        <h3>Package 3</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/download22.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">City Center Inn</h3>
+                            <p class="card1-description">Modern inn in vibrant city center, featuring easy access to local attractions and public transport.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Situated in the heart of the vibrant city, City Center Inn is ideal for business travelers and tourists alike. The inn features modern amenities, a fitness center, and convenient access to local attractions and public transport. Enjoy comfortable rooms and exceptional service during your stay.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/download23.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">Luxury Villa</h3>
+                            <p class="card1-description"> Exclusive villa with private amenities, perfect for families and groups looking for a lavish getaway.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Indulge in luxury at our exclusive villa, featuring private pools, personal chefs, and concierge services. The villa is perfect for families and groups seeking a lavish getaway in a serene setting. Enjoy personalized services and create unforgettable memories in a luxurious environment.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/images27.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">Countryside B&B</h3>
+                            <p class="card1-description">Charming B&B with homemade breakfast and picturesque views, offering a cozy retreat from city life.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Experience the charm of the countryside at our cozy bed and breakfast. Enjoy homemade breakfasts featuring local ingredients, beautifully decorated rooms, and picturesque views of rolling hills and gardens. Our warm hospitality ensures a delightful and relaxing stay for all guests.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="card1">
+                    <div class="card1-inner">
+                        <div class="card1-front">
+                            <img src="./packages images/images26.jpeg" loading="lazy" alt="Card Image" class="card1-img">
+                            <h3 class="card1-title">Mountain Retreat</h3>
+                            <p class="card1-description">Cozy cabins in a tranquil mountain setting, ideal for nature lovers and adventure seekers.</p>
+                        </div>
+                        <div class="card1-back">
+                            <h3>More Information</h3>
+                            <p>Located in the serene mountains, Mountain Retreat provides a tranquil escape with cozy cabins equipped with modern comforts. Enjoy picturesque hiking trails, breathtaking views, and unwind in our hot tub after a day of exploration. We also serve complimentary breakfast to start your day right.</p>
+                            <a href="payment.html" class="card1-link">Book Now</a>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
+
+
+
+
+
+        <h2 class="section-title">Snapshots From Famous Hotels</h2>
+        <div class="line"></div>
+        <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel" data-pause="false">
+            <div class="carousel-inner">
+              <div class="carousel-item active" data-bs-interval="2500">
+                <img src="./packages images/images33.jpg"  class="d-block w-100" alt="...">
+              </div>
+              <div class="carousel-item" data-bs-interval="2500">
+                <img src="./packages images/image34.jpg" class="d-block w-100" alt="...">
+              </div>
+              <div class="carousel-item" data-bs-interval="2500">
+                <img src="./packages images/images29.jpg"  class="d-block w-100" alt="...">
+              </div>
+              <div class="carousel-item" data-bs-interval="2500">
+                <img src="./packages images/images28 (1).jpg"  class="d-block w-100" alt="...">
+              </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
+
+
+
+
         <section class="pricing-section">
             <h2 class="section-title">Pricing</h2>
             <div class="line"></div>
@@ -724,7 +833,144 @@ <h3>Luxury Plan</h3>
   width: 0%;
   background-color: transparent;
 }
+
+
+
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    margin: 0;
+}
+
+.hotel-packages .card1 {
+    width: 300px;
+    height: 400px;
+    perspective: 1000px; /* Enable 3D space */
+    margin: 30px 30px;
+}
+
+.hotel-packages .card1-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d; /* Maintain 3D effects */
+}
+
+.hotel-packages .card1:hover .card1-inner {
+    transform: rotateY(180deg); /* Rotate card on hover */
+}
+
+.hotel-packages .card1-front, .card1-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden; /* Hide the back face when flipped */
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.hotel-packages .card1-front {
+    background: linear-gradient(135deg, #fff, #fff);
+    color: black;
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center;
+    align-items: center; */
+    text-align: center;
+}
+
+.hotel-packages .card1-img {
+    width: 100%;
+    height: 55%;
+    border-radius: 10px 10px 0 0;
+}
+
+.hotel-packages .card1-title {
+    font-size: 1.5em;
+    margin: 10px 0;
+}
+
+.hotel-packages .card1-description {
+    padding: 0 15px;
+    text-align: center;
+}
+
+.hotel-packages .card1-back {
+    background: #fff;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: rotateY(180deg); /* Flip it to be hidden initially */
+    padding: 20px;
+}
+
+.hotel-packages .card1-back h3 {
+    margin-bottom: 10px;
+}
+
+.hotel-packages .card1-link {
+    text-decoration: none;
+    color: #6e7ff3;
+    font-weight: bold;
+    border: 1px solid #6e7ff3;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
+    margin-top: 2rem;
+}
+
+.hotel-packages .card1-link:hover {
+    background-color: #0697f1;
+    color: white;
+}
+
+.hotel-packages .package-grid{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap:wrap ;
+    /* margin-top: 50px; */
+} 
+.hotel-packages{
+    margin-top: 90rem;
+
+}
+.pricing-section{
+    margin-top: 15rem;
+}
+ .card1-title {
+    font-family: "Bona Nova SC", serif;
+  font-weight: 700;
+  font-style: normal;
+ }
+ .card1-description{
+    font-family: "Quicksand", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-style: normal;
+ }
+
+.card1:hover {
+    transform: scale(1.05); /* Scale effect on hover */
+}
+.carousel{
+    overflow: hidden;
+    width: 80%;
+    margin: auto;
+    /* margin-top: 100px; */
+    border-radius: 20px;
+    height: 500px;
+}
     </style>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
 
 </html>