<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Book Store - A Book Can Change Your Life" />
  <title>Book Store</title>
  <style>
    /* ===== CSS Variables ===== */
    :root {
      --primary: #1abc9c;   /* tosca */
      --secondary: #ffffff;
      --dark: #2c3e50;
      --gray: #7f8c8d;
      --font-main: 'Helvetica Neue', Arial, sans-serif;
    }

    /* ===== Reset ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: var(--font-main);
      color: var(--dark);
      line-height: 1.6;
      background: #fff;
    }
    img {
      max-width: 100%;
      border-radius: 8px;
      display: block;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .container {
      width: 90%;
      max-width: 1200px;
      margin: auto;
    }

    /* ===== NAVBAR ===== */
    header {
      padding: 1rem 0;
    }
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    .logo {
      font-weight: bold;
      font-size: 1.5rem;
    }
    .logo span {
      color: var(--primary);
    }
    .nav-links {
      list-style: none;
      display: flex;
      gap: 1.5rem;
    }
    .nav-links a {
      font-weight: 500;
    }
    .nav-toggle {
      display: none;
      font-size: 1.5rem;
      background: none;
      border: none;
      cursor: pointer;
    }

    /* ===== HERO SECTION ===== */
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 2rem;
      padding: 3rem 0;
    }
    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    .hero h1 .accent {
      color: var(--primary);
    }
    .hero p {
      margin-bottom: 1.5rem;
      color: var(--gray);
    }
    .btn-group {
      display: flex;
      gap: 1rem;
    }
    .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn.primary {
      background: var(--primary);
      color: #fff;
    }
    .btn.primary:hover {
      background: #16a085;
    }
    .btn.secondary {
      background: #fff;
      border: 2px solid var(--dark);
    }
    .btn.secondary:hover {
      background: var(--dark);
      color: #fff;
    }

    /* ===== FEATURE SECTION ===== */
    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin: 4rem 0;
    }
    .feature-card {
      position: relative;
    }
    .badge {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      background: var(--primary);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 12px;
      font-weight: bold;
      font-size: 0.9rem;
    }
    .feature-text h2 {
      margin-bottom: 1rem;
    }
    .feature-text p {
      margin-bottom: 1.5rem;
      color: var(--gray);
    }
    .categories {
      margin-top: 1rem;
      list-style: disc inside;
      color: var(--gray);
    }

    /* ===== COLLECTIONS ===== */
    .collections {
      text-align: center;
      margin-bottom: 4rem;
    }
    .collections h2 {
      margin-bottom: 0.5rem;
    }
    .collections p {
      margin-bottom: 2rem;
      color: var(--gray);
    }
    .filter-btns {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .btn.pill {
      border-radius: 50px;
      border: 1px solid var(--gray);
      background: #fff;
      padding: 0.5rem 1rem;
    }
    .btn.pill.active {
      background: var(--primary);
      color: #fff;
      border: none;
    }
    .collection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
    }
    .book-card {
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }
    .book-card:hover {
      transform: translateY(-5px);
    }
    .book-card h3 {
      margin-top: 0.75rem;
    }

    /* ===== FOOTER ===== */
    footer {
      background: var(--dark);
      color: #fff;
      padding: 1rem 0;
      text-align: center;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background: #fff;
        padding: 1rem;
        position: absolute;
        top: 60px;
        right: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
      .nav-links.show {
        display: flex;
      }
      .nav-toggle {
        display: block;
      }
      .hero {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .features {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <!-- ===== HEADER ===== -->
  <header>
    <nav class="container nav-bar" aria-label="Main Navigation">
      <a href="#" class="logo">Book<span>World</span></a>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Collections</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button class="nav-toggle" aria-label="Open Menu">☰</button>
    </nav>
  </header>

  <!-- ===== HERO SECTION ===== -->
  <section class="hero container">
    <div class="hero-text">
      <h1>
        A <span class="accent">Book</span><br />
        Can Change<br />
        Your Life
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet,
        tellus id quis nunc. Amet, volutpat in felis at vitae vel elementum
        est facilisi. Lacina id malesuada semper.
      </p>
      <div class="btn-group">
        <a href="#" class="btn primary">Buy Now</a>
        <a href="#" class="btn secondary">See Details</a>
      </div>
    </div>
    <div class="hero-img">
      <img src="https://via.placeholder.com/300x400.png?text=Book+Cover" alt="Book Cover: The Design of Everyday Things" />
    </div>
  </section>

  <!-- ===== FEATURE SECTION ===== -->
  <section class="features container">
    <article class="feature-card">
      <img src="https://via.placeholder.com/400x300.png?text=Library" alt="Person reading in library" />
      <div class="badge">50+<br><span>Years Experience</span></div>
    </article>
    <article class="feature-card">
      <img src="https://via.placeholder.com/400x300.png?text=Notebook" alt="Notebook and coffee" />
    </article>
    <div class="feature-text">
      <h2>Book World is Best Choice For Learners</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet,
        tellus id quis nunc. Amet, volutpat in felis at vitae vel elementum
        est facilisi. Lacina id malesuada semper.
      </p>
      <a href="#" class="btn primary">Contact Us</a>
      <ul class="categories">
        <li>Comics & Graphics</li>
        <li>Biography</li>
        <li>Literary Collection</li>
        <li>Children Fiction</li>
      </ul>
    </div>
  </section>

  <!-- ===== POPULAR COLLECTIONS ===== -->
  <section class="collections container">
    <h2>Popular Collections</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet,
      tellus id quis nunc. Amet, volutpat in felis at vitae vel.
    </p>

    <div class="filter-btns">
      <button class="btn pill active">Best Seller</button>
      <button class="btn pill">Featured</button>
      <button class="btn pill">Latest</button>
    </div>

    <div class="collection-grid">
      <article class="book-card">
        <img src="https://via.placeholder.com/250x350.png?text=Book+1" alt="Book cover 1" />
        <h3>Book Title One</h3>
      </article>
      <article class="book-card">
        <img src="https://via.placeholder.com/250x350.png?text=Book+2" alt="Book cover 2" />
        <h3>Book Title Two</h3>
      </article>
      <article class="book-card">
        <img src="https://via.placeholder.com/250x350.png?text=Book+3" alt="Book cover 3" />
        <h3>Book Title Three</h3>
      </article>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer>
    <div class="container footer-content">
      <p>&copy; 2025 BookWorld. All rights reserved.</p>
    </div>
  </footer>

  <script>
    const toggle = document.querySelector(".nav-toggle");
    const navLinks = document.querySelector(".nav-links");

    toggle.addEventListener("click", () => {
      navLinks.classList.toggle("show");
    });
  </script>
</body>
</html>
