カフェのホームページ

atomic.studio/s/3104

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="w-full max-w-4xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12"><h2 class="text-3xl md:text-4xl font-serif text-[#3e2c1b] tracking-wide">お問い合わせ</h2><p class="mt-4 text-[#6b4f32] 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-[#e8dccc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1">お名前 <span class="text-[#b85c3a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1">メールアドレス <span class="text-[#b85c3a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1">電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="subject" class="block text-sm font-medium text-[#3e2c1b] mb-1">お問い合わせ種別 <span class="text-[#b85c3a]">*</span></label><select id="subject" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"><option value="" disabled="" selected="">選択してください</option><option value="reservation">ご予約</option><option value="menu">メニューについて</option><option value="event">イベント・貸切</option><option value="other">その他</option></select></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1">メッセージ <span class="text-[#b85c3a]">*</span></label><textarea id="message" required="" rows="5" placeholder="お問い合わせ内容をご記入ください" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] 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-[#b85c3a] hover:bg-[#9e4d2f] text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-200 tracking-wide">送信する</button></div></form></section><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:-left-32 md:-top-32 md:h-96 md:w-96"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-56 w-56 rounded-full bg-[#d9c5b0] opacity-25 blur-3xl md:-bottom-24 md:-right-24 md:h-80 md:w-80"></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 font-light tracking-widest 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 class="hidden sm:inline"/>日常の喧騒を忘れる、あなただけの場所。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center md:mt-12"><a href="#menu" class="inline-block w-48 border border-[#3e2c1b] bg-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#faf6f0] transition duration-300 hover:bg-[#5c4a36] hover:border-[#5c4a36] md:w-52 md:text-base">メニューを見る</a><a href="#access" class="inline-block w-48 border border-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#3e2c1b] transition duration-300 hover:bg-[#3e2c1b] hover:text-[#faf6f0] md:w-52 md:text-base">アクセス</a></div><div class="mx-auto mt-12 flex items-center justify-center gap-3 text-[#b8a08e] md:mt-16"><span class="block h-px w-8 bg-[#b8a08e]"></span><span class="font-serif text-xs tracking-[0.3em]">C A F E</span><span class="block h-px w-8 bg-[#b8a08e]"></span></div></div></section><footer class="bg-[#2b1a0e] text-[#f5e6d3] py-10 px-4 md:px-8"><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>月〜土 8:00〜18:00 / 日 10:00〜17: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] tracking-wide">© 2026 喫茶 琥珀. All rights reserved.</p></footer><div class="w-full max-w-2xl mx-auto px-4 py-8 md:py-12"><div class="bg-[#faf6f0] border border-[#e5d9c8] rounded-2xl shadow-lg p-6 md:p-10"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3b2c] text-center tracking-wide mb-8">店舗情報</h2><div class="space-y-5 md:space-y-6"><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">店名</span><span class="text-base md:text-lg text-[#3d2e1f] font-medium">木漏れ日カフェ</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">住所</span><span class="text-base text-[#3d2e1f]">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">電話</span><a href="tel:0312345678" class="text-base text-[#3d2e1f] hover:text-[#a67c52] transition-colors">03-1234-5678</a></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">営業時間</span><span class="text-base text-[#3d2e1f]">8:00 - 18:00</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">定休日</span><span class="text-base text-[#3d2e1f]">不定休</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">アクセス</span><span class="text-base text-[#3d2e1f]">東京メトロ「表参道」駅より徒歩3分</span></div><div class="flex flex-col md:flex-row md:items-baseline"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">備考</span><span class="text-sm text-[#6b5a48] italic">※ラストオーダーは閉店30分前</span></div></div><div class="mt-8 pt-6 border-t border-[#e5d9c8] text-center"><p class="text-xs text-[#a0907a]">最新の情報はお電話にてご確認ください</p></div></div></div></div>