Merge pull request #476 from Annapoornaaradhya/About

Added About section
PriyaGhosal · Oct 11, 2024 · afee46d · afee46d
2 parents 4c90404 + ec57490
commit afee46d
Show file tree

Hide file tree

Showing 2 changed files with 182 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -267,6 +267,7 @@ <h1 id="logo">BuddyTrail</h1>
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
       <li><a href="#home" class="navhover">Home</a></li>
+      <li><a href="#About" class="navhover">About</a></li>
       <li><a href="#locations" class="navhover">Location</a></li>
       <li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
       <li><a href="#reviews" class="navhover">Reviews</a></li>
@@ -319,6 +320,7 @@ <h1 id="logo">BuddyTrail</h1>
       });
     </script>
     <main>
+
       <section class="hero">
         <h2>Travel Beyond Limits</h2>
 
@@ -377,6 +379,84 @@ <h4>Fly</h4>
         </div>
       </div>
     </section>
+
+       <section id="About">
+        <h1>About BuddyTrail - Your Ultimate Travel Companion</h1>
+        <p>
+          Welcome to <strong>BuddyTrail</strong>, the all-in-one travel platform
+          that turns your dream vacations into reality! 🌍✈ Whether you're
+          planning a fun family getaway 👨‍👩‍👧‍👦, an exciting trip with friends 👫, or
+          even a solo adventure, BuddyTrail is here to guide you every step of
+          the way. Discover new destinations 🏖🏰, find the best hotels 🏨, and
+          book budget-friendly flights 💺 without the hassle.
+        </p>
+
+        <h2>Why Choose BuddyTrail?</h2>
+        <p>
+          BuddyTrail isn't just another travel site. It's designed to give you
+          the most personalized, stress-free travel experience possible, making
+          sure every detail is taken care of. Here's what makes us different:
+        </p>
+
+        <ul>
+          <li>
+            🌍 <strong>Explore the World with an Interactive Travel Map:</strong>
+            Want to see the world at your fingertips? Our dynamic map lets you
+            discover the top travel destinations, both within India and
+            globally, with just a click. Find out more about each location,
+            including the best activities, top-rated attractions, and hidden
+            gems you won't want to miss.
+          </li>
+          <li>
+            🏨 <strong>Find Hotels that Fit Your Style & Budget:</strong>
+            Finding the perfect place to stay has never been easier! Our hotel finder
+            matches you with a wide selection of handpicked hotels that suit
+            your style and budget, from luxury resorts to budget-friendly stays.
+          </li>
+          <li>
+            ✈ <strong>Book Flights at the Best Prices:</strong>
+            With BuddyTrail, you can find and book flights at unbeatable prices,
+            tailored to your travel dates and preferences.
+          </li>
+          <li>
+            📝 <strong>Get Expert Tips from Seasoned Travelers:</strong>
+            Our travel blog is packed with insider tips, guides, and stories from
+            seasoned travelers.
+          </li>
+          <li>
+            ⭐ <strong>Read & Leave Reviews to Guide Fellow Travelers:</strong>
+            Travel smarter by reading user reviews and ratings for destinations,
+            hotels, flights, and activities.
+          </li>
+          <li>
+            🌐 <strong>Multi-Language Support for Global Travelers:</strong>
+            We offer multi-language support to make sure everyone feels at home.
+          </li>
+          <li>
+            🌙🌞 <strong>Dark & Bright Modes for Comfortable Browsing:</strong>
+            BuddyTrail lets you switch between dark and bright modes with ease.
+          </li>
+          <li>
+            📱 <strong>Seamless Experience Across Devices:</strong>
+            BuddyTrail is designed to be fully responsive, so you can plan and book your trips from any device.
+          </li>
+        </ul>
+
+        <p>Join a Community of Travelers!</p>
+        <p>
+          Become part of the BuddyTrail community and connect with fellow
+          travelers! Share your experiences, get inspired by others, and enjoy a
+          personalized travel experience like never before.
+        </p>
+
+        <p>
+          <strong>
+            Start your journey today with BuddyTrail, and turn your travel
+            dreams into memories that last a lifetime!
+          </strong>
+        </p>
+      </section>
+
     <!-- deals -->
     <section id="deals" class="deals-section">
       <h2>Exclusive Deals and Offers</h2>
@@ -495,6 +575,8 @@ <h3>Romantic Getaway</h3>
       </div>
     </section>
 
+
+
     <!-- Cab or Auto Booking -->
     <section id="cab-booking" class="cab-booking-section light-mode">
       <div class="booking-container">

diff --git a/style.css b/style.css
@@ -526,6 +526,106 @@ nav {
 }
 
 
+#About {
+  padding: 60px;
+  background-color: #f5f5f5; /* Light grey background */
+  color: #333; /* Dark grey text */
+  font-family: "Helvetica", "Arial", sans-serif;
+  line-height: 1.6;
+  text-align: left;
+  border-radius: 8px; /* Rounded corners */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+#About h1 {
+  font-size: 3.5em;
+  color: #007bff; /* Blue color for the main heading */
+  margin-bottom: 20px;
+  font-weight: bold;
+  text-align: center;
+}
+
+#About h2 {
+  font-size: 3em;
+  color: #0056b3; /* Dark blue color for subheadings */
+  margin-top: 40px;
+  font-weight: 600;
+}
+
+#About p {
+  font-size: 2.2em;
+  margin-bottom: 20px;
+  color: #444; /* Slightly darker grey for paragraph text */
+}
+
+#About p strong {
+  color: #007bff; /* Blue highlight for important text */
+}
+
+#About ul {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 20px;
+}
+
+#About ul li {
+  font-size: 1.5em;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: flex-start;
+}
+
+#About ul li::before {
+  content: "✔"; /* Checkmark symbol as bullet point */
+  margin-right: 10px;
+  color: #28a745; /* Green checkmark */
+  font-size: 1.5em;
+}
+/* Light mode for #About */
+.light-mode #About {
+  background-color: #f5f5f5; /* Light grey background */
+  color: #333; /* Dark grey text */
+}
+
+/* Dark mode for #About */
+.dark-mode #About {
+  background-color: #121212; /* Dark background */
+  color: #e0e0e0; /* Light grey text */
+}
+
+.light-mode #About h1 {
+  color: #007bff; /* Blue color for the main heading in light mode */
+}
+
+.dark-mode #About h1 {
+  color: #ffa500; /* Orange color for the main heading in dark mode */
+}
+
+.light-mode #About h2 {
+  color: #0056b3; /* Dark blue subheading in light mode */
+}
+
+.dark-mode #About h2 {
+  color: #ffd700; /* Bright yellow subheading in dark mode */
+}
+
+.light-mode #About p {
+  color: #444; /* Slightly darker grey for paragraph text in light mode */
+}
+
+.dark-mode #About p {
+  color: #d3d3d3; /* Lighter grey for paragraph text in dark mode */
+}
+
+.light-mode #About p strong {
+  color: #007bff; /* Blue highlight for important text in light mode */
+}
+
+.dark-mode #About p strong {
+  color: #ffcc00; /* Yellow highlight for important text in dark mode */
+}
+
+
 /* Cab Booking Section Styles */
 .cab-booking-section  {
   display: flex;