カフェのホームページ

atomic.studio/s/3290

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#faf6f0] text-[#3e2c1a] font-sans"><div class="max-w-6xl mx-auto px-4 py-5 md:py-6 flex flex-col md:flex-row items-center justify-between gap-3"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl leading-none">☕</span><h1 class="text-xl md:text-2xl font-bold tracking-wide">喫茶 ひだまり</h1></div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm md:text-base font-medium"><a href="#" class="hover:text-[#a67c4e] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#a67c4e] transition-colors duration-200">店舗案内</a><a href="#" class="hover:text-[#a67c4e] transition-colors duration-200">お知らせ</a><a href="#" class="hover:text-[#a67c4e] transition-colors duration-200">お問い合わせ</a></nav><div class="text-xs md:text-sm text-[#6b4f32] bg-[#ede4d8] px-4 py-1.5 rounded-full whitespace-nowrap">月〜土 8:00 - 18:00</div></div><h2 class="sr-only">喫茶ひだまり ヘッダー</h2></header><section class="relative w-full min-h-[70vh] flex items-center justify-center overflow-hidden bg-[#f5efe6]"><div class="absolute top-[-10%] right-[-10%] w-[300px] h-[300px] rounded-full bg-[#d9c5a8] opacity-30 blur-3xl"></div><div class="absolute bottom-[-10%] left-[-10%] w-[250px] h-[250px] rounded-full bg-[#c4a882] opacity-20 blur-3xl"></div><div class="relative z-10 flex flex-col items-center text-center px-6 md:px-12 max-w-4xl mx-auto"><div class="w-16 h-0.5 bg-[#8b6f47] mb-6"></div><h2 class="text-4xl md:text-5xl lg:text-6xl font-serif tracking-wider text-[#4a3728] leading-tight">木漏れ日と<br class="md:hidden"/>珈琲の時間</h2><p class="mt-6 text-base md:text-lg text-[#6b5a4a] font-light leading-relaxed max-w-xl">静かな路地裏にたたずむ小さなカフェ。<br/>一杯のコーヒーとともに、ゆったりとしたひとときをお過ごしください。</p><a href="#menu" class="mt-10 inline-block px-10 py-3 border border-[#8b6f47] text-[#8b6f47] text-sm tracking-widest uppercase hover:bg-[#8b6f47] hover:text-white transition-all duration-300 ease-in-out">メニューを見る</a><div class="w-16 h-0.5 bg-[#8b6f47] mt-10"></div></div></section><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16 lg:py-20"><h2 class="text-2xl md:text-3xl lg:text-4xl font-serif text-center text-[#4a3728] mb-8 md:mb-12 tracking-wide">メニュー</h2><div class="space-y-10 md:space-y-12"><div><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b89b] pb-2 mb-4 inline-block">ドリンク</h3><ul class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6"><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">ブレンドコーヒー</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥450</span></li><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">カフェラテ</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥500</span></li><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">抹茶ラテ</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥550</span></li></ul></div><div><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b89b] pb-2 mb-4 inline-block">フード</h3><ul class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6"><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">季節のフルーツタルト</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥650</span></li><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">クロックムッシュ</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥600</span></li><li class="flex justify-between items-center bg-[#faf6f0] rounded-lg px-4 py-3 md:px-5 md:py-4 shadow-sm hover:shadow-md transition-shadow"><span class="text-[#3e2c1a] text-sm md:text-base font-medium">自家製スコーン</span><span class="text-[#8b6f4e] text-sm md:text-base font-semibold whitespace-nowrap ml-2">¥400</span></li></ul></div></div></section><section class="bg-[#faf6f0] py-16 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-[#8b7a66] text-center mb-10 text-sm md:text-base">ゆったりとした時間が流れる、私たちの空間</p><div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4"><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&amp;h=400&amp;fit=crop" alt="カフェの店内" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&amp;h=400&amp;fit=crop" alt="ラテアート" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=600&amp;h=400&amp;fit=crop" alt="ケーキとコーヒー" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1559305616-3f99cd43e353?w=600&amp;h=400&amp;fit=crop" alt="カフェの外観" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=600&amp;h=400&amp;fit=crop" alt="コーヒー豆" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div><div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1497935586351-b67a49e012bf?w=600&amp;h=400&amp;fit=crop" alt="カフェラテ" loading="lazy" class="w-full h-48 md:h-56 lg:h-64 object-cover hover:scale-105 transition-transform duration-500"/></div></div><div class="text-center mt-10"><button type="button" class="inline-block border-2 border-[#4a3728] text-[#4a3728] px-8 py-3 rounded-full text-sm tracking-widest hover:bg-[#4a3728] hover:text-white transition-colors duration-300">もっと見る</button></div></div></section><section class="w-full bg-[#faf6f0] py-12 px-4 md:py-20 md:px-8"><div class="mx-auto max-w-6xl"><h2 class="mb-8 text-center text-2xl font-light tracking-widest text-[#4a3b32] md:mb-12 md:text-3xl">アクセス</h2><div class="flex flex-col gap-8 md:flex-row md:gap-12"><div class="w-full overflow-hidden rounded-lg shadow-md md:w-3/5"><iframe title="一杯のコーヒーが、日常を特別にする。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.827853398657!2d139.764936!3d35.681236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba1f4e6b!2sTokyo+Station!5e0!3m2!1sja!2sjp!4v1" width="100%" height="280" style="border:0;min-height:240px" loading="lazy" referrerPolicy="no-referrer-when-downgrade" class="block w-full md:h-[320px]"></iframe></div><div class="flex w-full flex-col justify-center space-y-5 text-[#4a3b32] md:w-2/5"><div><p class="text-sm tracking-widest text-[#8b7a6e]">住所</p><p class="mt-1 text-base font-medium leading-relaxed md:text-lg">〒100-0005<br/>東京都千代田区丸の内1-9-1</p></div><div><p class="text-sm tracking-widest text-[#8b7a6e]">営業時間</p><p class="mt-1 text-base font-medium md:text-lg">8:00 – 18:00（L.O. 17:30）</p><p class="mt-0.5 text-sm text-[#8b7a6e]">不定休</p></div><div><p class="text-sm tracking-widest text-[#8b7a6e]">お問い合わせ</p><p class="mt-1 text-base font-medium md:text-lg">03-1234-5678</p></div><div class="pt-2"><p class="text-xs leading-relaxed text-[#8b7a6e]">※駐車場はございません。公共交通機関をご利用ください。</p></div></div></div></div></section><section class="w-full py-16 px-4 md:py-24 md:px-8 bg-[#faf6f0]"><div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl md:text-4xl font-serif text-[#3e2c1b] mb-2 tracking-wide">お問い合わせ</h2><div class="w-16 h-0.5 bg-[#b89b7a] mx-auto mb-8"></div><p class="text-[#5c4a32] text-base md:text-lg leading-relaxed mb-10 max-w-xl mx-auto">ご予約やご質問は、お電話または下記フォームよりお気軽にどうぞ。</p><div class="grid md:grid-cols-2 gap-8 md:gap-12 text-left"><div class="space-y-6"><div><p class="text-sm uppercase tracking-widest text-[#b89b7a] mb-1">Phone</p><a href="tel:03-1234-5678" class="text-[#3e2c1b] text-lg md:text-xl font-medium hover:text-[#b89b7a] transition-colors">03-1234-5678</a></div><div><p class="text-sm uppercase tracking-widest text-[#b89b7a] mb-1">Address</p><p class="text-[#3e2c1b] text-base md:text-lg leading-relaxed">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>カフェビル 1F</p></div><div><p class="text-sm uppercase tracking-widest text-[#b89b7a] mb-1">Open Hours</p><p class="text-[#3e2c1b] text-base md:text-lg">月〜金 8:00 - 18:00<br/>土日祝 9:00 - 17:00</p></div></div><form class="space-y-5"><div><label for="name" class="sr-only">お名前</label><input id="name" type="text" placeholder="お名前" class="w-full px-4 py-3 bg-white border border-[#d9cdbc] text-[#3e2c1b] placeholder-[#b89b7a] rounded-sm focus:outline-none focus:ring-2 focus:ring-[#b89b7a] focus:border-transparent transition"/></div><div><label for="email" class="sr-only">メールアドレス</label><input id="email" type="email" placeholder="メールアドレス" class="w-full px-4 py-3 bg-white border border-[#d9cdbc] text-[#3e2c1b] placeholder-[#b89b7a] rounded-sm focus:outline-none focus:ring-2 focus:ring-[#b89b7a] focus:border-transparent transition"/></div><div><label for="message" class="sr-only">メッセージ</label><textarea id="message" rows="4" placeholder="メッセージ" class="w-full px-4 py-3 bg-white border border-[#d9cdbc] text-[#3e2c1b] placeholder-[#b89b7a] rounded-sm resize-none focus:outline-none focus:ring-2 focus:ring-[#b89b7a] focus:border-transparent transition"></textarea></div><button type="submit" class="w-full py-3 bg-[#3e2c1b] text-[#faf6f0] text-base font-medium tracking-wider rounded-sm hover:bg-[#5c4a32] transition-colors">送信する</button></form></div><div class="mt-12 w-full h-48 md:h-64 bg-[#e8dfd3] rounded-sm flex items-center justify-center text-[#b89b7a] text-sm tracking-widest">Google Map</div></div></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-10 px-4 md:px-8"><div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-left"><div><h2 class="text-lg font-semibold tracking-wide mb-3 border-b border-[#f5e6d3]/30 pb-2 inline-block">カフェ 木もれ陽</h2><p class="text-sm leading-relaxed mt-2">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>TEL: 03-1234-5678</p></div><div><h2 class="text-lg font-semibold tracking-wide mb-3 border-b border-[#f5e6d3]/30 pb-2 inline-block">営業時間</h2><p class="text-sm leading-relaxed mt-2">月〜金: 8:00 - 20:00<br/>土日祝: 9:00 - 18:00<br/>定休日: 水曜日</p></div><div><h2 class="text-lg font-semibold tracking-wide mb-3 border-b border-[#f5e6d3]/30 pb-2 inline-block">フォローする</h2><div class="flex justify-center md:justify-start gap-4 mt-2 text-sm"><a href="#" class="hover:text-[#d4a373] transition-colors duration-200">Instagram</a><a href="#" class="hover:text-[#d4a373] transition-colors duration-200">Twitter</a><a href="#" class="hover:text-[#d4a373] transition-colors duration-200">Facebook</a></div></div></div><div class="mt-8 pt-6 border-t border-[#f5e6d3]/20 text-center text-xs tracking-wider"><p>© 2026 カフェ 木もれ陽. All rights reserved.</p></div></footer></div>