カフェのホームページ

atomic.studio/s/3362

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="relative w-full bg-[#faf6f0] text-[#3e2c1a] font-sans"><div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-5 md:px-10 lg:px-16"><div class="flex items-center gap-2"><span class="text-2xl tracking-wide md:text-3xl">☕</span><h1 class="text-xl font-semibold tracking-wider md:text-2xl">喫茶 ひより</h1></div><nav class="hidden gap-8 text-sm font-medium tracking-wide md:flex lg:text-base"><a href="#menu" class="transition hover:text-[#a67c52]">メニュー</a><a href="#about" class="transition hover:text-[#a67c52]">お店について</a><a href="#access" class="transition hover:text-[#a67c52]">アクセス</a><a href="#contact" class="transition hover:text-[#a67c52]">お問い合わせ</a></nav><button class="flex flex-col gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span><span class="block h-0.5 w-6 bg-[#3e2c1a]"></span></button></div><div class="mx-auto h-px w-[calc(100%-3rem)] max-w-5xl bg-[#d9c8b2] md:w-[calc(100%-5rem)]"></div><h2 class="sr-only">喫茶ひよりのヘッダー</h2></header><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-32 -top-32 h-72 w-72 rounded-full opacity-20 md:h-96 md:w-96 lg:h-[500px] lg:w-[500px]" style="background:radial-gradient(circle, #d9b382 0%, transparent 70%)"></div><div class="pointer-events-none absolute -bottom-20 -right-20 h-60 w-60 rounded-full opacity-15 md:h-80 md:w-80 lg:h-[400px] lg:w-[400px]" style="background:radial-gradient(circle, #b8a28c 0%, transparent 70%)"></div><div class="relative z-10 mx-auto max-w-4xl text-center"><div class="mx-auto mb-6 h-px w-16 bg-[#c9a87c] md:w-20"></div><h2 class="font-serif text-4xl leading-tight tracking-wider text-[#3e2c1b] md:text-5xl lg:text-6xl">珈琲と、静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#5c4a36] md:mt-8 md:text-lg">焙煎したての香りに包まれながら、ゆっくりと流れる時間をお楽しみください。<br/>日常の喧騒を忘れ、自分だけの特別な一杯を。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center sm:gap-6"><a href="#" class="inline-block rounded-full bg-[#3e2c1b] px-8 py-3 text-sm font-medium tracking-wider text-[#faf6f0] transition hover:bg-[#5c4a36] md:px-10 md:py-4 md:text-base">メニューを見る</a><a href="#" class="inline-block rounded-full border border-[#c9a87c] px-8 py-3 text-sm font-medium tracking-wider text-[#3e2c1b] transition hover:bg-[#c9a87c] hover:text-white md:px-10 md:py-4 md:text-base">席を予約する</a></div><div class="mx-auto mt-12 h-px w-12 bg-[#c9a87c] md:mt-16 md:w-16"></div></div></section><div class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16"><div class="bg-white rounded-2xl shadow-lg overflow-hidden md:flex md:flex-row-reverse"><div class="md:w-1/2 h-64 md:h-auto overflow-hidden"><img src="https://placehold.jp/3d3d3d/ffffff/600x400.jpg?text=木もれ陽カフェ" alt="木もれ陽カフェの店内" class="w-full h-full object-cover" loading="lazy"/></div><div class="p-6 md:p-8 md:w-1/2 flex flex-col justify-center"><h2 class="text-2xl md:text-3xl font-bold text-[#3d2b1f] mb-2 tracking-wide">木もれ陽カフェ</h2><p class="text-sm text-[#6b4c3b] mb-6 border-b border-[#e8d5c4] pb-4">木漏れ日の中で、ほっと一息。</p><div class="space-y-3 text-sm md:text-base text-[#4a3728]"><div class="flex items-start gap-2"><span class="text-[#a67c52] mt-0.5 shrink-0">📍</span><span>〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex items-start gap-2"><span class="text-[#a67c52] mt-0.5 shrink-0">📞</span><span>03-1234-5678</span></div><div class="flex items-start gap-2"><span class="text-[#a67c52] mt-0.5 shrink-0">🕐</span><span>平日 8:00 - 18:00 / 土日祝 9:00 - 19:00</span></div><div class="flex items-start gap-2"><span class="text-[#a67c52] mt-0.5 shrink-0">🔒</span><span>毎週水曜日・第3火曜日</span></div><div class="flex items-start gap-2"><span class="text-[#a67c52] mt-0.5 shrink-0">🚃</span><span>東京メトロ「表参道」駅 A5出口より徒歩3分</span></div></div><div class="mt-6 pt-4 border-t border-[#e8d5c4]"><a href="https://maps.google.com/?q=%E3%80%92150-0001%20%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%8B%E8%B0%B7%E5%8C%BA%E7%A5%9E%E5%AE%AE%E5%89%8D1-2-3" target="_blank" rel="noopener noreferrer" class="inline-block bg-[#8b6f47] hover:bg-[#6b5438] text-white text-sm font-medium px-6 py-2.5 rounded-full transition-colors duration-200">Googleマップで見る</a></div></div></div></div><div class="w-full max-w-6xl mx-auto px-4 py-12 md:py-20"><div class="text-center mb-10 md:mb-14"><h2 class="text-2xl md:text-4xl font-bold text-[#4a2c1a] tracking-wide">アクセス</h2><div class="w-16 h-0.5 bg-[#b88a5e] mx-auto mt-3 md:mt-4"></div><p class="text-sm md:text-base text-[#6b4c2e] mt-3 md:mt-4">落ち着いた空間で、特別なひとときをお過ごしください</p></div><div class="flex flex-col md:flex-row gap-8 md:gap-12 items-stretch"><div class="w-full md:w-3/5 rounded-2xl overflow-hidden shadow-lg border border-[#e5d5c0]"><iframe title="一杯のコーヒーに、小さな幸せを。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468483!2d139.743804315258!3d35.658580580199!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd4b9b3b2f%3A0x8f0b5a7b5f5f5f5f!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1680000000000" class="w-full h-64 md:h-80 lg:h-96" style="border:0" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe></div><div class="w-full md:w-2/5 bg-[#faf6f0] rounded-2xl p-6 md:p-8 shadow-md border border-[#e5d5c0] flex flex-col justify-center"><div class="space-y-5 md:space-y-6"><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">📍</span> 住所</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>カフェビル 1F</p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">🚃</span> 最寄り駅</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">東京メトロ「表参道駅」A1出口より徒歩3分</p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">🕐</span> 営業時間</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">平日 8:00 – 20:00<br/>土日祝 9:00 – 21:00<br/><span class="text-xs text-[#8a6b4a]">※不定休あり</span></p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">📞</span> お問い合わせ</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">03-1234-5678</p></div></div><div class="mt-6 md:mt-8 pt-4 border-t border-[#e5d5c0]"><p class="text-xs md:text-sm text-[#8a6b4a] text-center">※駐車場はございません。公共交通機関をご利用ください。</p></div></div></div></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 tracking-wide text-[#4a3728] mb-3">お問い合わせ</h2><p class="text-[#7a6b5a] text-sm md:text-base leading-relaxed max-w-md mx-auto">ご予約・ご質問はこちらからお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-md px-6 py-8 md:px-10 md:py-10 space-y-6 border border-[#e8ddd0]"><div><label for="name" class="block text-sm font-medium text-[#4a3728] mb-1.5">お名前 <span class="text-[#b87333] ml-1">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d6c9b8] bg-white text-[#3d2e1f] placeholder-[#b5a694] 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-[#4a3728] mb-1.5">メールアドレス <span class="text-[#b87333] ml-1">*</span></label><input id="email" type="email" required="" placeholder="example@cafe.jp" class="w-full px-4 py-3 rounded-lg border border-[#d6c9b8] bg-white text-[#3d2e1f] placeholder-[#b5a694] focus:outline-none focus:ring-2 focus:ring-[#b87333] focus:border-transparent transition"/></div><div><label for="tel" class="block text-sm font-medium text-[#4a3728] mb-1.5">電話番号</label><input id="tel" type="tel" placeholder="090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d6c9b8] bg-white text-[#3d2e1f] placeholder-[#b5a694] 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-[#4a3728] mb-1.5">お問い合わせ内容 <span class="text-[#b87333] ml-1">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数、ご質問などをお書きください" class="w-full px-4 py-3 rounded-lg border border-[#d6c9b8] bg-white text-[#3d2e1f] placeholder-[#b5a694] 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.5 bg-[#b87333] hover:bg-[#a0642a] active:bg-[#8c5523] text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#9a8b7a] text-center mt-4">※ 送信後、確認メールをお送りします</p></form></section><footer class="w-full bg-[#2c1810] text-[#f5e6d3] py-10 px-6 md:px-12 lg:px-20"><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 md:text-right text-sm space-y-1"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p>☎ 03-1234-5678</p><p>営業時間 10:00 – 18:00（火曜定休）</p></div></div><div class="mt-8 pt-4 border-t border-[#4a3728] text-center text-xs text-[#a08060]"><p>© 2026 珈琲 木もれ陽</p></div></footer></div>