<style> :root{ color-scheme: light dark; --bg: #f7f7f7; --fg: #1a1a1a; --muted: #6b6b6b; --card: #ffffff; --accent: #2a2a2a; --shadow: rgba(0,0,0,.08); --line: rgba(0,0,0,.08); } html, body { height: 100%; margin: 0; font-family: "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--fg); background: radial-gradient(circle at 20% -10%, rgba(0,0,0,.04), transparent 40%), radial-gradient(circle at 100% 0%, rgba(0,0,0,.04), transparent 40%), #fdfdfd; } /* Overall layout */ .site { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100vh; } header.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2) blur(2px); } .container { width: min(1100px, 92%); margin: 0 auto; } .brandbar { display::flex; align-items:center; justify-content: space-between; padding: 14px 0; } .brand { display:flex; align-items:center; gap:12px; } .logo { width:44px; height:44px; border-radius:9px; background: #111; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; box-shadow: inset 0 0 0 2px #fff; } .brand h1 { font-size: 1.2rem; margin:0; letter-spacing:.5px; } nav.primary { display:flex; gap:14px; align-items:center; } nav a { text-decoration:none; color:var(--fg); padding:8px 12px; border-radius:999px; transition: all .2s ease; font-weight:600; font-size: .95rem; } nav a:hover { background:#e9e9e9; } /* Magazine grid hero */ .hero { display:grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: stretch; padding: 28px 0; } .hero-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: 0 6px 18px var(--shadow); display:flex; flex-direction:column; gap:14px; } .hero-card h2 { font-size: 1.75rem; margin:0; } .hero-visual { height: 100%; min-height: 180px; border-radius: 12px; background: url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; border: 1px solid var(--line); } .hero-cta { display:flex; flex-wrap: wrap; gap: 12px; align-items:center; } .btn { background: #111; color:#fff; border:0; padding:12px 16px; border-radius: 999px; font-weight:700; cursor:pointer; text-decoration:none; } .btn.secondary { background: #fff; color:#111; border:1px solid var(--line); } /* Magazine feature strip */ .strip { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 0 4px; } .strip-item { background: #fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; } .strip-thumb { height:120px; background:#ddd center/cover no-repeat; } .strip-content { padding:12px; font-size:.95rem; } /* Section: Community Focus */ .section { padding: 40px 0; } .section-title { font-size: 1.6rem; margin:0 0 14px; } .member-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; } .card { background: #fff; border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; } .avatar { width:44px; height:44px; border-radius:50%; background:#ddd; } .card h3 { margin:0; font-size:1rem; } .card p { margin:0; color:var(--muted); font-size:.9rem; } /* Footer blocks */ .footer { padding: 26px 0; color:#555; font-size:.9rem; text-align:center; border-top:1px solid var(--line); background:#fafafa; } /* Responsiveness */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } } </style> </head> <body> <div class="site"> <header class="site-header" aria-label="Site header"> <div class="container brandbar"> <div class="brand"> <div class="logo" aria-label="Bleu Leaf Logo">BL</div> <div> <h1>Bleu Leaf</h1> <span style="font-size:.9rem; color:var(--muted);">Zen garden herbs for a connected community</span> </div> </div> <nav class="primary" aria-label="Main navigation"> <a href="#home" aria-label="Home">Home</a> <a href="#herbs" aria-label="Herb gardens">Herbs</a> <a href="#community" aria-label="Community">Community</a> <a href="#contact" aria-label="Contact">Contact</a> </nav> </div> </header> <main id="home" class="container" style="padding:0 0 8px;"> <section class="hero" aria-label="Hero section"> <div class="hero-card" style="min-height:240px;"> <h2>Welcome to Bleu Leaf — a serene space for herb lovers and seniors</h2> <p style="color:var(--muted); line-height:1.6;"> Our magazine-style hub celebrates simple, mindful gardening. Explore easy herb beds, seasonal tips, and a welcoming community that shares wisdom, recipes, and gentle garden ideas. </p> <div class="hero-cta" aria-label="Hero call to action"> <a href="#herbs" class="btn" role="button">Explore Herbs</a> <a href="#community" class="btn secondary" role="button">Meet Our Members</a> </div> </div> <div class="hero-card" style="justify-content: center;"> <div class="hero-visual" aria-label="Zen herb garden image"></div> <div style="font-size:.95rem; color:var(--muted); line-height:1.6;"> Calm, monochrome tones help focus on texture, scent, and balance. We tailor guidance for seniors to enjoy sustainable herb gardens with low maintenance. </div> </div> </section> <section class="strip" aria-label="Feature strip"> <article class="strip-item" aria-label="Feature 1"> <div class="strip-thumb" style="background-image:url('https://images.unsplash.com/photo-1469474968042-aad6c1a5b8d0?q=80&w=600&auto=format&fit=crop');"></div> <div class="strip-content"> <strong>Clipped Edges, Quiet Lines</strong> <p>Monochrome palettes reduce visual clutter, highlighting texture in leaves and soil.</p> </div> </article> <article class="strip-item" aria-label="Feature 2"> <div class="strip-thumb" style="background-image:url('https://images.unsplash.com/photo-1523419409545-2b3a2cdd0f14?q=80&w=600&auto=format&fit=crop');"></div> <div class="strip-content"> <strong>Herb Basics for Seniors</strong> <p>Mint, sage, thyme, and basil with simple, raised planters and clear labeling.</p> </div> </article> <article class="strip-item" aria-label="Feature 3"> <div class="strip-thumb" style="background-image:url('https://images.unsplash.com/photo-15234105-0b9a2f9f4f2a?q=80&w=600&auto=format&fit=crop');"></div> <div class="strip-content"> <strong>Community Corners</strong> <p>Shared plots, seed swaps, and easy-to-read guides for all ages.</p> </div> </article> </section> <section id="community" class="section" aria-labelledby="community-title"> <h2 id="community-title" class="section-title">A Community of Calm Green Minds</h2> <p style="color:var(--muted); margin-top:0 0 12px;"> Bleu Leaf brings neighbors together through garden projects, listening circles, and cooperative spaces dedicated to herb cultivation. </p> <div class="member-grid" aria-label="Community members"> <article class="card" aria-label="Member card"> <div style="display:flex; align-items:center; gap:10px;"> <div class="avatar" aria-label="Member avatar"></div> <div> <h3 style="margin:0;">Grace M.</h3> <span style="font-size:.85rem; color:var(--muted);">Herb steward • Garden mentor</span> </div> </div> <p style="margin:0;"> Grace shares simple herb bed layouts and seasonal maintenance routines that are easy on joints. </p> </article> <article class="card" aria-label="Member card"> <div style="display:flex; align-items:center; gap:10px;"> <div class="avatar" aria-label="Member avatar"></div> <div> <h3 style="margin:0;">Elliot R.</h3> <span style="font-size:.85rem; color:var(--muted);">Community coordinator</span> </div> </div> <p style="margin:0;"> Leads seed swaps and weekly herb chats, focusing on accessibility and friendly language. </p> </article> <article class="card" aria-label="Member card"> <div style="display:flex; align-items:center; gap:10px;"> <div class="avatar" aria-label="Member avatar"></div> <div> <h3 style="margin:0;">Marin K.</h3> <span style="font-size:.85rem; color:var(--muted);">Volunteer gardener</span> </div> </div> <p style="margin:0;"> Shares tips for compact herb pots and raised beds that minimize bending and reaching. </p> </article> <article class="card" aria-label="Member card"> <div style="display:flex; align-items:center; gap:10px;"> <div class="avatar" aria-label="Member avatar"></div> <div> <h3 style="margin:0;">Jonas P.</h3> <span style="font-size:.85rem; color:var(--muted);">Chef & educator</span> </div> </div> <p style="margin:0;"> Demonstrates fresh herb recipes and safe kitchen techniques for senior cooks. </p> </article> </div> </section> </main> <section id="herbs" class="section" aria-labelledby="herbs-title"> <div class="container" style="display:flex; align-items:stretch; gap:14px; flex-wrap:wrap;"> <div class="hero-card" style="flex:1 1 60%; min-width:260px;"> <h2 id="herbs-title" style="font-size:1.6rem; margin:0 0 8px;">Herb Library</h2> <p style="color:var(--muted); line-height:1.6;"> A calm, practical reference of easy-care herbs suitable for raised beds and containers. Each section includes concise care notes, scents, and simple companion plant ideas. </p> <ul style="margin:0; padding-left:20px; color:var(--fg); line-height:1.8;"> <li>Sage: drought-tolerant, soft texture, great for seasoning.</li> <li>Basil: warm sun lovers, compact varieties available.</li> <li>Thyme: low growing, fragrant ground cover.</li> <li>Mediterranean mint: upright, easy clipping, pleasant aroma.</li> </ul> </div> <div class="hero-card" style="flex:1 1 35%; min-width:260px; align-self:stretch;"> <div class="hero-visual" aria-label="Herb bed image" style="min-height:180px; background-image:url('https://images.unsplash.com/photo-1616533527246-4cbbf3f7a75a?q=80&w=600&auto=format&fit=crop');"></div> <div style="font-size:.95rem; color:var(--muted); margin-top:8px;"> Accessible design tips include labeled planters at comfortable heights and clear, large-print care notes for aging eyes. </div> </div> </div> </section> <footer class="footer" id="contact" aria-label="Footer"> © Bleu Leaf. All rights reserved. Designed for a mindful, community-focused herb garden experience. </footer> </div> </body> </html>