[02] - 03 - Understanding index.html

Your HTML file is the backbone of the entire Travel Scroll app. Here's a walkthrough of each section:

---

🧠 1. Head Tag – Page Metadata & Styles

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Scroll</title>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <!-- Link to External Styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

✅ Purpose:

• Sets the title of the tab to “Scroll”

• Loads Font Awesome icons (like hamburger menu, arrow-up)

• Links your styles.css file for custom styling

• Ensures responsive design with the viewport tag

---

🏠 2. Header – Navigation + Hero Section

<header id="home">
  <!-- Navigation Bar -->
  <nav id="nav">...</nav>

  <!-- Hero Banner -->
  <div class="banner">
    <div class="container">
      <h1>Backroads Travels</h1>
      <p>Backroads Travels is an Indian online travel company...</p>
      <a href="#tours" class="scroll-link btn btn-white">explore tours</a>
    </div>
  </div>
</header>

✅ Highlights:

• Contains both the navbar and landing banner

• The nav is interactive and becomes sticky on scroll (JS-powered)

• The explore tours button uses smooth scrolling to jump to the #tours section

---

📚 3. About Section – Introduction to India

<section id="about" class="section">
  <div class="title">
    <h2>about <span>us</span></h2>
    <hr>
    <p>Deeply traditional yet endlessly surprising, India is one of those destinations...</p>
  </div>
</section>

✅ Purpose:

• Gives a warm intro to India's travel appeal

• Uses <h2> with a styled <span> for emphasis

• This block is purely informational, no JS interaction here

---

🛎️ 4. Services Section – What We Offer

<section id="services" class="section">
  <div class="title">
    <h2>our <span>services</span></h2>
    <hr>
    <p>Although travel agencies have not been spared by technological advancements...</p>
  </div>
</section>

✅ What's in it:

• Talks about services like Housing, Transport, Food, etc.

• Uses bold <span class="intexthead"> elements to highlight each service title

• Pure content section with nice typography

---

🧳 5. Tours Section – Destination Cards + Filters

<section id="tours" class="section menu">
  <div class="title">
    <h2>featured <span>tours</span></h2>
    <hr>
    <div class="underline"></div>
  </div>

  <!-- Filter Buttons will be dynamically added here -->
  <div class="btn-container"></div>

  <!-- Cards (places to visit) will be injected by JS -->
  <div class="section-center"></div>
</section>

✅ Dynamic Elements:

• btn-container: JavaScript dynamically adds filter buttons (north, south, all, etc.)

• section-center: Filled with tour cards from the menu[] array (in app.js)

---

📜 6. Footer – Dynamic Copyright

<footer class="section">
  <p>
    copyright &copy; backroads travel tours company 
    <span id="date"></span>. all rights reserved
  </p>
</footer>

✅ Magic Touch:

• The id="date" is auto-filled with the current year using JavaScript.

---

🔝 7. Back to Top Button

<a href="#home" class="scroll-link top-link">
  <i class="fas fa-arrow-up"></i>
</a>

✅ What it does:

• Only becomes visible after scrolling down (.show-link is toggled via JS)

• Clicking scrolls back to the top

---

🧠 8. Script Tag – Powering Everything

<script src="app.js"></script>

✅ This is the brain of your site:

• Manages navbar toggle

• Filters places by category

• Injects destination cards

• Enables smooth scroll and sticky nav