<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Birthday Cakes - Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const theme = "Birthday Cakes";
const page = "Homepage";
document.addEventListener('DOMContentLoaded', () => {
  document.title = `${theme} - ${page}`;
  document.getElementById('hero-heading').textContent = theme;
  document.getElementById('hero-subtitle').textContent = `${page} Page`;
  document.getElementById('theme-name').textContent = theme;
  document.getElementById('theme-footer').textContent = theme;
  document.querySelectorAll('[data-placeholder]').forEach((el, i) => {
    el.alt = `${theme} Cake ${i+1}`;
  });
});
</script>
<style>
:root{--pink:#f8b195;--pink-dark:#f67280;--purple:#c06c84;--purple-dark:#6c5b7b;--background:#fff;--font-size:1rem;--radius:.5rem;--spacing:1rem;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,sans-serif;font-size:var(--font-size);line-height:1.6;background:var(--background);color:#333;}
main{max-width:1200px;margin:auto;padding:var(--spacing);}
h1,h2,h3{margin-bottom:.5rem;}
.hero{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;height:60vh;background:linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);color:#fff;padding:var(--spacing);}
.hero-hero{position:absolute;inset:0;z-index:-1;opacity:.6;}
.hero h1{font-size:2.5rem;}
.hero p{font-size:1.25rem;}
section{padding:var(--spacing) 0;}
.grid{display:grid;gap:var(--spacing);grid-template-columns:1fr;}
@media(min-width:600px){.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 2px 5px rgba(0,0,0,.1);padding:var(--spacing);}
.card h3{color:var(--pink-dark);}
.gallery{display:grid;gap:var(--spacing);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.gallery img{width:100%;height:auto;border-radius:var(--radius);}
form{display:flex;flex-direction:column;gap:var(--spacing);}
label{font-weight:600;}
input,textarea{padding:.75rem;border:1px solid #ccc;border-radius:var(--radius);font-family:inherit;}
input:focus,textarea:focus{outline:none;border-color:var(--pink-dark);}
button{padding:.75rem 1.5rem;background:var(--pink-dark);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;}
button:hover{background:var(--purple-dark);}
footer{background:#f4f4f4;text-align:center;padding:var(--spacing);}
footer p{font-size:.875rem;}
</style>
</head>
<body>
<main>
<section class="hero">
<svg class="hero-hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#f8b195;stop-opacity:1"/><stop offset="100%" style="stop-color:#c06c84;stop-opacity:1"/></linearGradient></defs><rect width="800" height="600" fill="url(#grad)"/></svg>
<h1 id="hero-heading"></h1>
<p id="hero-subtitle"></p>
</section>
<section id="intro" class="content">
<h2>Welcome to <span id="theme-name"></span></h2>
<p>Celebrate your special moments with our delightful birthday cakes. From classic chocolate to modern flambé, discover the perfect cake for every occasion.</p>
</section>
<section id="highlights" class="grid">
<div class="card"><h3 class="card-title">Classic Chocolate</h3><p>Rich, moist, and timeless.</p></div>
<div class="card"><h3 class="card-title">Vanilla Dream</h3><p>Light, airy, and fragrant.</p></div>
<div class="card"><h3 class="card-title">Red Velvet</h3><p>Smooth, elegant, and bold.</p></div>
<div class="card"><h3 class="card-title">Lemon Surprise</h3><p>Fresh, zesty, and bright.</p></div>
</section>
<section id="gallery" class="gallery">
<svg class="svg-placeholder" data-placeholder alt="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#f67280;stop-opacity:1"/><stop offset="100%" style="stop-color:#c06c84;stop-opacity:1"/></linearGradient></defs><rect width="400" height="300" fill="url(#grad1)"/></svg>
<svg class="svg-placeholder" data-placeholder alt="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#f8b195;stop-opacity:1"/><stop offset="100%" style="stop-color:#f67280;stop-opacity:1"/></linearGradient></defs><rect width="400" height="300" fill="url(#grad2)"/></svg>
<svg class="svg-placeholder" data-placeholder alt="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#c06c84;stop-opacity:1"/><stop offset="100%" style="stop-color:#6c5b7b;stop-opacity:1"/></linearGradient></defs><rect width="400" height="300" fill="url(#grad3)"/></svg>
<svg class="svg-placeholder" data-placeholder alt="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#6c5b7b;stop-opacity:1"/><stop offset="100%" style="stop-color:#355c7d;stop-opacity:1"/></linearGradient></defs><rect width="400" height="300" fill="url(#grad4)"/></svg>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form id="contact-form" novalidate>
<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>
</main>
<footer>
<p>&copy; 2025 <span id="theme-footer"></span> Cakes. All rights reserved.</p>
</footer>
</body>
</html>