カフェのホームページ

atomic.studio/s/3053

📄 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:-left-32 lg:-top-32"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-[#d9c2a7] opacity-25 blur-3xl md:h-80 md:w-80 lg:-bottom-24 lg:-right-24"></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 leading-tight tracking-wider text-[#3e2c1f] md:text-5xl lg:text-6xl">自家焙煎の香りと<br/>静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#6b5342] md:mt-8 md:text-lg">街角の小さなカフェ。一杯のコーヒーに込めた想いと、<br class="hidden md: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 rounded-full bg-[#3e2c1f] px-10 py-3.5 text-sm font-medium tracking-wider text-[#faf6f0] shadow-md transition duration-300 hover:bg-[#2d1f15] hover:shadow-lg md:px-12 md:py-4 md:text-base">メニューを見る</a><a href="#access" class="inline-block rounded-full border border-[#b8a08e] px-10 py-3.5 text-sm font-medium tracking-wider text-[#3e2c1f] transition duration-300 hover:bg-[#f0e8de] md:px-12 md:py-4 md:text-base">アクセス</a></div><div class="mx-auto mt-12 h-0.5 w-12 bg-[#d9c2a7] md:mt-16 md:w-16"></div></div></section><section class="w-full bg-[#faf6f0] py-12 px-4 md:px-8"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-serif text-[#4a3728] text-center mb-2 tracking-wide">ギャラリー</h2><p class="text-center text-[#7a6b5a] mb-10 text-sm md:text-base">ほっと一息、カフェのひととき</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&amp;h=300&amp;fit=crop" alt="ラテアート" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">ラテアート</span></div></div><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&amp;h=300&amp;fit=crop" alt="カフェの店内" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">カフェの店内</span></div></div><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=400&amp;h=300&amp;fit=crop" alt="ケーキとコーヒー" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">ケーキとコーヒー</span></div></div><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=400&amp;h=300&amp;fit=crop" alt="コーヒー豆" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">コーヒー豆</span></div></div><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1498804103079-a6351b050096?w=400&amp;h=300&amp;fit=crop" alt="カプチーノ" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">カプチーノ</span></div></div><div class="group relative overflow-hidden rounded-2xl shadow-md bg-white hover:shadow-xl transition-shadow duration-300"><img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=400&amp;h=300&amp;fit=crop" alt="サンドイッチ" class="w-full h-56 md:h-64 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"><span class="text-white text-sm font-medium tracking-wide bg-[#4a3728]/70 px-3 py-1 rounded-full">サンドイッチ</span></div></div></div></div></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 md:py-12 px-4 md:px-8"><h2 class="sr-only">カフェ 木もれ陽 フッター</h2><div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"><div><h3 class="text-lg md:text-xl font-semibold mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">カフェ 木もれ陽</h3><p class="text-sm md:text-base leading-relaxed mt-3 text-[#d4c5b5]">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>TEL: 03-1234-5678</p></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">営業時間</h4><ul class="text-sm md:text-base space-y-1 text-[#d4c5b5]"><li>月〜金: 7:00 - 20:00</li><li>土日祝: 8:00 - 18:00</li><li class="mt-2 text-[#c9a96e] text-xs">※ラストオーダーは閉店30分前</li></ul></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">メニュー</h4><nav class="text-sm md:text-base space-y-1"><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">トップ</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">メニュー</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">アクセス</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">お問い合わせ</a></nav></div></div><div class="max-w-6xl mx-auto mt-8 md:mt-12 pt-6 border-t border-[#5a3e2e] text-center"><p class="text-xs md:text-sm text-[#a08b7a] tracking-wide">© 2026 カフェ 木もれ陽. All rights reserved.</p></div></footer></div>