カフェのホームページ — Atomic Studio

Atomic Studio /カフェのホームページ

7部品・0〜数百トークン ↩ 戻す履歴複製 💬 ことばで直す 🔗 共有 🚀 デプロイ ⏹

atomic.studio/s/3398

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

<link rel="preload" as="image" href="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;h=400&amp;fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&amp;h=400&amp;fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=600&amp;h=400&amp;fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1559305616-3f99cd43e353?w=600&amp;h=400&amp;fit=crop"/><div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#fdf8f0] shadow-sm"><div class="max-w-6xl mx-auto px-4 py-4 md:py-6 flex flex-col md:flex-row items-center justify-between"><div class="text-2xl md:text-3xl font-serif tracking-wide text-[#4a3b32] mb-2 md:mb-0">☕ 喫茶 木もれ陽</div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm md:text-base text-[#5c4a3e]"><a href="#" class="hover:text-[#b78c6a] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#b78c6a] transition-colors duration-200">店内</a><a href="#" class="hover:text-[#b78c6a] transition-colors duration-200">アクセス</a><a href="#" class="hover:text-[#b78c6a] transition-colors duration-200">お問い合わせ</a></nav></div><h2 class="sr-only">喫茶木もれ陽のヘッダー</h2></header><section class="relative w-full min-h-[70vh] md:min-h-[80vh] lg:min-h-screen flex items-center justify-center overflow-hidden bg-[#3b2a1c]"><div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image:url(&#x27;https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&#x27;)"></div><div class="absolute inset-0 bg-gradient-to-b from-[#2a1a0e]/70 via-[#3b2a1c]/50 to-[#1f1209]/80"></div><div class="relative z-10 text-center px-6 md:px-12 lg:px-20 max-w-4xl mx-auto"><div class="flex items-center justify-center gap-3 mb-6"><span class="block w-12 h-px bg-[#d4a373]"></span><span class="block w-2 h-2 rounded-full bg-[#d4a373]"></span><span class="block w-12 h-px bg-[#d4a373]"></span></div><h2 class="text-4xl md:text-5xl lg:text-6xl font-serif tracking-widest text-[#f5e6d3] drop-shadow-lg mb-4">木漏れ日カフェ</h2><p class="text-lg md:text-xl lg:text-2xl text-[#e8d5c0] font-light tracking-wide mb-8">静かな時間が流れる、大人の隠れ家</p><p class="text-sm md:text-base text-[#cbb59a] max-w-xl mx-auto leading-relaxed mb-10">一杯のコーヒーとともに、日常を忘れるひとときを。 厳選した豆と、季節のスイーツでおもてなしします。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#menu" class="inline-block px-8 py-3 bg-[#d4a373] text-[#2a1a0e] font-semibold tracking-wider rounded-full hover:bg-[#c18f5b] transition-colors duration-300 shadow-lg">メニューを見る</a><a href="#access" class="inline-block px-8 py-3 border border-[#d4a373] text-[#d4a373] font-semibold tracking-wider rounded-full hover:bg-[#d4a373]/10 transition-colors duration-300">アクセス</a></div><div class="mt-12 flex items-center justify-center gap-2"><span class="block w-16 h-px bg-[#d4a373]/60"></span><span class="block w-1.5 h-1.5 rounded-full bg-[#d4a373]/80"></span><span class="block w-16 h-px bg-[#d4a373]/60"></span></div></div><div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce"><svg class="w-6 h-6 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg></div></section><section class="w-full max-w-5xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12 md:mb-16"><h2 class="text-3xl md:text-4xl font-serif tracking-wide text-[#3e2c1b] mb-2">メニュー</h2><p class="text-[#7a6b5a] text-sm md:text-base tracking-wider">心を込めた一杯と、ほっとするひとときを</p><div class="w-16 h-0.5 bg-[#c8a882] mx-auto mt-4"></div></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">ブレンドコーヒー</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥450</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">深煎りのオリジナルブレンド</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">カフェラテ</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥500</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">エスプレッソとスチームミルク</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">抹茶ラテ</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥550</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">宇治抹茶を使用した和風ラテ</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">季節のフルーツタルト</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥650</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">旬のフルーツをふんだんに</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">ガトーショコラ</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥600</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">濃厚なチョコレートケーキ</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-6 flex flex-col border border-[#ede3d6]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b]">クロックムッシュ</h3><span class="text-[#b8865c] font-semibold text-lg whitespace-nowrap ml-2">¥700</span></div><p class="text-[#7a6b5a] text-sm leading-relaxed mt-1">とろけるチーズのホットサンド</p></div></div><div class="text-center mt-10 md:mt-12"><p class="text-[#7a6b5a] text-xs md:text-sm italic">※ 表示価格はすべて税込です</p></div></section><section class="w-full bg-[#faf6f0] py-16 px-4 md:px-8 lg:px-16"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-serif text-[#4a3728] text-center mb-3 tracking-wide">ギャラリー</h2><p class="text-center text-[#7a6b5a] text-sm md:text-base mb-10 font-light">落ち着いた空間と、こだわりの一杯をご覧ください</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"><div class="relative overflow-hidden rounded-2xl shadow-md bg-white/40 group"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;h=400&amp;fit=crop" alt="カフェの店内" class="w-full h-56 sm:h-64 object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div><div class="absolute bottom-3 left-3 right-3"><span class="inline-block bg-white/80 backdrop-blur-sm text-[#4a3728] text-xs px-3 py-1 rounded-full font-medium">カフェの店内</span></div></div><div class="relative overflow-hidden rounded-2xl shadow-md bg-white/40 group"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&amp;h=400&amp;fit=crop" alt="ラテアート" class="w-full h-56 sm:h-64 object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div><div class="absolute bottom-3 left-3 right-3"><span class="inline-block bg-white/80 backdrop-blur-sm text-[#4a3728] text-xs px-3 py-1 rounded-full font-medium">ラテアート</span></div></div><div class="relative overflow-hidden rounded-2xl shadow-md bg-white/40 group"><img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=600&amp;h=400&amp;fit=crop" alt="ケーキとコーヒー" class="w-full h-56 sm:h-64 object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div><div class="absolute bottom-3 left-3 right-3"><span class="inline-block bg-white/80 backdrop-blur-sm text-[#4a3728] text-xs px-3 py-1 rounded-full font-medium">ケーキとコーヒー</span></div></div><div class="relative overflow-hidden rounded-2xl shadow-md bg-white/40 group"><img src="https://images.unsplash.com/photo-1559305616-3f99cd43e353?w=600&amp;h=400&amp;fit=crop" alt="カフェの外観" class="w-full h-56 sm:h-64 object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div><div class="absolute bottom-3 left-3 right-3"><span class="inline-block bg-white/80 backdrop-blur-sm text-[#4a3728] text-xs px-3 py-1 rounded-full font-medium">カフェの外観</span></div></div></div></div></section><section class="w-full bg-[#faf6f0] py-16 px-4 md:px-8 lg:px-16"><div class="mx-auto max-w-4xl"><h2 class="mb-2 text-center font-serif text-3xl tracking-widest text-[#3e2c1b] md:text-4xl">アクセス</h2><p class="mb-10 text-center font-sans text-sm text-[#7a6b5a] tracking-wide">〜 静かな路地裏にある、小さな珈琲店 〜</p><div class="flex flex-col items-center gap-8 md:flex-row md:items-start md:gap-12"><div class="flex h-56 w-full items-center justify-center rounded-2xl bg-[#e8dfd4] shadow-inner md:h-64 md:w-1/2"><div class="text-center"><svg class="mx-auto mb-2 h-10 w-10 text-[#8b7a67]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path></svg><p class="text-sm text-[#5c4d3b]">東京都中央区銀座1-2-3</p><p class="text-xs text-[#8b7a67]">※実際の地図を表示</p></div></div><div class="w-full md:w-1/2"><div class="rounded-2xl bg-white/70 p-6 shadow-sm backdrop-blur-sm"><h3 class="mb-4 border-b border-[#d9cfc0] pb-2 font-serif text-lg tracking-wider text-[#3e2c1b]">営業時間</h3><ul class="space-y-1.5"><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">月</span><span class="tracking-wide">8:00 – 18:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">火</span><span class="tracking-wide">8:00 – 18:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">水</span><span class="tracking-wide">8:00 – 18:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">木</span><span class="tracking-wide">8:00 – 18:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">金</span><span class="tracking-wide">8:00 – 20:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">土</span><span class="tracking-wide">9:00 – 20:00</span></li><li class="flex justify-between text-sm text-[#4d3e2e]"><span class="font-medium">日</span><span class="tracking-wide">9:00 – 17:00</span></li></ul><div class="mt-6 border-t border-[#d9cfc0] pt-4"><p class="text-sm text-[#4d3e2e]"><span class="font-medium">定休日</span> 不定休</p><p class="mt-1 text-sm text-[#4d3e2e]"><span class="font-medium">TEL</span> 03-1234-5678</p></div></div></div></div><p class="mt-8 text-center text-xs text-[#a0907d] tracking-wide">※営業時間・定休日は変更となる場合がございます。最新情報はSNSをご確認ください。</p></div></section><section class="w-full bg-[#faf6f0] py-16 px-4 md:px-8 lg:px-16"><div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl md:text-4xl font-serif text-[#4a3728] mb-2 tracking-wide">お問い合わせ</h2><div class="w-16 h-0.5 bg-[#c8a27b] mx-auto mb-8"></div><div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 text-left"><div class="space-y-5"><div><p class="text-sm uppercase tracking-widest text-[#8b7355] mb-1">Address</p><p class="text-[#4a3728] text-base leading-relaxed">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>カフェビル 1F</p></div><div><p class="text-sm uppercase tracking-widest text-[#8b7355] mb-1">Hours</p><p class="text-[#4a3728] text-base leading-relaxed">月〜金: 8:00 - 20:00<br/>土日祝: 9:00 - 18:00<br/><span class="text-sm text-[#8b7355]">定休日: 毎週水曜</span></p></div><div><p class="text-sm uppercase tracking-widest text-[#8b7355] mb-1">Tel</p><p class="text-[#4a3728] text-base">03-1234-5678</p></div></div><form class="space-y-4"><div><label for="name" class="block text-sm text-[#4a3728] mb-1">お名前</label><input id="name" type="text" required="" placeholder="例: 山田 太郎" class="w-full border border-[#d4c5b2] bg-white rounded px-3 py-2 text-[#4a3728] placeholder-[#b8a692] text-sm focus:outline-none focus:ring-2 focus:ring-[#c8a27b]"/></div><div><label for="email" class="block text-sm text-[#4a3728] mb-1">メールアドレス</label><input id="email" type="email" required="" placeholder="例: info@example.com" class="w-full border border-[#d4c5b2] bg-white rounded px-3 py-2 text-[#4a3728] placeholder-[#b8a692] text-sm focus:outline-none focus:ring-2 focus:ring-[#c8a27b]"/></div><div><label for="message" class="block text-sm text-[#4a3728] mb-1">メッセージ</label><textarea id="message" rows="4" required="" placeholder="お問い合わせ内容をご記入ください" class="w-full border border-[#d4c5b2] bg-white rounded px-3 py-2 text-[#4a3728] placeholder-[#b8a692] text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[#c8a27b]"></textarea></div><button type="submit" class="w-full bg-[#4a3728] hover:bg-[#3a2a1e] text-white text-sm py-3 rounded transition-colors duration-200 tracking-wider">送信する</button></form></div><div class="mt-10 w-full h-48 md:h-56 bg-[#e8ddd0] rounded flex items-center justify-center text-[#8b7355] text-sm"><span>Google Map 表示エリア</span></div></div></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 px-4 md:py-12 md:px-8"><h2 class="sr-only">フッター</h2><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"><p class="text-lg md:text-xl font-serif tracking-wide">喫茶 木もれ陽</p><p class="text-sm text-[#c9a87c] mt-1">自家焙煎コーヒーと手作りスイーツ</p></div><div class="text-center text-sm space-y-1"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p>TEL: 03-1234-5678</p><p>営業時間: 8:00〜18:00 (火曜定休)</p></div><div class="text-center text-xs text-[#a08060]"><p>© 2026 喫茶 木もれ陽</p><p class="mt-1">All Rights Reserved.</p></div></div></footer></div>