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

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

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

atomic.studio/s/3126

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

<link rel="preload" as="image" href="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80"/><div class="min-h-screen bg-zinc-950 text-white"><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 bg-[#e8d5c4] opacity-30 blur-3xl md:h-96 md:w-96 lg:-left-32 lg:-top-32"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-[#d9c2a7] opacity-25 blur-3xl md:h-80 md:w-80 lg:-bottom-24 lg:-right-24"></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-[#b8a08e] md:mb-8 md:w-20"></div><h2 class="font-serif text-4xl leading-tight tracking-wider text-[#3e2c1f] md:text-5xl lg:text-6xl">自家焙煎の香りと<br/>静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#6b5342] md:mt-8 md:text-lg">街角の小さなカフェ。一杯のコーヒーに込めた想いと、<br class="hidden md: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 rounded-full bg-[#3e2c1f] px-10 py-3.5 text-sm font-medium tracking-wider text-[#faf6f0] shadow-md transition duration-300 hover:bg-[#2d1f15] hover:shadow-lg md:px-12 md:py-4 md:text-base">メニューを見る</a><a href="#access" class="inline-block rounded-full border border-[#b8a08e] px-10 py-3.5 text-sm font-medium tracking-wider text-[#3e2c1f] transition duration-300 hover:bg-[#f0e8de] md:px-12 md:py-4 md:text-base">アクセス</a></div><div class="mx-auto mt-12 h-0.5 w-12 bg-[#d9c2a7] md:mt-16 md:w-16"></div></div></section><header class="relative w-full bg-[#fef6f0] text-[#3e2c1f] 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 leading-none md:text-3xl">☕</span><h1 class="text-xl font-bold tracking-wide md:text-2xl">珈琲 木もれ陽</h1></div><nav class="hidden gap-8 text-sm font-medium 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 items-center justify-center gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span></button></div><div class="mx-auto h-px w-[calc(100%-3rem)] max-w-5xl bg-gradient-to-r from-transparent via-[#d9b382] to-transparent md:w-[calc(100%-5rem)]"></div><h2 class="sr-only">メインナビゲーション</h2></header><section class="w-full bg-[#faf6f0] py-16 px-4 md:py-24 md:px-8"><div class="mx-auto max-w-5xl"><div class="grid gap-12 md:grid-cols-2 md:gap-16 items-center"><div class="relative overflow-hidden rounded-2xl shadow-lg"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="カフェの店内" class="w-full h-72 md:h-96 object-cover"/><div class="absolute inset-0 bg-black/10"></div></div><div class="flex flex-col gap-6"><h2 class="text-3xl md:text-4xl font-serif tracking-wide text-[#3e2c1b]">ゆったりとした時間が流れる場所</h2><div class="w-16 h-0.5 bg-[#c8a97e]"></div><p class="text-base md:text-lg leading-relaxed text-[#5c4a32]">一杯のコーヒーとともに、日常を少しだけ忘れてみませんか。 厳選した豆を丁寧に淹れたコーヒーと、季節の手作りスイーツをご用意しております。 木の温もりが広がる店内で、あなただけのひとときをお過ごしください。</p><p class="text-sm md:text-base text-[#7a684e]">朝8時から夜20時まで営業。モーニングセットも好評です。</p><div class="pt-2"><span class="inline-block border border-[#c8a97e] text-[#3e2c1b] px-6 py-2 rounded-full text-sm tracking-wider hover:bg-[#c8a97e] hover:text-white transition-colors duration-300 cursor-pointer">詳しく見る</span></div></div></div></div></section><div class="w-full max-w-3xl mx-auto px-4 py-8 md:py-12"><h2 class="text-2xl md:text-3xl font-serif text-center text-[#4a3728] mb-8 tracking-wide">メニュー</h2><div class="mb-10 last:mb-0"><h3 class="text-lg md:text-xl font-medium text-[#6b4c3b] border-b-2 border-[#d4a574] pb-2 mb-4 inline-block">ドリンク</h3><div class="space-y-3"><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">ブレンドコーヒー</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥480</span></div><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">カフェラテ</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥520</span></div><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">抹茶ラテ</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥550</span></div></div></div><div class="mb-10 last:mb-0"><h3 class="text-lg md:text-xl font-medium text-[#6b4c3b] border-b-2 border-[#d4a574] pb-2 mb-4 inline-block">スイーツ</h3><div class="space-y-3"><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">季節のフルーツタルト</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥680</span></div><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">ガトーショコラ</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥620</span></div></div></div><div class="mb-10 last:mb-0"><h3 class="text-lg md:text-xl font-medium text-[#6b4c3b] border-b-2 border-[#d4a574] pb-2 mb-4 inline-block">フード</h3><div class="space-y-3"><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">クロックムッシュ</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥750</span></div><div class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f5efe8] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg">本日のパスタ</span><span class="text-[#8b6f47] font-medium text-base md:text-lg whitespace-nowrap ml-4">¥880</span></div></div></div><div class="mt-8 pt-6 border-t border-[#d4a574] text-center"><p class="text-sm text-[#8b6f47]">表示価格はすべて税込です</p></div></div><div class="w-full max-w-xs mx-auto bg-[#FFF8F0] rounded-2xl shadow-lg overflow-hidden border border-[#E8D5C4] transition-transform duration-300 hover:scale-[1.02] md:max-w-sm lg:max-w-md"><h2 class="sr-only">季節のフルーツパンケーキ</h2><div class="relative w-full aspect-[4/3] overflow-hidden bg-[#F5EDE3]"><img src="https://placehold.co/400x300/FFF8E7/8B6F47?text=🥞" alt="季節のフルーツパンケーキ" class="w-full h-full object-cover" loading="lazy"/><span class="absolute top-3 left-3 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md tracking-wider bg-gradient-to-br from-[#C89F7B] to-[#A67B5B]">おすすめ</span></div><div class="p-5 space-y-3"><div class="flex items-start justify-between gap-2"><h3 class="text-lg font-bold leading-tight tracking-wide text-[#4A3728]">季節のフルーツパンケーキ</h3><span class="text-xl font-bold whitespace-nowrap text-[#8B6F47]">¥1,200</span></div><p class="text-sm leading-relaxed tracking-wide text-[#6B5340]">ふわふわの生地に、旬のフルーツとたっぷりのホイップクリーム。</p><button class="w-full py-2.5 rounded-xl text-white text-sm font-bold tracking-wider shadow-md hover:brightness-110 active:scale-[0.98] transition-all duration-200 bg-[#A67B5B] border border-[#8B6F47]">注文する</button></div></div><section class="w-full max-w-2xl mx-auto px-4 py-10 md:py-16"><h2 class="text-2xl md:text-3xl font-bold text-center mb-8 tracking-wide text-[#3e2c1b]">アクセス情報</h2><div class="bg-[#faf6f0] rounded-2xl shadow-md border border-[#e8dccc] overflow-hidden"><div class="w-full h-56 md:h-72 bg-[#d9c9b4] relative flex items-center justify-center"><div class="text-center text-[#5a4a34]"><svg class="w-12 h-12 mx-auto mb-2 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><p class="text-sm font-medium">MAP</p><p class="text-xs mt-1 opacity-70">※地図画像プレースホルダー</p></div></div><div class="p-5 md:p-7 space-y-4"><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">住所</span><span class="text-base text-[#3e2c1b] leading-relaxed">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">営業時間</span><span class="text-base text-[#3e2c1b] leading-relaxed">平日 8:00 - 18:00 / 土日祝 9:00 - 19:00</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">定休日</span><span class="text-base text-[#3e2c1b] leading-relaxed">毎週水曜日（祝日の場合は翌日）</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">電話番号</span><span class="text-base text-[#3e2c1b] leading-relaxed">03-1234-5678</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">席数</span><span class="text-base text-[#3e2c1b] leading-relaxed">店内20席 / テラス6席</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e8dccc] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a6b56] w-28 shrink-0">Wi-Fi</span><span class="text-base text-[#3e2c1b] leading-relaxed">全席無料Wi-Fi完備</span></div></div><div class="px-5 md:px-7 pb-5 md:pb-7"><a href="https://maps.google.com/?q=東京都渋谷区神宮前1-2-3" target="_blank" rel="noopener noreferrer" class="inline-block w-full text-center bg-[#3e2c1b] hover:bg-[#5a4a34] text-white font-medium py-3 px-6 rounded-xl transition-colors duration-200 text-sm md:text-base">Googleマップで開く</a></div></div></section><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-[#6b4f3a] 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-[#e6d9cc]"><div class="grid grid-cols-1 md:grid-cols-2 gap-5"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b87c5a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b87c5a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div></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 rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="guests" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">ご来店人数（任意）</label><select id="guests" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"><option value="" disabled="" selected="">選択してください</option><option value="1">1名様</option><option value="2">2名様</option><option value="3">3名様</option><option value="4">4名様</option><option value="5">5名様</option><option value="6">6名様</option><option value="7">7名様</option><option value="8">8名様</option><option value="more">9名様以上</option></select></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b87c5a]">*</span></label><textarea id="message" rows="4" required="" placeholder="ご予約希望日時・アレルギーなどお気軽にご記入ください" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] 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-[#8b6b4d] hover:bg-[#7a5d42] active:bg-[#6a4f37] text-white font-medium rounded-full shadow-sm transition duration-200 text-sm md:text-base tracking-wide">送信する</button></div><p class="text-xs text-[#8f7a68] text-center md:text-left pt-1"><span class="text-[#b87c5a]">*</span> は必須項目です</p></form></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 md:py-12 px-4 md:px-8"><h2 class="sr-only">カフェ 木もれ陽 フッター</h2><div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"><div><h3 class="text-lg md:text-xl font-semibold mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">カフェ 木もれ陽</h3><p class="text-sm md:text-base leading-relaxed mt-3 text-[#d4c5b5]">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>TEL: 03-1234-5678</p></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">営業時間</h4><ul class="text-sm md:text-base space-y-1 text-[#d4c5b5]"><li>月〜金: 7:00 - 20:00</li><li>土日祝: 8:00 - 18:00</li><li class="mt-2 text-[#c9a96e] text-xs">※ラストオーダーは閉店30分前</li></ul></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">メニュー</h4><nav class="text-sm md:text-base space-y-1"><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">トップ</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">メニュー</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">アクセス</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">お問い合わせ</a></nav></div></div><div class="max-w-6xl mx-auto mt-8 md:mt-12 pt-6 border-t border-[#5a3e2e] text-center"><p class="text-xs md:text-sm text-[#a08b7a] tracking-wide">© 2026 カフェ 木もれ陽. All rights reserved.</p></div></footer></div>