カフェのホームページ

atomic.studio/s/3059

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="relative w-full bg-[#faf3eb] text-[#3e2c1f] font-sans"><div class="mx-auto flex max-w-7xl 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 md:text-3xl lg:text-4xl">☕</span><span class="text-xl font-bold tracking-wide md:text-2xl lg:text-3xl">喫茶 ひだまり</span></div><nav class="hidden items-center gap-8 text-base font-medium md:flex lg:gap-12 lg:text-lg"><a href="#" class="transition hover:text-[#b87c4b]">メニュー</a><a href="#" class="transition hover:text-[#b87c4b]">店内</a><a href="#" class="transition hover:text-[#b87c4b]">アクセス</a><a href="#" class="rounded-full bg-[#b87c4b] px-5 py-2 text-white transition hover:bg-[#9e6638]">ご予約</a></nav><button class="flex flex-col gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span></button></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 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><footer class="border-t border-amber-200 bg-amber-50/80 text-amber-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="space-y-4"><h3 class="text-lg font-semibold tracking-tight text-amber-950">Café Luminoso</h3><div class="space-y-2 text-sm leading-relaxed text-amber-800"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p><a href="tel:0312345678" class="hover:text-amber-600 transition-colors">03-1234-5678</a></p><p><a href="mailto:info@cafeluminoso.jp" class="hover:text-amber-600 transition-colors">info@cafeluminoso.jp</a></p><p class="pt-1 text-xs text-amber-700">平日 8:00-20:00 / 土日祝 9:00-19:00</p></div></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">メニュー</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">ドリンクメニュー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">フードメニュー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">スイーツ</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">季節のおすすめ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">店舗情報</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">私たちについて</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">店舗一覧</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">採用情報</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">お問い合わせ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">サポート</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">よくある質問</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">プライバシーポリシー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">特定商取引法に基づく表記</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">サイトマップ</a></li></ul><div class="mt-6"><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">フォローする</h4><div class="flex flex-wrap gap-3"><a href="#" aria-label="Instagram" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-950 transition-all"><span class="text-base">📷</span></a><a href="#" aria-label="Twitter" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-950 transition-all"><span class="text-base">🐦</span></a><a href="#" aria-label="Facebook" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-950 transition-all"><span class="text-base">📘</span></a><a href="#" aria-label="LINE" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-950 transition-all"><span class="text-base">💬</span></a></div></div></div></div><div class="mt-10 border-t border-amber-200 pt-6 text-center"><p class="text-xs text-amber-700">© 2026 Café Luminoso. All rights reserved.</p></div></div></footer><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 text-[#4a2c2a] tracking-wide">お問い合わせ</h2><p class="mt-3 text-[#7a5a4a] 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-[#e8d9cc]"><div><label for="name" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">お名前 <span class="text-[#b35c44]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#dccfc4] bg-white text-[#3d2b26] placeholder-[#b8a69a] focus:outline-none focus:ring-2 focus:ring-[#b88a6e] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">メールアドレス <span class="text-[#b35c44]">*</span></label><input id="email" type="email" required="" placeholder="例：info@example.com" class="w-full px-4 py-3 rounded-lg border border-[#dccfc4] bg-white text-[#3d2b26] placeholder-[#b8a69a] focus:outline-none focus:ring-2 focus:ring-[#b88a6e] focus:border-transparent transition"/></div><div><label for="tel" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">電話番号</label><input id="tel" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#dccfc4] bg-white text-[#3d2b26] placeholder-[#b8a69a] focus:outline-none focus:ring-2 focus:ring-[#b88a6e] focus:border-transparent transition"/></div><div><label for="message" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">お問い合わせ内容 <span class="text-[#b35c44]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・質問などをお書きください" class="w-full px-4 py-3 rounded-lg border border-[#dccfc4] bg-white text-[#3d2b26] placeholder-[#b8a69a] focus:outline-none focus:ring-2 focus:ring-[#b88a6e] 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-[#8b5e4a] hover:bg-[#734d3b] active:bg-[#5f3f30] text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#a58b7a] text-center md:text-left pt-2"><span class="text-[#b35c44]">*</span> は必須項目です。 送信後、確認メールをお送りします。</p></form></section></div>