カフェのホームページ

atomic.studio/s/3156

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

<div class="min-h-screen bg-zinc-950 text-white"><div class="w-full max-w-4xl mx-auto px-4 py-10 bg-[#faf6f0]"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3728] text-center mb-2 tracking-wide">アクセスマップ</h2><p class="text-center text-[#7a6b5a] text-sm mb-8 font-light">お近くの店舗をご案内いたします</p><div class="grid gap-6 md:grid-cols-3"><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">青山本店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">青山本店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都港区南青山3-12-8</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>8:00 - 20:00</span></div></div></div><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">表参道店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">表参道店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都渋谷区神宮前4-12-10</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>7:30 - 21:00</span></div></div></div><div class="bg-white rounded-2xl shadow-md overflow-hidden border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-300"><div class="relative h-36 bg-[#d9c9b4] flex items-center justify-center"><div class="flex flex-col items-center"><span class="text-3xl">📍</span><span class="text-xs text-[#4a3728] bg-white/80 px-2 py-0.5 rounded-full mt-1 font-medium">代官山店</span></div><div class="absolute inset-0 opacity-10"><div class="w-full h-full" style="background-image:linear-gradient(#4a3728 1px, transparent 1px), linear-gradient(90deg, #4a3728 1px, transparent 1px);background-size:20px 20px"></div></div></div><div class="p-4"><h3 class="font-serif text-lg text-[#4a3728] mb-1">代官山店</h3><p class="text-sm text-[#6b5c4b] mb-1 leading-relaxed">東京都渋谷区代官山町17-6</p><div class="flex items-center text-xs text-[#8a7b6a]"><span class="mr-1">🕐</span><span>9:00 - 19:00</span></div></div></div></div><p class="text-center text-[#a09280] text-xs mt-8 border-t border-[#e0d5c8] pt-4">※ 地図はイメージです。実際の店舗情報は各店舗までお問い合わせください。</p></div><section class="w-full max-w-6xl mx-auto px-4 py-12 md:py-20"><div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center"><div class="relative w-full h-64 md:h-96 rounded-2xl overflow-hidden shadow-lg bg-[#f5efe8]"><div class="absolute inset-0 bg-cover bg-center" style="background-image:url(&#x27;https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80&#x27;)"></div><div class="absolute inset-0 bg-black/10"></div></div><div class="flex flex-col space-y-5 md:space-y-6"><h2 class="text-3xl md:text-4xl lg:text-5xl font-serif tracking-wide text-[#3e2c1b]">店舗情報</h2><div class="w-16 h-0.5 bg-[#b89b7a]"></div><div class="space-y-4 text-[#4a3728] text-base md:text-lg leading-relaxed"><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">📍</span><span>東京都渋谷区神宮前4-12-8<br/>カフェビル 1F</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">🕐</span><span>8:00 – 18:00（ラストオーダー 17:30）<br/>定休日：水曜日</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">📞</span><span>03-1234-5678</span></p><p class="flex items-start gap-2"><span class="inline-block w-6 text-[#b89b7a] font-semibold shrink-0">✉️</span><span>info@cafe-hp.example</span></p></div><div class="pt-2"><a href="#" class="inline-block px-8 py-3 bg-[#3e2c1b] text-[#f5efe8] rounded-full text-sm md:text-base tracking-wider hover:bg-[#5a4230] transition-colors duration-300 shadow-md">Google マップで見る</a></div></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 text-[#4a2c1a] tracking-wide">お問い合わせ</h2><p class="mt-3 text-[#7a5a3e] 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-[#e5d9cc]"><div><label for="name" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">お名前 <span class="text-[#b85c3a]">*</span></label><input id="name" type="text" required="" placeholder="山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="email" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">メールアドレス <span class="text-[#b85c3a]">*</span></label><input id="email" type="email" required="" placeholder="info@example.com" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="tel" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">電話番号</label><input id="tel" type="tel" placeholder="090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition"/></div><div><label for="message" class="block text-sm font-medium text-[#4a2c1a] mb-1.5">お問い合わせ内容 <span class="text-[#b85c3a]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時、お問い合わせ内容をご記入ください" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b3] bg-white text-[#3d2a1a] placeholder-[#b8a694] focus:outline-none focus:ring-2 focus:ring-[#b85c3a]/40 focus:border-[#b85c3a] transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3.5 bg-[#b85c3a] hover:bg-[#9e4d2f] active:bg-[#8a4228] text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8a7a6a] text-center md:text-left mt-4">※ 送信後、確認メールをお送りします。24時間以内に返信がない場合はお電話ください。</p></form></section></div>