Coffee.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Brewtopia Café | Coffee & More</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #faf7f0;
      color: #333;
    }
    header {
      background: linear-gradient(90deg, #5c2e91, #9b59b6);
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
      font-size: 2.5rem;
      letter-spacing: 1px;
    }
    header p {
      margin: 5px 0;
      font-size: 1.1rem;
    }
    nav {
      margin-top: 10px;
    }
    nav a {
      color: #ffe082;
      margin: 0 15px;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s;
    }
    nav a:hover {
      color: #fff;
    }
    .container {
      max-width: 1000px;
      margin: 20px auto;
      padding: 20px;
    }
    .hero {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      background: #ffe8d6;
      padding: 40px;
      border-radius: 12px;
      margin-bottom: 30px;
    }
    .hero-text {
      flex: 1;
      min-width: 250px;
    }
    .hero-text h2 {
      font-size: 2.2rem;
      color: #5c2e91;
      margin-bottom: 10px;
    }
    .hero-text p {
      font-size: 1.1rem;
    }
    .btn {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 20px;
      background: #5c2e91;
      color: #fff;
      text-decoration: none;
      border-radius: 8px;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #442165;
    }
    .hero img {
      max-width: 300px;
      border-radius: 12px;
    }
    .card {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      margin: 15px 0;
      box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    }
    .card h3 {
      margin-top: 0;
      color: #5c2e91;
    }
    footer {
      background: #5c2e91;
      color: #fff;
      text-align: center;
      padding: 15px;
      margin-top: 30px;
    }
    section { display: none; }
    section.active { display: block; }
    ul { padding-left: 20px; }
  </style>
</head>
<body>
  <header>
    <h1>Brewtopia Café</h1>
    <p>Where Every Sip Feels Like Home</p>
    <nav>
      <a href="#" onclick="showPage('home')">Home</a>
      <a href="#" onclick="showPage('menu')">Menu</a>
      <a href="#" onclick="showPage('facilities')">Facilities</a>
      <a href="#" onclick="showPage('contact')">Contact</a>
    </nav>
  </header>

  <div class="container">
    <!-- Home -->
    <section id="home" class="active">
      <div class="hero">
        <div class="hero-text">
          <h2>Discover Brewtopia</h2>
          <p>Not just coffee — a lifestyle. Freshly brewed coffee, gourmet dishes, and a cozy place to unwind.</p>
          <a href="#" onclick="showPage('menu')" class="btn">View Our Menu</a>
        </div>
        <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400" alt="Coffee cup">
      </div>
      <div class="card">
        <h3>✨ This Week's Highlights</h3>
        <ul>
          <li>🎶 Live Jazz Nights – Every Friday 7 PM</li>
          <li>☕ Free Cookie with Cappuccino – Wednesdays</li>
          <li>💳 20% Off on Your First Online Order</li>
        </ul>
      </div>
    </section>

    <!-- Menu -->
    <section id="menu">
      <h2>Our Menu</h2>
      <div class="card">
        <h3>☕ Coffee</h3>
        <ul>
          <li>Espresso — ₹120</li>
          <li>Cappuccino — ₹150</li>
          <li>Latte — ₹160</li>
          <li>Cold Brew — ₹180</li>
        </ul>
      </div>
      <div class="card">
        <h3>🍝 Italian Specials</h3>
        <ul>
          <li>Pasta Alfredo — ₹350</li>
          <li>Margherita Pizza — ₹400</li>
          <li>Risotto — ₹370</li>
        </ul>
      </div>
      <div class="card">
        <h3>🍰 Desserts</h3>
        <ul>
          <li>Tiramisu — ₹220</li>
          <li>Cheesecake — ₹250</li>
          <li>Chocolate Croissant — ₹180</li>
        </ul>
      </div>
    </section>

    <!-- Facilities -->
    <section id="facilities">
      <h2>Our Facilities</h2>
      <div class="card"><h3>📶 Free Wi-Fi</h3><p>Work or relax with high-speed internet.</p></div>
      <div class="card"><h3>🌿 Outdoor Seating</h3><p>Enjoy nature while sipping coffee.</p></div>
      <div class="card"><h3>🎵 Live Music</h3><p>Weekend jazz & acoustic sessions.</p></div>
      <div class="card"><h3>🐶 Pet Friendly</h3><p>Bring your pets along — they’re welcome here!</p></div>
    </section>

    <!-- Contact -->
    <section id="contact">
      <h2>Contact Us</h2>
      <div class="card"><h3>📍 Location</h3><p>789 Mocha Street, Coffee City</p></div>
      <div class="card"><h3>📞 Phone</h3><p>+91 98765 12345</p></div>
      <div class="card"><h3>📧 Email</h3><p>hello@brewtopia.com</p></div>
    </section>
  </div>

  <footer>
    <p>© 2025 Brewtopia Café | Crafted with Passion</p>
  </footer>

  <script>
    function showPage(pageId) {
      document.querySelectorAll('section').forEach(sec => sec.classList.remove('active'));
      document.getElementById(pageId).classList.add('active');
    }
  </script>
</body>
</html>