<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Birthday Cakes - About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,sans-serif;line-height:1.5;color:#333;}
h1,h2{margin-bottom:.5rem;}
section{padding:2rem 1rem;}
#hero{background:linear-gradient(135deg,#FF6B6B,#FFD93D);color:#fff;text-align:center;padding:3rem 1rem;}
#hero h1{font-size:2.5rem;}
#hero p{font-size:1.25rem;}
#intro{background:#fafafa;}
#highlights{background:#f0f0f0;}
.card{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);padding:1rem;margin-bottom:1rem;text-align:center;}
.grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:600px){.grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr 1fr;}}
#gallery .grid{grid-template-columns:1fr;}
@media(min-width:600px){#gallery .grid{grid-template-columns:repeat(3,1fr);}}
#gallery figure{margin:0;}
#gallery img{width:100%;height:auto;border-radius:8px;}
#contact{background:#fafafa;}
#contact form{max-width:600px;margin:auto;}
#contact label{display:block;margin-bottom:.3rem;}
#contact input,#contact textarea{width:100%;padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:4px;}
#contact button{background:#FF6B6B;color:#fff;padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;}
#contact button:hover{background:#FF5A50;}
footer{background:#222;color:#fff;text-align:center;padding:1rem;font-size:.875rem;}
</style>
<script>
const theme = "Birthday Cakes";
const page = "About Us";
document.addEventListener("DOMContentLoaded", function(){
  document.title = `${theme} - ${page}`;
  document.getElementById("hero-title").textContent = theme;
  document.getElementById("hero-subtitle").textContent = page;
  const placeholder = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="#ccc"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20" fill="#777">Image</text></svg>';
  document.querySelectorAll("img[data-placeholder]").forEach(function(img){
    img.src = placeholder;
    img.alt = `${theme} placeholder`;
  });
});
</script>
</head>
<body>
<section id="hero">
<h1 id="hero-title"></h1>
<p id="hero-subtitle"></p>
</section>
<section id="intro">
<h2>Welcome to Our Cake Shop</h2>
<p>We specialize in handcrafted birthday cakes that bring joy to every celebration.</p>
</section>
<section id="highlights">
<h2>Highlights</h2>
<div class="grid">
<div class="card">
<h3>Custom Designs</h3>
<p>Personalized flavors and decorations.</p>
</div>
<div class="card">
<h3>Premium Ingredients</h3>
<p>Fresh, high-quality components only.</p>
</div>
<div class="card">
<h3>Fast Delivery</h3>
<p>On-time service for special occasions.</p>
</div>
</div>
</section>
<section id="gallery">
<h2>Gallery</h2>
<div class="grid">
<figure><img data-placeholder><figcaption>Delicious Cake 1</figcaption></figure>
<figure><img data-placeholder><figcaption>Delicious Cake 2</figcaption></figure>
<figure><img data-placeholder><figcaption>Delicious Cake 3</figcaption></figure>
<figure><img data-placeholder><figcaption>Delicious Cake 4</figcaption></figure>
<figure><img data-placeholder><figcaption>Delicious Cake 5</figcaption></figure>
<figure><img data-placeholder><figcaption>Delicious Cake 6</figcaption></figure>
</div>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form action="#" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
© 2025 Birthday Cakes. All rights reserved.
</footer>
</body>
</html>