From 13a95fef0331e96d69c930b936ce85d929d6295c Mon Sep 17 00:00:00 2001
From: shivam8112005 <shivamshukla8112005@gmail.com>
Date: Sun, 3 Nov 2024 19:23:46 +0530
Subject: [PATCH] Enhanced styling of packages page

---
 packages.html | 217 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 204 insertions(+), 13 deletions(-)
diff --git a/packages.html b/packages.html
index dad7a18f..b6d94606 100644
--- a/packages.html
+++ b/packages.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="styles.css" />
     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
     <style>
+        /* currently mostly css written in style tag after html is used */
         :root {
             --primary-color: #d6eaf7;
             --secondary-color: #e73e76;
@@ -201,6 +202,7 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             overflow: hidden;
             transition: transform 0.3s ease;
+            margin-bottom: 1rem;
         }
 
         .package-card:hover {
@@ -403,7 +405,7 @@
 
 <body>
     <video autoplay muted loop id="background-video">
-        <source src="background-video.mp4" type="video/mp4">
+        <source src="packages_bg.mp4" type="video/mp4">
     </video>
     <div class="video-overlay"></div>
     <header>
@@ -447,8 +449,7 @@
               <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
                   style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button></a>
       
-              <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
-                  style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
+             
       
               <div class="toggle-container" data-aos="fade-down">
                 <input id="themeToggle" class="toggle" type="checkbox">
@@ -462,27 +463,32 @@
           </div>
     
     </header>
+
+
+
+
     <main class="main-content">
         <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>
             <div class="package-grid">
                 <div class="package-card">
-                    <img src="image1.jpg" alt="Package 1">
+                    <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>
                 </div>
                 <div class="package-card">
-                    <img src="image2.jpg" alt="Package 2">
+                    <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>
                 </div>
                 <div class="package-card">
-                    <img src="image3.jpg" alt="Package 3">
+                    <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>
@@ -492,6 +498,7 @@ <h3>Package 3</h3>
         </section>
         <section class="pricing-section">
             <h2 class="section-title">Pricing</h2>
+            <div class="line"></div>
             <p class="subtitle">Choose the perfect plan for your needs</p>
             <div class="pricing-container">
                 <div class="pricing-card">
@@ -504,8 +511,7 @@ <h3>Basic Plan</h3>
                     </ul>
                     <a href="payment.html">
                         <button class="btn">Book Now</button>
-                      </a>
-                      
+                    </a>
                 </div>
                 <div class="pricing-card">
                     <h3>Premium Plan</h3>
@@ -517,8 +523,7 @@ <h3>Premium Plan</h3>
                     </ul>
                     <a href="payment.html">
                         <button class="btn">Book Now</button>
-                      </a>
-                      
+                    </a>
                 </div>
                 <div class="pricing-card">
                     <h3>Luxury Plan</h3>
@@ -530,12 +535,198 @@ <h3>Luxury Plan</h3>
                     </ul>
                     <a href="payment.html">
                         <button class="btn">Book Now</button>
-                      </a>
-                      
+                    </a>
                 </div>
             </div>
         </section>
     </main>
+    
+
+
+
+    <style>
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Hide horizontal scrollbar */
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#background-video {
+    position: fixed; /* Fixes the video to the background */
+    top: 0; /* Position to the top */
+    left: 0; /* Position to the left */
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Makes the video cover the entire screen */
+    z-index: -1; /* Sends video behind other content */
+}
+
+.video-overlay {
+    position: fixed; /* Position overlay over the video */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Optional overlay color */
+    z-index: 1; /* Ensure overlay is above the video */
+}
+
+
+
+:root {
+    --primary-color: #d6eaf7;
+    --secondary-color: #e73e76;
+    --bg-color: #f4f4f9;
+    --text-color: #333;
+    --card-bg: #ffffff;
+}
+
+/* Main Content */
+.main-content {
+    margin-top: 40rem;
+    padding: 40px;
+    font-family: Arial, sans-serif;
+    background-color:transparent
+}
+
+/* Section Titles */
+.section-title {
+    font-size: 2em;
+    text-align: center;
+    margin-bottom: 10px;
+    color: var(--secondary-color); /* Orange Color */
+}
+
+/* Line after Heading */
+.line {
+    width: 60%;
+    height: 2px;
+    background-color: var(--secondary-color); /* Use the same orange color */
+    margin: 10px auto;
+}
+
+/* Subtitle Styling */
+.subtitle {
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--text-color); /* Change color according to your theme */
+}
+
+/* Package Grid Styling */
+.package-grid {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+}
+
+.package-card {
+    width: 300px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+    cursor: pointer;
+}
+
+.package-card:hover {
+    transform: translateY(-5px);
+}
+
+.package-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.package-info {
+    padding: 20px;
+    background-color: var(--card-bg);
+}
+
+.package-info h3 {
+    font-size: 1.5em;
+    margin: 0;
+    color: var(--text-color);
+}
+
+.package-info p {
+    color: #555;
+}
+
+/* Pricing Section */
+.pricing-container {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.pricing-card {
+    width: 300px;
+    border-radius: 8px;
+    padding: 20px;
+    background-color: var(--primary-color);
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
+.pricing-card h3 {
+    font-size: 1.8em;
+    margin-bottom: 10px;
+    color: var(--text-color);
+}
+
+.pricing-card p {
+    font-size: 1.2em;
+    color: var(--text-color);
+}
+
+.pricing-card ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 20px 0;
+}
+
+.pricing-card ul li {
+    margin-bottom: 10px;
+    font-size: 1em;
+    color: #555;
+}
+
+.pricing-card .btn {
+    background-color: #ff6347;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.pricing-card .btn:hover {
+    background-color: #ff4500;
+}
+
+ a:hover::after, .link a:hover::after {
+  width: 0%;
+  background-color: transparent;
+}
+    </style>
 </body>
 
-</html>
+</html>
\ No newline at end of file
