
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sweet Delights Bakery</title>
  <style>
    /* Reset & Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #fff;
    }

    /* Typography */
    h1, h2, h3, h4 {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
    }

    /* Container */
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    /* Header */
    header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      background-color: transparent;
      padding: 20px 0;
      transition: background-color 0.3s ease;
      z-index: 1000;
    }

    .container .nav-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 32px;
      font-weight: 700;
      color: #FF6B6B;
      text-decoration: none;
    }

    nav ul {
      display: flex;
      list-style: none;
    }

    nav ul li {
      margin-left: 30px;
    }

    nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    nav ul li a:hover {
      color: #FF6B6B;
    }

    /* Mobile menu button */
    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .menu-toggle span {
      width: 30px;
      height: 3px;
      background-color: #333;
      margin: 4px 0;
      transition: all 0.3s ease;
    }

    /* Hero Section */
    .hero {
      padding-top: 120px;
      padding-bottom: 80px;
      background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('img/hero-bakery-studio.png') center/cover;
      text-align: center;
    }

    .hero h1 {
      font-size: 48px;
      margin-bottom: 20px;
      color: #333;
    }

    .hero p {
      font-size: 18px;
      max-width: 700px;
      margin: 0 auto 30px;
      color: #666;
    }

    .hero-btn {
      display: inline-block;
      background: #FF6B6B;
      color: white;
      padding: 12px 30px;
      text-decoration: none;
      border-radius: 30px;
      font-weight: 500;
      transition: background 0.3s ease;
    }

    .hero-btn:hover {
      background: #FF5252;
    }

    /* Sections Common Styling */
    section {
      padding: 80px 0;
    }

    .section-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-header h2 {
      font-size: 36px;
      margin-bottom: 15px;
      position: relative;
    }

    .section-header h2::after {
      content: '';
      display: block;
      width: 80px;
      height: 3px;
      background: #FF6B6B;
      margin: 15px auto 0;
    }

    .section-header p {
      color: #666;
      max-width: 600px;
      margin: 0 auto;
    }

    /* About Section */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }

    .about-content h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    .about-content p {
      margin-bottom: 20px;
      color: #666;
    }

    .about-image {
      overflow: hidden;
      border-radius: 10px;
    }

    .about-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Signature Creations */
    .signature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 30px;
    }

    .signature-card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
    }

    .signature-card:hover {
      transform: translateY(-10px);
    }

    .signature-image {
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .signature-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .signature-card:hover .signature-image img {
      transform: scale(1.1);
    }

    .signature-content {
      padding: 20px;
    }

    .signature-content h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .signature-content p {
      color: #666;
      font-size: 14px;
    }

    /* Custom Cakes */
    .custom-cakes {
      background: #fff9f9;
      text-align: center;
    }

    .custom-steps {
      max-width: 800px;
      margin: 0 auto;
    }

    .step {
      text-align: left;
      margin-bottom: 40px;
    }

    .step-icon {
      font-size: 40px;
      color: #FF6B6B;
      margin-bottom: 15px;
      display: inline-block;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
    }

    .step h3 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .step p {
      color: #666;
    }

    /* Testimonials */
    .testimonials {
      background: linear-gradient(rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.1));
      text-align: center;
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }

    .testimonial-card {
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .testimonial-content {
      font-style: italic;
      color: #666;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .testimonial-author {
      font-weight: 700;
      color: #333;
    }

    /* Call to Action */
    .cta {
      background: linear-gradient(rgba(255, 107, 107, 0.9), rgba(255, 107, 107, 0.8)), url('img/dessert-dark.png') center/cover;
      color: white;
      text-align: center;
      padding: 80px 0;
    }

    .cta h2 {
      font-size: 36px;
      margin-bottom: 20px;
    }

    .cta p {
      max-width: 600px;
      margin: 0 auto 30px;
      font-size: 18px;
    }

    .cta .btn {
      display: inline-block;
      background: white;
      color: #FF6B6B;
      padding: 15px 40px;
      text-decoration: none;
      border-radius: 30px;
      font-weight: 500;
      font-size: 18px;
      transition: all 0.3s ease;
    }

    .cta .btn:hover {
      background: rgba(255, 255, 255, 0.9);
    }

    /* Footer */
    footer {
      background: #f5f5f5;
      padding-top: 50px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 30px;
      margin-bottom: 30px;
    }

    .footer-col h4 {
      font-size: 18px;
      margin-bottom: 20px;
      color: #FF6B6B;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 10px;
    }

    .footer-col ul li a {
      text-decoration: none;
      color: #666;
      transition: color 0.3s ease;
    }

    .footer-col ul li a:hover {
      color: #FF6B6B;
    }

    .footer-bottom {
      text-align: center;
      padding: 20px 0;
      border-top: 1px solid #ddd;
      color: #666;
    }

    /* Responsive Styles */
    @media (max-width: 991px) {
      .about-grid {
        grid-template-columns: 1fr;
      }

      .signature-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .menu-toggle {
        display: flex;
      }

      nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 30px 0;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
      }

      nav ul.active {
        display: flex;
      }

      nav ul li {
        margin: 0;
      }

      nav ul li a {
        display: block;
        padding: 15px 30px;
      }

      .hero h1 {
        font-size: 36px;
      }

      section {
        padding: 60px 0;
      }

      .herro {
        padding-top: 100px;
        padding-bottom: 60px;
      }

      .signature-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 576px) {
      .hero h1 {
        font-size: 28px;
      }

      .section-header h2 {
        font-size: 28px;
      }

      .testimonial-grid {
        grid-template-columns: 1fr;
      }

      .signature-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <!-- Header -->
  <header>
    <div class="container">
      <div class="nav-header">
        <a href="#" class="logo">Sweet Delights</a>
        <div class="menu-toggle">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <h1>Welcome to Sweet Delights Bakery</h1>
      <p>Where every slice tells a story of passion and perfection. Indulge in our exquisite collection of handcrafted cakes, baked fresh daily with the finest ingredients and a sprinkle of love.</p>
      <a href="#" class="hero-btn">Explore Our Bakery</a>
    </div>
  </section>

  <!-- About Section -->
  <section class="about">
    <div class="container">
      <div class="section-header">
        <h2>Our Story</h2>
        <p>At Sweet Delights, baking is an art and a tradition. For over a decade, we've poured our hearts into creating unforgettable moments, one delectable cake at a time.</p>
      </div>
      <div class="about-grid">
        <div class="about-content">
          <h3>Our Passion for Perfection</h3>
          <p>Our commitment to quality, creativity, and customer happiness is at the core of everything we do. Each cake isn't just baked—it's crafted with intention and care.</p>
          <p>From classic comforts to bespoke creations for your most cherished celebrations, we bring your sweet dreams to life.</p>
        </div>
        <div class="about-image">
          <img src="img/about-banner.jpg" alt="Bakery interior with delightful cakes">
        </div>
      </div>
    </div>
  </section>

  <!-- Signature Creations -->
  <section class="signature-creations">
    <div class="container">
      <div class="section-header">
        <h2>Our Signature Creations</h2>
        <p>Discover our most loved cakes, each a masterpiece designed to tantalize your taste buds and leave you craving more.</p>
      </div>
      <div class="signature-grid">
        <div class="signature-card">
          <div class="signature-image">
            <img src="img/red-velvet-cake.jpg" alt="Red Velvet Cake">
          </div>
          <div class="signature-content">
            <h3>Red Velvet</h3>
            <p>Velvety texture with a rich cocoa flavor, layered with cream cheese frosting that balances the sweetness.</p>
          </div>
        </div>
        <div class="signature-card">
          <div class="signature-image">
            <img src="img/chocolate-fudge.jpg" alt="Chocolate Fudge Cake">
          </div>
          <div class="signature-content">
            <h3>Chocolate Fudge</h3>
            <p>A dense, moist cake with intense chocolate flavor. Our signature creation that satisfies all chocolate cravings.</p>
          </div>
        </div>
        <div class="signature-card">
          <div class="signature-image">
            <img src="img/lemon-berry.jpg" alt="Lemon Berry Dream Cake">
          </div>
          <div class="signature-content">
            <h3>Lemon Berry Dream</h3>
            <p>Zesty lemon curd layered with fresh berries and a light, delicate sponge cake that sings of summer.</p>
          </div>
        </div>
        <div class="signature-card">
          <div class="signature-image">
            <img src="img/vanilla-bean.jpg" alt="Vanilla Bean Classic Cake">
          </div>
          <div class="signature-content">
            <h3>Vanilla Bean Classic</h3>
            <p>The epitome of elegance: pure vanilla extract intertwined with buttery layers for a timeless treat.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Custom Cakes -->
  <section class="custom-cakes">
    <div class="container">
      <div class="section-header">
        <h2>Custom Cakes For Every Occasion</h2>
        <p>Planning your special day and need a custom cake? Our expert decorators work with you to design a showstopper that tastes as incredible as it looks.</p>
      </div>
      <div class="custom-steps">
        <div class="step">
          <div class="step-icon">1</div>
          <h3>Consultation</h3>
          <p>We'll discuss your vision, theme, and any dietary preferences to understand your needs.</p>
        </div>
        <div class="step">
          <div class="step-icon">2</div>
          <h3>Design & Baking</h3>
          <p>Our master bakers create the perfect flavor profile while our decorators bring your vision to life.</p>
        </div>
        <div class="step">
          <div class="step-icon">3</div>
          <h3>Collection</h3>
          <p>Your custom cake will be carefully preserved until your special day arrives.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="testimonials">
    <div class="container">
      <div class="section-header">
        <h2>What Our Customers Say</h2>
        <p>We're incredibly proud of the relationships we've built with our customers and the feedback they give us.</p>
      </div>
      <div class="testimonial-grid">
        <div class="testimonial-card">
          <p class="testimonial-content">"Sweet Delights made the most beautiful and delicious wedding cake for us – it was truly perfect!"</p>
          <p class="testimonial-author">— Sarah J.</p>
        </div>
        <div class="testimonial-card">
          <p class="testimonial-content">"Their chocolate fudge cake is simply heavenly, the best I've ever tasted."</p>
          <p class="testimonial-author">— Mark T.</p>
        </div>
        <div class="testimonial-card">
          <p class="testimonial-content">"The cakes were absolutely divine! Every bite was better than the last. Great service too!"</p>
          <p class="testimonial-author">— Lisa M.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="cta">
    <div class="container">
      <h2>Order Your Slice of Happiness Today</h2>
      <p>Explore our full menu online or visit us in-store to experience the magic of Sweet Delights Bakery.</p>
      <a href="#" class="btn">Plan Your Order</a>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h4>About Sweet Delights</h4>
          <p>Creating exceptional cakes with passion and care for over a decade.</p>
        </div>
        <div class="footer-col">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Menu</a></li>
            <li><a href="#">Custom Orders</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Contact</h4>
          <ul>
            <li>123 Sugar Lane, Dessert City</li>
            <li>(555) 123-4567</li>
            <li>info@sweetdelightsbakery.com</li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Connect With Us</h4>
          <!-- Social media icons would go here -->
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 Sweet Delights Bakery. All Rights Reserved.</p>
      </div>
    </div>
  </footer>

  <script>
    // Mobile Menu Toggle
    document.querySelector('.menu-toggle').addEventListener('click', function() {
      document.querySelector('nav ul').classList.toggle('active');
    });

    // Header background change on scroll
    window.addEventListener('scroll', function() {
      const header = document.querySelector('header');
      if (window.scrollY > 50) {
        header.style.backgroundColor = 'white';
        header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
      } else {
        header.style.backgroundColor = 'transparent';
        header.style.boxShadow = 'none';
      }
    });
  </script>
</body>
</html>


Note: The HTML code includes some JavaScript for the mobile menu toggle and header background change. The images are using placeholder paths (img/about-banner.jpg), so you'll need to replace these with actual image paths when implementing.