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

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

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

atomic.studio/s/3319

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

<link rel="preload" as="image" href="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;q=80"/><div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#fef6f0] border-b border-[#e8d5c4] px-4 py-5 md:py-6 lg:py-7"><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-3 md:gap-0"><div class="flex items-center gap-2"><span class="text-3xl md:text-4xl lg:text-5xl" role="img" aria-label="カフェ">☕</span><h1 class="text-2xl md:text-3xl lg:text-4xl font-serif tracking-wide text-[#4a2c1a]">喫茶 木もれ陽</h1></div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-base md:text-lg lg:text-xl font-medium text-[#6b4c32]"><a href="#menu" class="hover:text-[#a67c52] transition-colors duration-200">メニュー</a><a href="#about" class="hover:text-[#a67c52] transition-colors duration-200">お店について</a><a href="#access" class="hover:text-[#a67c52] transition-colors duration-200">アクセス</a><a href="#contact" class="hover:text-[#a67c52] transition-colors duration-200">お問い合わせ</a></nav></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-20 -top-20 h-72 w-72 rounded-full opacity-10 md:h-96 md:w-96 lg:h-[500px] lg:w-[500px]" style="background-color:#d4a373"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-56 w-56 rounded-full opacity-10 md:h-80 md:w-80 lg:h-[400px] lg:w-[400px]" style="background-color:#bc6c25"></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-[#bc6c25] md:mb-8 md:w-20"></div><h2 class="font-serif text-4xl leading-tight tracking-wide text-[#3e2723] md:text-5xl lg:text-6xl">珈琲と、静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#5d4037] md:mt-8 md:text-lg lg:text-xl">焙煎したての香りと、手作りのスイーツ。<br class="hidden sm:inline"/>日常を少しだけ特別にする、あなたの隠れ家カフェ。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center sm:gap-6 md:mt-12"><a href="#menu" class="inline-block w-full rounded-full bg-[#6f4e37] px-8 py-3 text-center text-sm font-medium tracking-wider text-white shadow-md transition duration-300 hover:bg-[#5a3d2b] sm:w-auto md:px-10 md:py-4 md:text-base">メニューを見る</a><a href="#access" class="inline-block w-full rounded-full border border-[#6f4e37] px-8 py-3 text-center text-sm font-medium tracking-wider text-[#6f4e37] transition duration-300 hover:bg-[#6f4e37] hover:text-white sm:w-auto md:px-10 md:py-4 md:text-base">アクセス</a></div><div class="mx-auto mt-12 h-0.5 w-12 bg-[#d4a373] md:mt-16 md:w-16"></div></div></section><section class="w-full bg-[#faf6f1] py-16 px-4 md:py-24 md:px-8"><div class="mx-auto max-w-5xl"><div class="mb-12 text-center md:mb-16"><h2 class="mb-3 font-serif text-3xl tracking-wide text-[#3e2c1b] md:text-4xl">私たちについて</h2><div class="mx-auto h-0.5 w-16 bg-[#b88a5f]"></div></div><div class="flex flex-col items-center gap-10 md:flex-row md:items-start md:gap-16"><div class="w-full max-w-sm overflow-hidden rounded-2xl shadow-lg md:w-1/2"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;q=80" alt="カフェの店内の様子" class="h-72 w-full object-cover md:h-80"/></div><div class="w-full max-w-md md:w-1/2"><p class="mb-5 leading-relaxed text-[#4a3728]">静かな路地裏にたたずむ小さなカフェ。一杯一杯丁寧に淹れるコーヒーと、季節の素材を活かした手作りスイーツをお楽しみください。</p><p class="mb-8 leading-relaxed text-[#4a3728]">木の温もりが広がる店内は、ゆったりとした時間が流れています。本を片手に、あるいは大切な人とのひとときに、どうぞお越しください。</p><div class="rounded-xl bg-[#e8ddd0] p-5"><h3 class="mb-2 font-serif text-lg font-semibold text-[#3e2c1b]">営業時間</h3><ul class="space-y-1 text-sm text-[#4a3728]"><li class="flex justify-between"><span>月曜 – 金曜</span><span>8:00 – 18:00</span></li><li class="flex justify-between"><span>土曜・日曜</span><span>9:00 – 17:00</span></li><li class="flex justify-between"><span>定休日</span><span>水曜</span></li></ul></div></div></div></div></section><div class="w-full min-h-screen bg-[#faf6f0] flex items-center justify-center p-4 md:p-8"><div class="w-full max-w-4xl bg-white rounded-3xl shadow-lg overflow-hidden border border-[#e8ddd0]"><div class="bg-[#4a3b32] px-6 py-5 md:px-10 md:py-7"><h2 class="text-2xl md:text-3xl font-serif tracking-wider text-[#f5ede4] text-center">メニュー</h2><p class="text-sm md:text-base text-[#cbb8a8] text-center mt-1 font-light">〜 カフェのこだわりを一皿に 〜</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 p-6 md:p-10"><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">ブレンドコーヒー</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥450</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">深煎りのオリジナルブレンド</p></div><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">カフェラテ</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥500</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">エスプレッソとスチームミルク</p></div><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">抹茶ラテ</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥550</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">京都宇治抹茶使用</p></div><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">季節のフルーツタルト</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥650</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">旬の果実をたっぷり</p></div><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">クロッカンショコラ</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥400</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">サクサク食感のチョコ菓子</p></div><div class="bg-[#fcf9f5] rounded-xl p-5 border border-[#e8ddd0] hover:shadow-md transition-shadow duration-200 flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-base md:text-lg font-semibold text-[#3d2e24] leading-tight">アイスカフェオレ</h3><span class="text-base md:text-lg font-bold text-[#8b6f5a] whitespace-nowrap ml-2">¥480</span></div><p class="text-xs md:text-sm text-[#8f7a6a] leading-relaxed mt-auto">たっぷり氷でさっぱり</p></div></div><div class="bg-[#f5ede4] px-6 py-4 md:px-10 md:py-5 text-center"><p class="text-xs md:text-sm text-[#7a6658] tracking-wide">＊ 表示価格はすべて税込みです ＊</p></div></div></div><div class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16"><div class="text-center mb-8"><h2 class="text-2xl md:text-3xl font-semibold text-[#3e2c1a] tracking-wide">アクセス</h2><div class="w-12 h-0.5 bg-[#b89a6b] mx-auto mt-3"></div></div><div class="flex flex-col md:flex-row gap-8 items-start"><div class="w-full md:w-2/3 rounded-xl overflow-hidden shadow-lg border border-[#e5d9c6]"><iframe title="一杯のコーヒーで、日常に小さな贅沢を。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.827853398433!2d139.764936!3d35.681236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba1f4e8b!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1680000000000" width="100%" height="320" style="border:0" loading="lazy" referrerPolicy="no-referrer-when-downgrade" class="w-full h-64 md:h-80"></iframe></div><div class="w-full md:w-1/3 bg-[#f9f6f0] rounded-xl p-6 shadow-sm border border-[#e5d9c6]"><div class="space-y-4 text-[#3e2c1a]"><div><p class="text-sm font-medium text-[#b89a6b] tracking-wide">住所</p><p class="text-base md:text-lg leading-relaxed mt-1">〒100-0001<br/>東京都千代田区<br/>千代田1-1-1</p></div><div><p class="text-sm font-medium text-[#b89a6b] tracking-wide">営業時間</p><p class="text-base md:text-lg leading-relaxed mt-1">8:00 – 18:00<br/>（ラストオーダー 17:30）</p></div><div><p class="text-sm font-medium text-[#b89a6b] tracking-wide">定休日</p><p class="text-base md:text-lg mt-1">水曜日・第3火曜日</p></div><div><p class="text-sm font-medium text-[#b89a6b] tracking-wide">お問い合わせ</p><p class="text-base md:text-lg mt-1">03-1234-5678</p></div></div><div class="mt-6 pt-4 border-t border-[#e5d9c6]"><p class="text-xs text-[#8a7a64] leading-relaxed">※駐車場はございません。公共交通機関をご利用ください。</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-[#3e2c1b] mb-3">お問い合わせ</h2><p class="text-[#6b4f32] 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-12 space-y-6 border border-[#e5d9cc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b8865b]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d6c8b8] bg-white text-[#3e2c1b] placeholder-[#b8a692] focus:outline-none focus:ring-2 focus:ring-[#b8865b] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b8865b]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-lg border border-[#d6c8b8] bg-white text-[#3e2c1b] placeholder-[#b8a692] focus:outline-none focus:ring-2 focus:ring-[#b8865b] focus:border-transparent transition"/></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d6c8b8] bg-white text-[#3e2c1b] placeholder-[#b8a692] focus:outline-none focus:ring-2 focus:ring-[#b8865b] focus:border-transparent transition"/></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b8865b]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数、ご質問などをお書きください" class="w-full px-4 py-3 rounded-lg border border-[#d6c8b8] bg-white text-[#3e2c1b] placeholder-[#b8a692] focus:outline-none focus:ring-2 focus:ring-[#b8865b] 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-[#8b6f47] hover:bg-[#7a5f3a] active:bg-[#6b4f32] text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8b7a66] text-center pt-2">送信いただいた内容は、お問い合わせ対応以外には使用いたしません。</p></form></section><footer class="bg-[#2d1b0e] text-[#f5e6d3] py-8 px-4 md:px-8"><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"><h2 class="text-lg md:text-xl font-semibold tracking-wide">珈琲喫茶 木漏れ日</h2><p class="text-sm text-[#c9a87c] mt-1">静かなひとときを、あなたに。</p></div><div class="text-center md:text-right text-sm space-y-1"><p>📍 東京都渋谷区神宮前 1-2-3</p><p>📞 03-1234-5678</p><p>🕐 10:00 – 19:00（火曜定休）</p></div></div><div class="max-w-6xl mx-auto mt-6 mb-4 border-t border-[#5a3e2b]"></div><p class="text-center text-xs text-[#a0846a]">© 2026 珈琲喫茶 木漏れ日. All rights reserved.</p></footer></div>