<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rangpur City - About</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">Home</a></li>
        <li><a href="about.html" class="active">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>

<main>
  <div class="container">

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

    <div class="banner">
      <p>
        Rangpur is a well-known city in the northern part of Bangladesh. 
        It is famous for agriculture, natural beauty, and traditional culture. 
        Many people love Rangpur because it is calm, clean, and full of local charm.
      </p>
    </div>

    <!-- GRID SECTION -->
    <div class="grid">

      <div class="card">
        <img src="location.jpg" alt="Location of Rangpur" class="card-img">
        <h3>Location</h3>
        <p>Rangpur is located in northern Bangladesh. It is an important city and also a divisional headquarters.</p>
      </div>

      <div class="card">
        <img src="climate.jpg" alt="Climate in Rangpur" class="card-img">
        <h3>Climate</h3>
        <p>The weather in Rangpur changes with the seasons. Winter is cool, summer is warm, and the rainy season brings fresh greenery.</p>
      </div>

      <div class="card">
        <img src="economy.jpg" alt="Economy of Rangpur" class="card-img">
        <h3>Economy</h3>
        <p>Agriculture plays a big role in Rangpur. Rice, vegetables, and other crops are important for the local economy.</p>
      </div>

      <div class="card">
        <img src="daily.jpg" alt="Daily life in Rangpur" class="card-img">
        <h3>Daily Life</h3>
        <p>People in Rangpur enjoy a simple lifestyle. Markets, schools, farms, and local businesses are important parts of the city.</p>
      </div>

      <!-- NEW CARD -->
      <div class="card">
        <img src="admin.jpg" alt="Administrative Area" class="card-img">
        <h3>Administrative Importance</h3>
        <p>Rangpur is a divisional city with important government offices and administrative services.</p>
      </div>

      <!-- NEW CARD -->
      <div class="card">
        <img src="begum.jpg" alt="Heritage of Rangpur" class="card-img">
        <h3>Heritage</h3>
        <p>Rangpur has historical places and cultural heritage that reflect its rich past and traditions.</p>
      </div>

    </div>

    <!-- BUTTONS -->
    <div class="page-buttons">
      <a href="index.html" class="nav-btn">Home</a>
      <a href="about.html" class="nav-btn active-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>
  <p>&copy; 2026 Rangpur City Website | Swastika Sarker</p>
</footer>

</body>
</html>