forbidals

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SweetCrust Bakery</title>
  <style>
    /* GLOBAL RESET */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

body {
      background: linear-gradient(135deg, #f9f3ee 0%, #e8d9c9 100%);
      color: #5a4a42;
      overflow-x: hidden;
    }

/* ANIMATION KEYFRAMES */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }

@keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

@keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

/* HEADER / HERO */
    header {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 20px;
      position: relative;
    }

h1 {
      font-size: 4.5rem;
      font-weight: 800;
      background: linear-gradient(to right, #d4a574, #b86f4d);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 20px;
      animation: fadeInUp 1.2s ease-out;
    }

.subtitle {
      font-size: 1.4rem;
      margin-bottom: 40px;
      max-width: 700px;
      line-height: 1.6;
      opacity: 0;
      animation: fadeInUp 1s ease 0.4s forwards;
    }

.cta-button {
      padding: 14px 36px;
      font-size: 1.2rem;
      background: #b86f4d;
      color: #fff;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeInUp 1s ease 0.8s forwards;
    }

.cta-button:hover {
      background: #d4a574;
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(184, 111, 77, 0.4);
    }

/* SECTIONS */
    section {
      padding: 100px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

.section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 60px;
      color: #b86f4d;
      position: relative;
    }

.section-title::after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      background: #d4a574;
      margin: 12px auto;
      border-radius: 2px;
    }

.menu-items {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
    }

.menu-item {
      background: white;
      padding: 25px;
      width: 250px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      text-align: center;
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(20px);
    }

.menu-item.animate {
      opacity: 1;
      transform: translateY(0);
    }

.menu-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    }

.menu-item h3 {
      font-size: 1.4rem;
      margin: 15px 0 10px;
      color: #b86f4d;
    }

.menu-item p {
      font-size: 1rem;
      color: #7a685f;
    }

/* ANIMATED BAKERY ICONS (TEXT-BASED) */
    .icon {
      font-size: 2.5rem;
      margin-bottom: 15px;
      display: block;
      animation: float 4s ease-in-out infinite;
    }

/* ABOUT */
    #about {
      background: #fff8f3;
    }

.about-content {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      line-height: 1.8;
      font-size: 1.1rem;
    }

/* CONTACT CTA */
    #contact {
      text-align: center;
      background: linear-gradient(135deg, #b86f4d 0%, #d4a574 100%);
      color: white;
    }

#contact .section-title {
      color: white;
    }

#contact .section-title::after {
      background: white;
    }

#contact .cta-button {
      background: white;
      color: #b86f4d;
      margin-top: 20px;
    }

#contact .cta-button:hover {
      background: #f9f3ee;
    }

/* FOOTER */
    footer {
      text-align: center;
      padding: 30px;
      background: #5a4a42;
      color: #e8d9c9;
      font-size: 0.9rem;
    }

/* RESPONSIVE */
    @media (max-width: 768px) {
      h1 { font-size: 3rem; }
      .subtitle { font-size: 1.1rem; }
      .menu-item { width: 100%; max-width: 300px; }
    }
  </style>
</head>
<body>

<header>
    <h1>SweetCrust Bakery</h1>
    <p class="subtitle">Artisanal pastries, handcrafted breads, and cozy vibes — baked with love every single day.</p>
    <button class="cta-button">Explore Our Menu</button>
  </header>

<section id="menu">
    <h2 class="section-title">Our Delights</h2>
    <div class="menu-items">
      <div class="menu-item">
        <span class="icon">🥐</span>
        <h3>Butter Croissants</h3>
        <p>Flaky, golden, and baked fresh daily.</p>
      </div>
      <div class="menu-item">
        <span class="icon">🍞</span>
        <h3>Sourdough Loaf</h3>
        <p>Slow-fermented with organic grains.</p>
      </div>
      <div class="menu-item">
        <span class="icon">🍰</span>
        <h3>Layered Cakes</h3>
        <p>Custom flavors for every celebration.</p>
      </div>
      <div class="menu-item">
        <span class="icon">☕</span>
        <h3>Premium Coffee</h3>
        <p>Single-origin, ethically sourced.</p>
      </div>
    </div>
  </section>

<section id="about">
    <h2 class="section-title">Our Story</h2>
    <div class="about-content">
      <p>
        SweetCrust began as a tiny kitchen experiment between friends who shared a passion for real ingredients and timeless baking traditions. 
        Today, we still knead every dough by hand and never cut corners — because good food shouldn’t be rushed.
      </p>
    </div>
  </section>

<section id="contact">
    <h2 class="section-title">Ready to Taste?</h2>
    <p>Visit us in person or order online — your perfect pastry awaits.</p>
    <button class="cta-button">Order Now</button>
  </section>

menuItems.forEach(item => observer.observe(item));

// Smooth scroll for CTA buttons
      document.querySelectorAll('.cta-button').forEach(btn => {
        btn.addEventListener('click', () => {
          document.getElementById('menu').scrollIntoView({ behavior: 'smooth' });
        });
      });
    });
  </script>
</body>
</html>