カフェのホームページ

atomic.studio/s/3117

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#fdf6f0] border-b border-[#e8d5c4] px-4 py-4 md:py-5 lg:py-6"><div class="max-w-6xl mx-auto flex items-center justify-between"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl lg:text-4xl" role="img" aria-label="カフェ">☕</span><h1 class="text-lg md:text-xl lg:text-2xl font-serif tracking-wide text-[#4a3728]">喫茶 木もれ陽</h1></div><nav class="hidden md:flex items-center gap-6 lg:gap-8"><a href="#menu" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] transition-colors duration-200">メニュー</a><a href="#about" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] transition-colors duration-200">お店について</a><a href="#access" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] 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-[#4a3728] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3728] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3728] rounded-full"></span></button></div><h2 class="sr-only">喫茶 木もれ陽 ヘッダー</h2></header><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>