カフェのホームページ

atomic.studio/s/3139

📄 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><div class="w-full max-w-4xl mx-auto px-4 py-8"><h2 class="text-2xl md:text-3xl font-bold text-center text-[#3a2a1a] mb-2 tracking-wide">スタッフ選択</h2><p class="text-center text-[#7a6a5a] text-sm md:text-base mb-8">担当してほしいスタッフをお選びください</p><div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5"><div class="group relative bg-white rounded-sm shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer border border-[#e8ddd0] hover:border-[#c9a88c] overflow-hidden"><div class="relative w-full aspect-square overflow-hidden bg-[#f5efe8]"><img src="https://i.pravatar.cc/120?img=1" alt="佐藤 美咲" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy"/><div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div></div><div class="p-4 text-center"><h3 class="text-base md:text-lg font-semibold text-[#3a2a1a] truncate">佐藤 美咲</h3><p class="text-xs md:text-sm text-[#8a7a6a] mt-1">トップスタイリスト</p><div class="mt-3"><span class="inline-block px-4 py-1.5 text-xs font-medium text-white bg-[#b58a6a] rounded-full group-hover:bg-[#a07454] transition-colors duration-200">このスタッフを選ぶ</span></div></div></div><div class="group relative bg-white rounded-sm shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer border border-[#e8ddd0] hover:border-[#c9a88c] overflow-hidden"><div class="relative w-full aspect-square overflow-hidden bg-[#f5efe8]"><img src="https://i.pravatar.cc/120?img=5" alt="田中 優子" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy"/><div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div></div><div class="p-4 text-center"><h3 class="text-base md:text-lg font-semibold text-[#3a2a1a] truncate">田中 優子</h3><p class="text-xs md:text-sm text-[#8a7a6a] mt-1">シニアスタイリスト</p><div class="mt-3"><span class="inline-block px-4 py-1.5 text-xs font-medium text-white bg-[#b58a6a] rounded-full group-hover:bg-[#a07454] transition-colors duration-200">このスタッフを選ぶ</span></div></div></div><div class="group relative bg-white rounded-sm shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer border border-[#e8ddd0] hover:border-[#c9a88c] overflow-hidden"><div class="relative w-full aspect-square overflow-hidden bg-[#f5efe8]"><img src="https://i.pravatar.cc/120?img=3" alt="山田 健太" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy"/><div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div></div><div class="p-4 text-center"><h3 class="text-base md:text-lg font-semibold text-[#3a2a1a] truncate">山田 健太</h3><p class="text-xs md:text-sm text-[#8a7a6a] mt-1">スタイリスト</p><div class="mt-3"><span class="inline-block px-4 py-1.5 text-xs font-medium text-white bg-[#b58a6a] rounded-full group-hover:bg-[#a07454] transition-colors duration-200">このスタッフを選ぶ</span></div></div></div><div class="group relative bg-white rounded-sm shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer border border-[#e8ddd0] hover:border-[#c9a88c] overflow-hidden"><div class="relative w-full aspect-square overflow-hidden bg-[#f5efe8]"><img src="https://i.pravatar.cc/120?img=9" alt="中村 彩" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy"/><div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div></div><div class="p-4 text-center"><h3 class="text-base md:text-lg font-semibold text-[#3a2a1a] truncate">中村 彩</h3><p class="text-xs md:text-sm text-[#8a7a6a] mt-1">アシスタント</p><div class="mt-3"><span class="inline-block px-4 py-1.5 text-xs font-medium text-white bg-[#b58a6a] rounded-full group-hover:bg-[#a07454] transition-colors duration-200">このスタッフを選ぶ</span></div></div></div></div><p class="text-center text-xs text-[#9a8a7a] mt-6">※スタッフは予約状況により変更となる場合がございます</p></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 text-[#3e2c1a] mb-8 tracking-wide">アクセス情報</h2><div class="bg-[#faf6f0] border border-[#e5d9cc] rounded-sm shadow-sm p-6 md:p-8"><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">住所</span><span class="text-[#3e2c1a] text-base leading-relaxed">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">営業時間</span><span class="text-[#3e2c1a] text-base leading-relaxed">平日 8:00 - 20:00 / 土日祝 9:00 - 21:00</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">定休日</span><span class="text-[#3e2c1a] text-base leading-relaxed">毎週水曜日（祝日の場合は翌日）</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">電話番号</span><span class="text-[#3e2c1a] text-base leading-relaxed">03-1234-5678</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">席数</span><span class="text-[#3e2c1a] text-base leading-relaxed">店内30席 / テラス10席</span></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 pb-3 border-b border-[#e5d9cc] last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a5f4a] whitespace-nowrap min-w-[6rem]">Wi-Fi</span><span class="text-[#3e2c1a] text-base leading-relaxed">無料Wi-Fi完備（パスワードは店頭で）</span></div></div><div class="mt-6 pt-4 border-t border-[#e5d9cc]"><p class="text-sm text-[#7a5f4a] text-center">※最新の情報は各公式サイトまたはお電話でご確認ください</p></div></div><div class="mt-6 bg-[#f0ebe3] rounded-xl overflow-hidden border border-[#e5d9cc]"><div class="aspect-[16/9] w-full bg-[#d9cdbc] flex items-center justify-center"><div class="text-center px-4"><svg class="w-10 h-10 mx-auto mb-2 text-[#7a5f4a]" 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 text-[#5a4a3a]">Google Map 埋め込みエリア</p><p class="text-xs text-[#8a7a6a] mt-1">（実際の地図を配置してください）</p></div></div></div></section><footer class="w-full bg-[#2c1810] text-[#f5e6d3] py-10 px-6 md:px-12 lg:px-20"><h2 class="sr-only">フッター情報</h2><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4"><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 text-sm space-y-1"><p>営業時間 10:00 – 18:00</p><p>定休日 水曜・第3火曜</p></div><div class="text-center md:text-right text-sm"><p>東京都世田谷区代沢5-8-12</p><p class="text-[#c9a87c] mt-1">Tel. 03-1234-5678</p></div></div><div class="mt-8 pt-4 border-t border-[#4a3728] text-center text-xs text-[#a08060]"><p>© 2026 珈琲 木もれ陽</p></div></footer><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-[#4a2c2a] tracking-wide mb-3">お問い合わせ</h2><p class="text-[#6b4f4a] text-sm md:text-base leading-relaxed max-w-md mx-auto">ご予約・ご質問はこちらからお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-sm shadow-lg p-6 md:p-10 space-y-6 border border-[#e8dcd0]"><div class="grid grid-cols-1 md:grid-cols-2 gap-5"><div><label for="name" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">お名前 <span class="text-[#b87a6a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-xl border border-[#dccfc4] bg-white text-[#3d2b28] placeholder-[#b5a098] focus:outline-none focus:ring-2 focus:ring-[#c49a8a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">メールアドレス <span class="text-[#b87a6a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example" class="w-full px-4 py-3 rounded-xl border border-[#dccfc4] bg-white text-[#3d2b28] placeholder-[#b5a098] focus:outline-none focus:ring-2 focus:ring-[#c49a8a] focus:border-transparent transition"/></div></div><div><label for="phone" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">お電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-xl border border-[#dccfc4] bg-white text-[#3d2b28] placeholder-[#b5a098] focus:outline-none focus:ring-2 focus:ring-[#c49a8a] focus:border-transparent transition"/></div><div><label for="message" class="block text-sm font-medium text-[#4a2c2a] mb-1.5">お問い合わせ内容 <span class="text-[#b87a6a]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数・ご質問などをお書きください" class="w-full px-4 py-3 rounded-xl border border-[#dccfc4] bg-white text-[#3d2b28] placeholder-[#b5a098] focus:outline-none focus:ring-2 focus:ring-[#c49a8a] 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-[#8b6f5e] hover:bg-[#7a5f4f] active:bg-[#6a5244] text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8b7a72] text-center mt-4">※送信後、確認メールをお送りします。2日経っても届かない場合はお電話でお問い合わせください。</p></form></section></div>