カフェのホームページ

atomic.studio/s/3443

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#faf3eb] text-[#3e2c1f] font-sans"><div class="max-w-6xl mx-auto px-4 py-5 md:py-6 lg:py-8 flex flex-col md:flex-row items-center justify-between gap-3 md:gap-0"><div class="text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide">☕ 喫茶 ひだまり</div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-base md:text-lg lg:text-xl font-medium"><a href="#" class="hover:text-[#b87c4b] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#b87c4b] transition-colors duration-200">店内</a><a href="#" class="hover:text-[#b87c4b] transition-colors duration-200">アクセス</a><a href="#" class="hover:text-[#b87c4b] transition-colors duration-200">お問い合わせ</a></nav></div><div class="h-0.5 bg-gradient-to-r from-transparent via-[#d9b382] to-transparent mx-4 md:mx-8 lg:mx-16"></div><h2 class="sr-only">喫茶ひだまりのヘッダー</h2></header><section class="relative flex min-h-[70vh] items-center justify-center overflow-hidden bg-[#f9f3eb] px-4 py-20 md:min-h-[80vh] md:px-8 lg:px-16"><div class="absolute -left-20 -top-20 h-72 w-72 rounded-full opacity-20 md:h-96 md:w-96 lg:h-[500px] lg:w-[500px]" style="background-color:#d9b99b"></div><div class="absolute -bottom-16 -right-16 h-56 w-56 rounded-full opacity-15 md:h-80 md:w-80 lg:h-[400px] lg:w-[400px]" style="background-color:#b28b6f"></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-[#8b6f4c] md:w-20"></div><h2 class="font-serif text-4xl font-light tracking-widest text-[#4a3728] md:text-5xl lg:text-6xl">珈琲と、静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#6b5340] md:mt-8 md:text-lg">焙煎したての香りが漂う、小さな隠れ家カフェ。 日常の喧騒を忘れ、ゆっくりと流れる時間をお楽しみください。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center sm:gap-6"><a href="#menu" class="inline-block border border-[#8b6f4c] bg-[#8b6f4c] px-10 py-3 text-sm tracking-widest text-white transition hover:bg-[#6b5340] hover:border-[#6b5340] md:px-12 md:py-4 md:text-base">メニューを見る</a><a href="#access" class="inline-block border border-[#8b6f4c] px-10 py-3 text-sm tracking-widest text-[#4a3728] transition hover:bg-[#8b6f4c] hover:text-white md:px-12 md:py-4 md:text-base">アクセス</a></div><div class="mx-auto mt-12 h-0.5 w-12 bg-[#d9b99b] md:mt-16 md:w-16"></div></div></section><section class="w-full max-w-2xl mx-auto px-4 py-12 md:py-16 lg:py-20"><div class="bg-[#faf6f0] border border-[#e5d9cc] rounded-2xl shadow-lg p-6 md:p-8 lg:p-10"><h2 class="text-2xl md:text-3xl lg:text-4xl font-serif text-[#4a3728] mb-6 md:mb-8 tracking-wide text-center">店舗情報</h2><div class="space-y-5 md:space-y-6"><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><span class="text-sm md:text-base font-semibold text-[#7a5c3a] min-w-[5rem]">店名</span><span class="text-base md:text-lg text-[#3d2b1a] font-medium">木漏れ日カフェ</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><span class="text-sm md:text-base font-semibold text-[#7a5c3a] min-w-[5rem]">住所</span><span class="text-base md:text-lg text-[#3d2b1a]">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><span class="text-sm md:text-base font-semibold text-[#7a5c3a] min-w-[5rem]">TEL</span><a href="tel:0312345678" class="text-base md:text-lg text-[#3d2b1a] hover:text-[#a67c52] transition-colors duration-200 underline underline-offset-2 decoration-[#c9b39b]">03-1234-5678</a></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><span class="text-sm md:text-base font-semibold text-[#7a5c3a] min-w-[5rem]">営業時間</span><span class="text-base md:text-lg text-[#3d2b1a] whitespace-pre-line">平日 8:00 - 18:00 / 土日祝 9:00 - 19:00</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><span class="text-sm md:text-base font-semibold text-[#7a5c3a] min-w-[5rem]">定休日</span><span class="text-base md:text-lg text-[#3d2b1a]">不定休（公式SNSにて告知）</span></div></div><div class="mt-6 md:mt-8 pt-4 md:pt-6 border-t border-[#e5d9cc]"><p class="text-sm md:text-base text-[#7a5c3a] italic text-center">※ラストオーダーは閉店30分前</p></div></div></section><div class="w-full max-w-4xl mx-auto px-4 py-8"><div class="bg-[#faf6f0] rounded-2xl shadow-lg p-6 md:p-8 border border-[#e8dccc]"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3728] mb-6 text-center tracking-wide">アクセスマップ</h2><div class="bg-[#eae3d7] rounded-xl p-4 mb-6 border border-[#d4c8b4]"><div class="relative w-full h-64 md:h-80 bg-[#d9cfbf] rounded-lg overflow-hidden"><div class="absolute inset-0 opacity-20"><div class="grid grid-cols-6 grid-rows-6 h-full"><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div><div class="border border-[#b8a88e]"></div></div></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2" style="left:30%;top:40%"><div class="flex flex-col items-center"><div class="w-4 h-4 bg-[#c0392b] rounded-full shadow-md border-2 border-white"></div><span class="text-xs font-medium text-[#4a3728] bg-white/90 px-1.5 py-0.5 rounded mt-1 shadow whitespace-nowrap">本店</span></div></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2" style="left:50%;top:65%"><div class="flex flex-col items-center"><div class="w-4 h-4 bg-[#c0392b] rounded-full shadow-md border-2 border-white"></div><span class="text-xs font-medium text-[#4a3728] bg-white/90 px-1.5 py-0.5 rounded mt-1 shadow whitespace-nowrap">青山店</span></div></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2" style="left:70%;top:40%"><div class="flex flex-col items-center"><div class="w-4 h-4 bg-[#c0392b] rounded-full shadow-md border-2 border-white"></div><span class="text-xs font-medium text-[#4a3728] bg-white/90 px-1.5 py-0.5 rounded mt-1 shadow whitespace-nowrap">代官山店</span></div></div><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><div class="w-10 h-10 bg-[#6b4c3b] rounded-full flex items-center justify-center shadow-lg border-2 border-[#faf6f0]"><span class="text-white text-lg">☕</span></div></div></div></div><div class="space-y-3"><div class="flex items-start gap-3 bg-white rounded-lg p-3 md:p-4 shadow-sm border border-[#e8dccc] hover:border-[#c0392b] transition-colors"><div class="w-8 h-8 bg-[#6b4c3b] rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0">1</div><div class="flex-1 min-w-0"><p class="font-semibold text-[#4a3728] text-sm md:text-base">本店</p><p class="text-[#7a6b5a] text-xs md:text-sm mt-0.5">東京都渋谷区神宮前1-1-1</p></div><a href="https://maps.google.com/?q=35.6762,139.7156" target="_blank" rel="noopener noreferrer" class="text-[#c0392b] text-xs md:text-sm font-medium hover:underline shrink-0 mt-1">Google Maps</a></div><div class="flex items-start gap-3 bg-white rounded-lg p-3 md:p-4 shadow-sm border border-[#e8dccc] hover:border-[#c0392b] transition-colors"><div class="w-8 h-8 bg-[#6b4c3b] rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0">2</div><div class="flex-1 min-w-0"><p class="font-semibold text-[#4a3728] text-sm md:text-base">青山店</p><p class="text-[#7a6b5a] text-xs md:text-sm mt-0.5">東京都港区南青山2-2-2</p></div><a href="https://maps.google.com/?q=35.6657,139.7105" target="_blank" rel="noopener noreferrer" class="text-[#c0392b] text-xs md:text-sm font-medium hover:underline shrink-0 mt-1">Google Maps</a></div><div class="flex items-start gap-3 bg-white rounded-lg p-3 md:p-4 shadow-sm border border-[#e8dccc] hover:border-[#c0392b] transition-colors"><div class="w-8 h-8 bg-[#6b4c3b] rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0">3</div><div class="flex-1 min-w-0"><p class="font-semibold text-[#4a3728] text-sm md:text-base">代官山店</p><p class="text-[#7a6b5a] text-xs md:text-sm mt-0.5">東京都渋谷区代官山3-3-3</p></div><a href="https://maps.google.com/?q=35.6489,139.7035" target="_blank" rel="noopener noreferrer" class="text-[#c0392b] text-xs md:text-sm font-medium hover:underline shrink-0 mt-1">Google Maps</a></div></div><p class="text-center text-xs text-[#9a8b7a] mt-6 border-t border-[#e8dccc] pt-4">※ 地図はイメージです。実際の位置とは異なる場合がございます。</p></div></div><section class="w-full max-w-4xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12"><h2 class="text-3xl md:text-4xl font-bold text-[#3e2c1a] tracking-wide">お問い合わせ</h2><p class="mt-3 text-[#7a5c3a] text-base md:text-lg">ご予約・ご質問はこちらから</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-lg p-6 md:p-10 space-y-6 border border-[#e5d9cc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1a] mb-1">お名前 <span class="text-[#b87333]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#b8a48c] focus:outline-none focus:ring-2 focus:ring-[#b87333] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1a] mb-1">メールアドレス <span class="text-[#b87333]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#b8a48c] focus:outline-none focus:ring-2 focus:ring-[#b87333] focus:border-transparent transition"/></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1a] mb-1">電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#b8a48c] focus:outline-none focus:ring-2 focus:ring-[#b87333] focus:border-transparent transition"/></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1a] mb-1">お問い合わせ内容 <span class="text-[#b87333]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数、ご質問などをお書きください" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#b8a48c] focus:outline-none focus:ring-2 focus:ring-[#b87333] focus:border-transparent transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3 bg-[#b87333] hover:bg-[#a0642a] text-white font-semibold rounded-full shadow-md hover:shadow-lg transition duration-200 text-base md:text-lg tracking-wide">送信する</button></div><p class="text-xs text-[#8c7a66] text-center md:text-left">※送信後、確認メールをお送りします。万が一届かない場合はお電話ください。</p></form></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>