<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rangpur City - Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<header>
  <div class="container header-center">

    <!-- LOGO -->
    <div class="logo-center">
      <img src="logo.png" alt="Rangpur City Logo" class="logo-img">
    </div>

    <!-- NAVIGATION -->
    <nav class="nav-center">
      <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="places.html">Places</a></li>
        <li><a href="food.html">Food</a></li>
        <li><a href="culture.html">Culture</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

  </div>
</header>

<!-- HERO SECTION -->
<section class="hero">
  <div class="container">
    <h1>Welcome to Rangpur City</h1>
    <p>This is a simple website about my favourite city, Rangpur.</p>
    <a href="about.html" class="btn">Explore More</a>
  </div>
</section>

<!-- MAIN CONTENT -->
<main>
  <div class="container">

    <h2 class="section-title">Discover Rangpur</h2>

    <div class="grid">

      <!-- CARD 1 -->
      <div class="card">
        <img src="nature.jpg" alt="Green natural scenery in Rangpur" class="card-img">
        <h3>Beautiful Nature</h3>
        <p>Rangpur is known for its green fields and fresh air.</p>
      </div>

      <!-- CARD 2 -->
      <div class="card">
        <img src="people.jpeg" alt="Friendly local people in Rangpur" class="card-img">
        <h3>Friendly People</h3>
        <p>The people of Rangpur are kind and welcoming.</p>
      </div>

      <!-- CARD 3 -->
      <div class="card">
        <img src="culture.jpg" alt="Traditional culture and lifestyle in Rangpur" class="card-img">
        <h3>Rich Culture</h3>
        <p>Traditions, food, and festivals make Rangpur unique.</p>
      </div>

    </div>

    <!-- NAV BUTTONS -->
    <div class="page-buttons">
      <a href="index.html" class="nav-btn active-btn">Home</a>
      <a href="about.html" class="nav-btn">About</a>
      <a href="places.html" class="nav-btn">Places</a>
      <a href="food.html" class="nav-btn">Food</a>
      <a href="culture.html" class="nav-btn">Culture</a>
      <a href="contact.html" class="nav-btn">Contact</a>
    </div>

  </div>
</main>

<!-- FOOTER -->
<footer>
  <p>&copy; 2026 Rangpur City Website | Swastika Sarker</p>
</footer>

</body>
</html>