カフェのホームページ

atomic.studio/s/3156

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#faf6f0] border-b border-[#e5ddd0]"><div class="max-w-6xl mx-auto px-4 py-5 md:py-6 flex items-center justify-between"><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-serif tracking-wide text-[#4a3b32]">珈琲 木もれ陽</h1></div><nav class="hidden md:flex items-center gap-8 text-sm font-medium text-[#5c4a3e]"><a href="#" class="hover:text-[#8b6f5a] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#8b6f5a] transition-colors duration-200">店舗案内</a><a href="#" class="hover:text-[#8b6f5a] transition-colors duration-200">お知らせ</a><a href="#" class="hover:text-[#8b6f5a] transition-colors duration-200">お問い合わせ</a></nav><button class="md:hidden flex flex-col gap-1.5 p-1" aria-label="カフェ"><span class="block w-6 h-0.5 bg-[#4a3b32] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3b32] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3b32] rounded-full"></span></button></div><h2 class="sr-only">カフェヘッダー</h2></header><section class="relative w-full min-h-[70vh] flex items-center justify-center overflow-hidden bg-[#faf6f0]"><div class="absolute top-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-[#e8dccc] opacity-40 blur-3xl pointer-events-none"></div><div class="absolute bottom-[-15%] left-[-10%] w-[50%] h-[50%] rounded-full bg-[#d9c8b0] opacity-30 blur-3xl pointer-events-none"></div><div class="relative z-10 mx-auto max-w-6xl px-6 py-16 md:py-24 text-center"><div class="mx-auto mb-6 h-0.5 w-16 bg-[#b8a48c]"></div><h2 class="font-serif text-5xl md:text-7xl lg:text-8xl tracking-widest text-[#3e2c1b] leading-tight">珈琲と<br class="md:hidden"/>静寂の<br class="hidden md:block"/>ひととき</h2><p class="mt-6 text-base md:text-lg lg:text-xl text-[#6b5a48] font-light tracking-[0.3em] max-w-xl mx-auto leading-relaxed">京都の路地裏、時がゆっくりと流れる隠れ家。<br/>一杯の珈琲とともに、日常を忘れる時間をお過ごしください。</p><div class="mt-10 md:mt-12"><a href="#" class="inline-block border border-[#6b5a48] bg-transparent px-10 py-3 text-sm md:text-base tracking-[0.2em] text-[#3e2c1b] transition duration-300 hover:bg-[#3e2c1b] hover:text-[#faf6f0]">メニューを見る</a></div><div class="mt-16 flex items-center justify-center gap-4 text-[#b8a48c]"><span class="block h-px w-8 bg-[#b8a48c]"></span><span class="text-xs tracking-[0.3em]">since 2024</span><span class="block h-px w-8 bg-[#b8a48c]"></span></div></div></section><section class="w-full max-w-6xl mx-auto px-4 py-12 md:py-20"><div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center"><div class="relative w-full h-64 md:h-96 rounded-2xl overflow-hidden shadow-lg bg-[#f5efe8]"><div class="absolute inset-0 bg-cover bg-center" style="background-image:url(&#x27;https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80&#x27;)"></div><div class="absolute inset-0 bg-black/10"></div></div><div class="flex flex-col space-y-5 md:space-y-6"><h2 class="text-3xl md:text-4xl lg:text-5xl font-serif tracking-wide text-[#3e2c1b]">店舗情報</h2><div class="w-16 h-0.5 bg-[#b89b7a]"></div><div class="space-y-4 text-[#4a3728] text-base md:text-lg leading-relaxed"><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">📍</span><span>東京都渋谷区神宮前4-12-8<br/>カフェビル 1F</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">🕐</span><span>8:00 – 18:00（ラストオーダー 17:30）<br/>定休日：水曜日</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">📞</span><span>03-1234-5678</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">✉️</span><span>info@cafe-hp.example</span></p></div><div class="pt-2"><a href="#" class="inline-block px-8 py-3 bg-[#3e2c1b] text-[#f5efe8] rounded-full text-sm md:text-base tracking-wider hover:bg-[#5a4230] transition-colors duration-300 shadow-md">Google マップで見る</a></div></div></div></section><div class="w-full max-w-4xl mx-auto px-4 py-10 bg-[#faf6f0]"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3728] text-center mb-2 tracking-wide">アクセスマップ</h2><p class="text-center text-[#7a6b5a] text-sm mb-8 font-light">お近くの店舗をご案内いたします</p><div class="grid gap-6 md:grid-cols-3"><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">青山本店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">青山本店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都港区南青山3-12-8</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>8:00 - 20:00</span></div></div></div><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">表参道店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">表参道店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都渋谷区神宮前4-12-10</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>7:30 - 21:00</span></div></div></div><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">代官山店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">代官山店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都渋谷区代官山町17-6</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>9:00 - 19:00</span></div></div></div></div><p class="text-center text-[#a09280] text-xs mt-8 border-t border-[#e0d5c8] pt-4">※ 地図はイメージです。実際の店舗情報は各店舗までお問い合わせください。</p></div><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-20"><div class="text-center mb-10 md:mb-14"><h2 class="text-3xl md:text-4xl font-serif text-[#4a2c1a] tracking-wide">お問い合わせ</h2><p class="mt-3 text-[#7a5a3e] text-sm md:text-base leading-relaxed">ご予約・お問い合わせはこちらから</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-[#4a2c1a] mb-1.5">お名前 <span class="text-[#b85c3a]">*</span></label><input id="name" type="text" required="" placeholder="山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="email" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">メールアドレス <span class="text-[#b85c3a]">*</span></label><input id="email" type="email" required="" placeholder="info@example.com" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="tel" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">電話番号</label><input id="tel" type="tel" placeholder="090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="message" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">お問い合わせ内容 <span class="text-[#b85c3a]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時、お問い合わせ内容をご記入ください" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3.5 bg-[#b85c3a] hover:bg-[#9e4d2f] active:bg-[#8a4228] text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8a7a6a] text-center md:text-left mt-4">※ 送信後、確認メールをお送りします。24時間以内に返信がない場合はお電話ください。</p></form></section><footer class="w-full bg-[#2c1810] text-[#f5e6d3] py-12 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-2xl font-serif tracking-wider mb-2">珈琲 木漏れ日</h2><p class="text-sm text-[#d4b89b]">自家焙煎・静かなひととき</p></div><div><h3 class="text-lg font-semibold mb-3 border-b border-[#5c3a28] pb-1 inline-block">営業案内</h3><ul class="space-y-1 text-sm text-[#e8d5c0]"><li>月〜金 8:00〜18:00</li><li>土日祝 9:00〜17:00</li><li>定休日 毎週水曜</li></ul></div><div><h3 class="text-lg font-semibold mb-3 border-b border-[#5c3a28] pb-1 inline-block">お問い合わせ</h3><ul class="space-y-1 text-sm text-[#e8d5c0]"><li>☎ 03-1234-5678</li><li>✉ info@komorebi-cafe.jp</li><li class="mt-2"><span class="inline-block mr-3">Instagram</span><span>Twitter</span></li></ul></div></div><div class="mt-10 pt-6 border-t border-[#5c3a28] text-center text-xs text-[#b89a7a]"><p>© 2026 珈琲 木漏れ日. All rights reserved.</p></div></footer></div>