カフェのホームページ

atomic.studio/s/3210

📄 index.html コードを直接編集して「適用」でプレビューに反映

<div class="min-h-screen bg-zinc-950 text-white"><section class="relative flex min-h-[70vh] items-center justify-center overflow-hidden bg-[#faf6f0] px-4 py-20 md:min-h-[80vh] md:px-8 lg:px-16"><div class="pointer-events-none absolute -left-20 -top-20 h-72 w-72 rounded-full bg-[#e8d5c4] opacity-30 blur-3xl md:h-96 md:w-96 lg:h-[500px] lg:w-[500px]"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-56 w-56 rounded-full bg-[#d9c2a7] opacity-20 blur-3xl md:h-80 md:w-80"></div><div class="relative z-10 mx-auto max-w-4xl text-center"><div class="mx-auto mb-6 h-0.5 w-16 bg-[#b8a08e] md:mb-8 md:w-20"></div><h2 class="font-serif text-4xl font-light tracking-widest text-[#3e2c1b] md:text-5xl lg:text-6xl">珈琲と、静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#5c4a38] md:mt-8 md:text-lg">焙煎したての香り、手仕事のスイーツ。<br class="hidden sm:inline"/>日常を少しだけ豊かにする、大人の隠れ家。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center sm:gap-6 md:mt-12"><a href="#menu" class="inline-block w-48 border border-[#3e2c1b] bg-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#faf6f0] transition duration-300 hover:bg-[#5c4a38] hover:border-[#5c4a38] md:w-52 md:py-3.5 md:text-base">メニューを見る</a><a href="#access" class="inline-block w-48 border border-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#3e2c1b] transition duration-300 hover:bg-[#3e2c1b] hover:text-[#faf6f0] md:w-52 md:py-3.5 md:text-base">アクセス</a></div><div class="mx-auto mt-12 flex items-center justify-center gap-3 md:mt-16"><span class="block h-px w-8 bg-[#b8a08e]"></span><span class="font-serif text-xs tracking-[0.3em] text-[#8a7a6a]">SINCE 2024</span><span class="block h-px w-8 bg-[#b8a08e]"></span></div></div></section><div class="w-full max-w-2xl mx-auto px-4 py-8 md:py-12"><div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-amber-200/60 p-6 md:p-8"><h2 class="text-2xl md:text-3xl font-bold text-amber-900 tracking-wide mb-6 text-center">木漏れ日カフェ</h2><div class="space-y-4"><div class="flex items-start gap-3"><span class="text-amber-700 text-lg mt-0.5 shrink-0">📍</span><div><p class="text-sm text-amber-600 font-medium">住所</p><p class="text-gray-800 text-base md:text-lg leading-relaxed">〒150-0001 東京都渋谷区神宮前4-12-8</p></div></div><div class="flex items-start gap-3"><span class="text-amber-700 text-lg mt-0.5 shrink-0">📞</span><div><p class="text-sm text-amber-600 font-medium">電話番号</p><a href="tel:0312345678" class="text-gray-800 text-base md:text-lg hover:text-amber-700 transition-colors">03-1234-5678</a></div></div><div class="flex items-start gap-3"><span class="text-amber-700 text-lg mt-0.5 shrink-0">🕐</span><div><p class="text-sm text-amber-600 font-medium">営業時間</p><p class="text-gray-800 text-base md:text-lg whitespace-pre-line">平日 8:00-18:00 / 土日祝 9:00-19:00</p></div></div><div class="flex items-start gap-3"><span class="text-amber-700 text-lg mt-0.5 shrink-0">📅</span><div><p class="text-sm text-amber-600 font-medium">定休日</p><p class="text-gray-800 text-base md:text-lg">不定休 (Instagramで告知)</p></div></div><div class="flex items-start gap-3"><span class="text-amber-700 text-lg mt-0.5 shrink-0">📷</span><div><p class="text-sm text-amber-600 font-medium">Instagram</p><p class="text-gray-800 text-base md:text-lg">@komorebi_cafe</p></div></div></div><div class="mt-6 pt-5 border-t border-amber-200/50 text-center"><a href="https://maps.google.com/?q=渋谷区神宮前4-12-8" target="_blank" rel="noopener noreferrer" class="inline-block bg-amber-700 hover:bg-amber-800 text-white font-medium px-6 py-3 rounded-full transition-colors shadow-md hover:shadow-lg">Google Maps で見る</a></div><p class="mt-5 text-center text-xs text-amber-400/70">木のぬくもりを感じる、ゆったりとした時間</p></div></div><div class="w-full max-w-6xl mx-auto px-4 py-8 md:py-12"><div class="text-center mb-8 md:mb-12"><h2 class="text-3xl md:text-4xl font-serif text-[#4a2c1a] tracking-wide mb-2">カフェのホームページ</h2><p class="text-[#7a5a3a] text-sm md:text-base">お気に入りの一杯を、地図で探す</p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"><div class="bg-[#f5efe8] rounded-2xl shadow-lg overflow-hidden border border-[#dcc9b5]"><div class="relative w-full" style="padding-bottom:75%"><div class="absolute inset-0 p-4"><div class="w-full h-full rounded-xl bg-[#e8dccc] relative overflow-hidden"><svg viewBox="0 0 400 300" class="w-full h-full" preserveAspectRatio="xMidYMid meet"><rect width="400" height="300" fill="#e8dccc"></rect><line x1="0" y1="150" x2="400" y2="150" stroke="#c4b49c" stroke-width="3"></line><line x1="200" y1="0" x2="200" y2="300" stroke="#c4b49c" stroke-width="3"></line><line x1="100" y1="0" x2="100" y2="300" stroke="#c4b49c" stroke-width="2"></line><line x1="300" y1="0" x2="300" y2="300" stroke="#c4b49c" stroke-width="2"></line><g><circle cx="60" cy="80" r="10" fill="#8b5e3c" stroke="#f5efe8" stroke-width="2"></circle><text x="60" y="84" text-anchor="middle" fill="#f5efe8" font-size="10" font-weight="bold">☕</text><text x="60" y="104" text-anchor="middle" fill="#4a2c1a" font-size="8" font-weight="500">森の珈琲店</text></g><g><circle cx="150" cy="180" r="10" fill="#8b5e3c" stroke="#f5efe8" stroke-width="2"></circle><text x="150" y="184" text-anchor="middle" fill="#f5efe8" font-size="10" font-weight="bold">☕</text><text x="150" y="204" text-anchor="middle" fill="#4a2c1a" font-size="8" font-weight="500">陽だまりカフ…</text></g><g><circle cx="240" cy="80" r="10" fill="#8b5e3c" stroke="#f5efe8" stroke-width="2"></circle><text x="240" y="84" text-anchor="middle" fill="#f5efe8" font-size="10" font-weight="bold">☕</text><text x="240" y="104" text-anchor="middle" fill="#4a2c1a" font-size="8" font-weight="500">月と焙煎</text></g><g><circle cx="330" cy="180" r="10" fill="#8b5e3c" stroke="#f5efe8" stroke-width="2"></circle><text x="330" y="184" text-anchor="middle" fill="#f5efe8" font-size="10" font-weight="bold">☕</text><text x="330" y="204" text-anchor="middle" fill="#4a2c1a" font-size="8" font-weight="500">小さな喫茶店</text></g><text x="20" y="280" fill="#a68b72" font-size="8">© 2026 カフェマップ</text></svg></div></div></div></div><div class="space-y-4 md:space-y-5"><div class="bg-white rounded-xl p-4 md:p-5 shadow-md border border-[#e8dccc] hover:shadow-lg transition-shadow duration-200"><div class="flex items-start gap-3"><div class="bg-[#8b5e3c] text-white w-9 h-9 rounded-full flex items-center justify-center text-lg flex-shrink-0 mt-0.5">☕</div><div class="flex-1 min-w-0"><h3 class="text-[#4a2c1a] font-semibold text-base md:text-lg truncate">森の珈琲店</h3><p class="text-[#7a5a3a] text-sm mt-1 flex items-center gap-1"><span class="text-[#a68b72]">📍</span><span class="truncate">東京都渋谷区神宮前1-2-3</span></p><p class="text-[#7a5a3a] text-sm mt-0.5 flex items-center gap-1"><span class="text-[#a68b72]">🕐</span><span>8:00 - 19:00</span></p></div><div class="bg-[#f5efe8] text-[#8b5e3c] text-xs px-2.5 py-1 rounded-full border border-[#dcc9b5] whitespace-nowrap">詳細</div></div></div><div class="bg-white rounded-xl p-4 md:p-5 shadow-md border border-[#e8dccc] hover:shadow-lg transition-shadow duration-200"><div class="flex items-start gap-3"><div class="bg-[#8b5e3c] text-white w-9 h-9 rounded-full flex items-center justify-center text-lg flex-shrink-0 mt-0.5">☕</div><div class="flex-1 min-w-0"><h3 class="text-[#4a2c1a] font-semibold text-base md:text-lg truncate">陽だまりカフェ</h3><p class="text-[#7a5a3a] text-sm mt-1 flex items-center gap-1"><span class="text-[#a68b72]">📍</span><span class="truncate">東京都新宿区西新宿4-5-6</span></p><p class="text-[#7a5a3a] text-sm mt-0.5 flex items-center gap-1"><span class="text-[#a68b72]">🕐</span><span>9:00 - 21:00</span></p></div><div class="bg-[#f5efe8] text-[#8b5e3c] text-xs px-2.5 py-1 rounded-full border border-[#dcc9b5] whitespace-nowrap">詳細</div></div></div><div class="bg-white rounded-xl p-4 md:p-5 shadow-md border border-[#e8dccc] hover:shadow-lg transition-shadow duration-200"><div class="flex items-start gap-3"><div class="bg-[#8b5e3c] text-white w-9 h-9 rounded-full flex items-center justify-center text-lg flex-shrink-0 mt-0.5">☕</div><div class="flex-1 min-w-0"><h3 class="text-[#4a2c1a] font-semibold text-base md:text-lg truncate">月と焙煎</h3><p class="text-[#7a5a3a] text-sm mt-1 flex items-center gap-1"><span class="text-[#a68b72]">📍</span><span class="truncate">東京都目黒区自由が丘2-3-4</span></p><p class="text-[#7a5a3a] text-sm mt-0.5 flex items-center gap-1"><span class="text-[#a68b72]">🕐</span><span>7:30 - 18:30</span></p></div><div class="bg-[#f5efe8] text-[#8b5e3c] text-xs px-2.5 py-1 rounded-full border border-[#dcc9b5] whitespace-nowrap">詳細</div></div></div><div class="bg-white rounded-xl p-4 md:p-5 shadow-md border border-[#e8dccc] hover:shadow-lg transition-shadow duration-200"><div class="flex items-start gap-3"><div class="bg-[#8b5e3c] text-white w-9 h-9 rounded-full flex items-center justify-center text-lg flex-shrink-0 mt-0.5">☕</div><div class="flex-1 min-w-0"><h3 class="text-[#4a2c1a] font-semibold text-base md:text-lg truncate">小さな喫茶店</h3><p class="text-[#7a5a3a] text-sm mt-1 flex items-center gap-1"><span class="text-[#a68b72]">📍</span><span class="truncate">東京都世田谷区代沢5-6-7</span></p><p class="text-[#7a5a3a] text-sm mt-0.5 flex items-center gap-1"><span class="text-[#a68b72]">🕐</span><span>10:00 - 22:00</span></p></div><div class="bg-[#f5efe8] text-[#8b5e3c] text-xs px-2.5 py-1 rounded-full border border-[#dcc9b5] whitespace-nowrap">詳細</div></div></div></div></div><div class="mt-8 md:mt-10 text-center"><p class="text-[#7a5a3a] text-xs md:text-sm">全4件のカフェを掲載中</p></div></div><header class="w-full bg-[#fef6f0] border-b border-[#e8d5c4] px-4 py-4 md:py-6"><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-2 md:gap-0"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl leading-none" aria-hidden="true">☕</span><h1 class="text-[#4a3728] text-xl md:text-2xl font-serif tracking-wide">珈琲 木もれ陽</h1></div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm md:text-base"><a href="#menu" class="text-[#6b4f3a] hover:text-[#3d2b1f] transition-colors duration-200 border-b-2 border-transparent hover:border-[#c9a87c]">メニュー</a><a href="#about" class="text-[#6b4f3a] hover:text-[#3d2b1f] transition-colors duration-200 border-b-2 border-transparent hover:border-[#c9a87c]">お店について</a><a href="#access" class="text-[#6b4f3a] hover:text-[#3d2b1f] transition-colors duration-200 border-b-2 border-transparent hover:border-[#c9a87c]">アクセス</a><a href="#contact" class="text-[#6b4f3a] hover:text-[#3d2b1f] transition-colors duration-200 border-b-2 border-transparent hover:border-[#c9a87c]">お問い合わせ</a></nav></div><h2 class="sr-only">カフェ ヘッダー</h2></header><footer class="w-full bg-[#2c1810] text-[#f5e6d3] py-8 px-4 md:py-12 md:px-8"><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"><div class="text-center md:text-left"><h2 class="text-lg md:text-xl font-serif tracking-wide">珈琲 木もれ陽</h2><p class="text-sm text-[#d4b896] mt-1">〜 静かなひとときを 〜</p></div><div class="text-center text-sm md:text-base space-y-1"><p>営業時間 10:00 - 18:00</p><p>定休日 水曜日・第3火曜日</p></div><div class="text-center text-sm md:text-base space-y-1"><p>東京都千代田区神田1-2-3</p><p>☎ 03-1234-5678</p></div></div><div class="mt-8 pt-4 border-t border-[#4a3728] text-center text-xs text-[#b8a08a]"><p>© 2026 珈琲 木もれ陽</p></div></footer></div>