Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs
This commit is contained in:
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Casa Alberto — Benalmádena</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root { --bg-dark: #0c0a09; --bg-card: #1c1917; --gold: #d4a853; --gold-light: #e8c07d; --cream: #f5f0e8; --text: #e8e0d5; --text-muted: #a09080; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Lato', sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
|
||||
nav.scrolled { background: rgba(12,10,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,83,0.15); }
|
||||
.nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
.nav-cta { background: var(--gold); color: var(--bg-dark) !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
|
||||
.nav-cta:hover { background: var(--gold-light) !important; }
|
||||
|
||||
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,10,9,0.25) 0%, rgba(12,10,9,0.65) 55%, rgba(12,10,9,1) 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--gold); color: var(--bg-dark); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid rgba(212,168,83,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,83,0.08); }
|
||||
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; animation: fadeUp 0.8s 1.2s forwards; }
|
||||
.scroll-indicator span { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); margin: 0 auto; animation: scrollPulse 2s infinite; }
|
||||
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
|
||||
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||
.section-title em { font-style: italic; color: var(--gold); }
|
||||
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||
.about-img { position: relative; border-radius: 4px; overflow: hidden; }
|
||||
.about-img img { width: 100%; height: 500px; object-fit: cover; display: block; }
|
||||
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||
.about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
|
||||
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
|
||||
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
|
||||
.about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(212,168,83,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
|
||||
|
||||
#menu { background: var(--bg-card); }
|
||||
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
|
||||
.menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(212,168,83,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
|
||||
.menu-tab:first-child { border-radius: 2px 0 0 2px; }
|
||||
.menu-tab:last-child { border-radius: 0 2px 2px 0; }
|
||||
.menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }
|
||||
.menu-category { display: none; }
|
||||
.menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
||||
.menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(212,168,83,0.08); }
|
||||
.menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
.menu-item-info { flex: 1; }
|
||||
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
|
||||
.menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
|
||||
.menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
|
||||
.menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 250px 250px; gap: 0.5rem; }
|
||||
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transition: transform 0.4s, opacity 0.4s; cursor: pointer; }
|
||||
.gallery-grid img:hover { transform: scale(1.03); opacity: 0.85; }
|
||||
.gallery-grid img:first-child { grid-row: span 2; }
|
||||
|
||||
#location { background: var(--bg-card); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid rgba(212,168,83,0.08); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--text-muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.hours-table tr:last-child { border: none; }
|
||||
.address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
|
||||
.address strong { color: var(--gold); font-weight: 400; }
|
||||
|
||||
footer { background: #080604; padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
|
||||
footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; transform: scaleY(1.2); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
|
||||
.gallery-grid img:first-child { grid-row: span 1; }
|
||||
.about-img::after { display: none; }
|
||||
.about-img img { height: 300px; }
|
||||
.about-features { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section { padding: 4rem 1.2rem; }
|
||||
.hero-btns { flex-direction: column; align-items: center; }
|
||||
.btn-primary, .btn-ghost { width: 100%; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">Casa Alberto</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#gallery">Gallery</a></li>
|
||||
<li><a href="#location">Visit</a></li>
|
||||
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||
<h1>Casa Alberto</h1>
|
||||
<p class="hero-subtitle">Good food, good company</p>
|
||||
<p class="hero-desc">Traditional Spanish cuisine in the heart of Benalmádena. Fresh ingredients, authentic recipes, and a warm welcome every day.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#menu" class="btn-primary">View Menu</a>
|
||||
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator"><span></span></div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80" alt="Restaurant interior" loading="lazy">
|
||||
</div>
|
||||
<div class="about-text reveal">
|
||||
<p class="section-tag">Our Story</p>
|
||||
<h3>A local favourite for over 20 years</h3>
|
||||
<p>Casa Alberto has been serving the Benalmádena community since 2003. What started as a family kitchen has grown into one of the coast's most trusted spots for authentic Spanish cooking.</p>
|
||||
<p>We use fresh, local ingredients sourced daily from the market. Our paella is made the traditional way — slow-cooked on an open flame, with saffron and love. Whether it's a Sunday roast or a quick tapas lunch, you'll always feel at home here.</p>
|
||||
<p>Drop in anytime. There's always a table waiting for you.</p>
|
||||
<div class="about-features">
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh market ingredients</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Traditional recipes</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Homemade paella</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family atmosphere</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu">
|
||||
<div class="container">
|
||||
<p class="section-tag">Our Menu</p>
|
||||
<h2 class="section-title">Taste <em>Spain</em></h2>
|
||||
|
||||
<div class="menu-tabs">
|
||||
<button class="menu-tab active" onclick="showMenu('tapas')">Tapas</button>
|
||||
<button class="menu-tab" onclick="showMenu('carnes')">Carnes</button>
|
||||
<button class="menu-tab" onclick="showMenu('pescado')">Pescado</button>
|
||||
<button class="menu-tab" onclick="showMenu('paella')">Paella</button>
|
||||
<button class="menu-tab" onclick="showMenu('postres')">Postres</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<div class="menu-category active" id="menu-tapas">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1541529086526-db283c563270?w=200&q=70" alt="Patatas Bravas" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Patatas Bravas</span><span class="menu-item-price">€6.00</span></div>
|
||||
<p class="menu-item-desc">Crispy fried potatoes, spicy bravas sauce, aioli</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=200&q=70" alt="Jamón Ibérico" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Jamón Ibérico de Bellota</span><span class="menu-item-price">€14.00</span></div>
|
||||
<p class="menu-item-desc">Thinly sliced acorn-fed Iberian ham, picos bread</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Croquetas" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Croquetas de Jamón</span><span class="menu-item-price">€7.50</span></div>
|
||||
<p class="menu-item-desc">Homemade ham croquettes, crispy exterior, creamy interior</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563714948775-8f0b85b9c72f?w=200&q=70" alt="Gambas al Ajillo" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Gambas al Ajillo</span><span class="menu-item-price">€10.00</span></div>
|
||||
<p class="menu-item-desc">Prawns cooked in garlic and chili, olive oil, white wine</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-carnes">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1558030006-450675393462?w=200&q=70" alt="Solomillo" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Solomillo al Whisky</span><span class="menu-item-price">€16.00</span></div>
|
||||
<p class="menu-item-desc">Pork tenderloin in whisky sauce, caramelised onions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Entrecot" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Entrecot a la Parrilla</span><span class="menu-item-price">€19.00</span></div>
|
||||
<p class="menu-item-desc">Grilled ribeye, roasted peppers, chips, garlic butter</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=200&q=70" alt="Pollo" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Pollo al Ajillo</span><span class="menu-item-price">€12.00</span></div>
|
||||
<p class="menu-item-desc">Chicken pieces cooked in garlic, white wine, herbs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-pescado">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=200&q=70" alt="Bacalao" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Bacalao a la Miel</span><span class="menu-item-price">€15.00</span></div>
|
||||
<p class="menu-item-desc">Cod loin, honey glaze, baked until golden</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=200&q=70" alt="Fritura" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Fritura Malagueña</span><span class="menu-item-price">€13.00</span></div>
|
||||
<p class="menu-item-desc">Mixed fried fish — sardines, calamari, shrimp, aioli</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Atún" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Atún de Almadraba</span><span class="menu-item-price">€17.00</span></div>
|
||||
<p class="menu-item-desc">Fresh bluefin tuna, grilled with olive oil and herbs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-paella">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=200&q=70" alt="Paella" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Paella Valenciana</span><span class="menu-item-price">€12.00</span></div>
|
||||
<p class="menu-item-desc">Chicken, rabbit, green beans, butter beans, saffron. For 2 persons minimum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1534482421-64566f976cfa?w=200&q=70" alt="Arroz Negro" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Arroz Negro</span><span class="menu-item-price">€13.00</span></div>
|
||||
<p class="menu-item-desc">Black rice with cuttlefish, squid, ink, aioli. For 2 persons minimum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Arroz delSeñor" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Arroz delSeñor</span><span class="menu-item-price">€14.00</span></div>
|
||||
<p class="menu-item-desc">Seafood paella — prawns, mussels, squid, monkfish. For 2 persons minimum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-postres">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tarta" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Tarta de Queso Casera</span><span class="menu-item-price">€6.00</span></div>
|
||||
<p class="menu-item-desc">Homemade Basque burnt cheesecake</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Flan" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Flan Casero</span><span class="menu-item-price">€4.50</span></div>
|
||||
<p class="menu-item-desc">Traditional caramel custard, homemade daily</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=200&q=70" alt="Churros" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Churros con Chocolate</span><span class="menu-item-price">€5.00</span></div>
|
||||
<p class="menu-item-desc">Fresh churros, thick hot chocolate for dipping</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery">
|
||||
<div class="container">
|
||||
<p class="section-tag">Gallery</p>
|
||||
<h2 class="section-title">Our <em>Place</em></h2>
|
||||
<div class="gallery-grid reveal">
|
||||
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600&q=80" alt="Restaurant interior" loading="lazy">
|
||||
<img src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=400&q=80" alt="Paella" loading="lazy">
|
||||
<img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&q=80" alt="Dining" loading="lazy">
|
||||
<img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&q=80" alt="Plated food" loading="lazy">
|
||||
<img src="https://images.unsplash.com/photo-1579684947550-22e945225d9a?w=400&q=80" alt="Wine" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Visit Us</p>
|
||||
<h2 class="section-title">Find Your Way to <em>Casa Alberto</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="info-block reveal">
|
||||
<h3>Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday</td><td>12:00 — 23:00</td></tr>
|
||||
<tr><td>Tuesday</td><td>12:00 — 23:00</td></tr>
|
||||
<tr><td>Wednesday</td><td>12:00 — 23:00</td></tr>
|
||||
<tr><td>Thursday</td><td>12:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
|
||||
</table>
|
||||
<div class="address">
|
||||
<p><strong>📍 Address</strong></p>
|
||||
<p>Av. Antonio Machado, 108<br>29630 Benalmádena, Málaga<br>Spain</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-block reveal">
|
||||
<h3>Find Us on the Map</h3>
|
||||
<div style="border-radius:4px;overflow:hidden;border:1px solid rgba(212,168,83,0.2);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">Casa Alberto</p>
|
||||
<p>Av. Antonio Machado, 108 · 29630 Benalmádena · Spain</p>
|
||||
<p style="margin-top:1rem; opacity: 0.4;">© 2026 Casa Alberto. Made with ❤️ in Benalmádena.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
|
||||
|
||||
function showMenu(category) {
|
||||
document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById('menu-' + category).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
revealEls.forEach(el => revealObserver.observe(el));
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||
a.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(a.getAttribute('href'));
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Restaurant Website Templates — HostPioneers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--bg: #080809;
|
||||
--bg-card: #111114;
|
||||
--border: rgba(255,255,255,0.07);
|
||||
--text: #f0ede8;
|
||||
--muted: #6b6560;
|
||||
--gold: #c9a55a;
|
||||
--gold-dim: rgba(201,165,90,0.15);
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* ── HEADER ── */
|
||||
header { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,9,0.9); backdrop-filter: blur(16px); }
|
||||
.header-logo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
|
||||
.header-logo span { color: var(--gold); }
|
||||
.header-cta { background: var(--gold); color: #080809; padding: 0.55rem 1.5rem; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.3s; }
|
||||
.header-cta:hover { background: #e0bc72; transform: translateY(-1px); }
|
||||
|
||||
/* ── HERO ── */
|
||||
.hero { padding: 10rem 3rem 6rem; max-width: 860px; margin: 0 auto; text-align: center; }
|
||||
.hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.5rem; }
|
||||
.hero h1 em { font-style: italic; color: var(--gold); }
|
||||
.hero-desc { font-size: 0.95rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; font-weight: 300; }
|
||||
.hero-pricing { display: inline-flex; align-items: baseline; gap: 0.5rem; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); padding: 0.8rem 2rem; border-radius: 2px; }
|
||||
.hero-pricing .from { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.hero-pricing .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
|
||||
.hero-pricing .per { font-size: 0.75rem; color: var(--muted); }
|
||||
|
||||
/* ── DEMOS GRID ── */
|
||||
.demos-section { padding: 4rem 3rem 6rem; max-width: 1280px; margin: 0 auto; }
|
||||
.demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
||||
.demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; display: block; }
|
||||
.demo-card:hover { border-color: rgba(201,165,90,0.35); transform: translateY(-6px); }
|
||||
.demo-card:hover .demo-img img { transform: scale(1.04); }
|
||||
.demo-img { height: 200px; overflow: hidden; position: relative; }
|
||||
.demo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
|
||||
.demo-badge { position: absolute; top: 0.8rem; right: 0.8rem; background: rgba(8,8,9,0.75); backdrop-filter: blur(8px); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0.3rem 0.7rem; border-radius: 2px; border: 1px solid rgba(201,165,90,0.2); }
|
||||
.demo-info { padding: 1.4rem; }
|
||||
.demo-type { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
|
||||
.demo-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.demo-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
|
||||
.demo-link { font-size: 0.72rem; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; }
|
||||
.demo-link::after { content: '→'; transition: transform 0.2s; }
|
||||
.demo-card:hover .demo-link::after { transform: translateX(4px); }
|
||||
|
||||
/* ── WHAT'S INCLUDED ── */
|
||||
.included-section { padding: 5rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.included-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.included-header { text-align: center; margin-bottom: 3rem; }
|
||||
.included-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||
.included-header p { font-size: 0.85rem; color: var(--muted); }
|
||||
.included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
|
||||
.included-item { text-align: center; padding: 1.5rem 1rem; }
|
||||
.included-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
|
||||
.included-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
|
||||
.included-item h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
|
||||
.included-item p { font-size: 0.75rem; color: var(--muted); line-height: 1.6; }
|
||||
|
||||
/* ── PRICING ── */
|
||||
.pricing-section { padding: 6rem 3rem; max-width: 900px; margin: 0 auto; text-align: center; }
|
||||
.pricing-section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||
.pricing-section > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 3rem; }
|
||||
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
|
||||
.pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; }
|
||||
.pricing-card.featured { border-color: rgba(201,165,90,0.3); position: relative; }
|
||||
.pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; left: 2rem; background: var(--gold); color: #080809; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
|
||||
.pricing-card h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
|
||||
.pricing-card h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.pricing-card .price { font-size: 2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.3rem; }
|
||||
.pricing-card .price-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.5rem; }
|
||||
.pricing-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
|
||||
.pricing-card li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
|
||||
.pricing-card li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
|
||||
|
||||
/* ── MONTHLY RETAINER ── */
|
||||
.retainer-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
|
||||
.retainer-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.retainer-header { text-align: center; margin-bottom: 3.5rem; }
|
||||
.section-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
|
||||
.retainer-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||
.retainer-intro { font-size: 0.88rem; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.8; }
|
||||
.retainer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
|
||||
.retainer-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; text-align: center; transition: border-color 0.3s; position: relative; }
|
||||
.retainer-card.featured { border-color: rgba(201,165,90,0.3); }
|
||||
.retainer-card:hover { border-color: rgba(201,165,90,0.25); }
|
||||
.retainer-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
|
||||
.retainer-hours { font-size: 4rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 0.3rem; }
|
||||
.retainer-unit { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.2rem; }
|
||||
.retainer-price { font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
|
||||
.retainer-price span { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
|
||||
.retainer-equivalent { font-size: 0.7rem; color: var(--muted); margin-bottom: 1.5rem; }
|
||||
.retainer-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.retainer-features li { font-size: 0.8rem; color: var(--muted); padding-left: 1.2rem; position: relative; }
|
||||
.retainer-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 0.7rem; }
|
||||
.retainer-btn { background: transparent; border: 1px solid rgba(201,165,90,0.25); color: var(--gold); padding: 0.6rem 1.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; width: 100%; transition: all 0.3s; font-family: 'Inter', sans-serif; }
|
||||
.retainer-btn:hover { background: rgba(201,165,90,0.08); border-color: rgba(201,165,90,0.4); }
|
||||
.retainer-btn.primary { background: var(--gold); color: #080809; border-color: var(--gold); }
|
||||
.retainer-btn.primary:hover { background: #e0bc72; }
|
||||
.retainer-note { text-align: center; font-size: 0.75rem; color: var(--muted); max-width: 500px; margin: 0 auto; line-height: 1.7; }
|
||||
|
||||
/* ── CONTACT FORM ── */
|
||||
.contact-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
|
||||
.contact-inner { max-width: 640px; margin: 0 auto; }
|
||||
.contact-header { text-align: center; margin-bottom: 2.5rem; }
|
||||
.contact-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||
.contact-header p { font-size: 0.85rem; color: var(--muted); }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
.form-full { grid-column: 1 / -1; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.form-group label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
|
||||
.form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.85rem; padding: 0.7rem 0.9rem; width: 100%; transition: border-color 0.2s; }
|
||||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: rgba(201,165,90,0.4); }
|
||||
.form-group textarea { resize: vertical; min-height: 100px; }
|
||||
.form-submit { background: var(--gold); color: #080809; border: none; padding: 0.9rem 2.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; margin-top: 1rem; transition: all 0.3s; font-family: 'Inter', sans-serif; }
|
||||
.form-submit:hover { background: #e0bc72; transform: translateY(-1px); }
|
||||
.form-note { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.8rem; }
|
||||
|
||||
/* ── FOOTER ── */
|
||||
footer { padding: 2.5rem 3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
|
||||
footer p { font-size: 0.72rem; color: var(--muted); }
|
||||
footer a { color: var(--gold); }
|
||||
|
||||
/* ── SUCCESS STATE ── */
|
||||
.form-success { display: none; text-align: center; padding: 3rem; }
|
||||
.form-success.show { display: block; }
|
||||
.form-success h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
|
||||
.form-success p { color: var(--muted); font-size: 0.85rem; }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 900px) {
|
||||
.demos-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.included-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.pricing-cards { grid-template-columns: 1fr; }
|
||||
.retainer-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
|
||||
header { padding: 1.2rem 1.5rem; }
|
||||
.hero { padding: 8rem 1.5rem 4rem; }
|
||||
.demos-section, .included-section, .pricing-section, .retainer-section, .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.demos-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div>
|
||||
<button class="header-cta" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Get Your Website</button>
|
||||
</header>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p>
|
||||
<h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1>
|
||||
<p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p>
|
||||
<div class="hero-pricing">
|
||||
<span class="from">From</span>
|
||||
<span class="price">€199</span>
|
||||
<span class="per">one-time setup</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEMOS -->
|
||||
<section class="demos-section">
|
||||
<div class="demos-grid">
|
||||
|
||||
<a href="/demos/ristorante/italian/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian restaurant" loading="lazy">
|
||||
<span class="demo-badge">Italian</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Italian · Pizza · Pasta</p>
|
||||
<h4 class="demo-name">Trattoria Da Marco</h4>
|
||||
<p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy">
|
||||
<span class="demo-badge">Steakhouse</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Steakhouse · Grill · Wine</p>
|
||||
<h4 class="demo-name">The Argentine Grill</h4>
|
||||
<p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/ristorante/indian/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian restaurant" loading="lazy">
|
||||
<span class="demo-badge">Indian</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Indian · Tandoor · Curry</p>
|
||||
<h4 class="demo-name">Maharaja Spice</h4>
|
||||
<p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/ristorante/spanish/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish restaurant" loading="lazy">
|
||||
<span class="demo-badge">Spanish</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Spanish · Tapas · Mediterranean</p>
|
||||
<h4 class="demo-name">La Bodega del Mar</h4>
|
||||
<p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/ristorante/sushi/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese restaurant" loading="lazy">
|
||||
<span class="demo-badge">Japanese</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Japanese · Omakase · Izakaya</p>
|
||||
<h4 class="demo-name">Kaito Sushi</h4>
|
||||
<p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/demos/ristorante/pizza/" class="demo-card" target="_blank">
|
||||
<div class="demo-img">
|
||||
<img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza restaurant" loading="lazy">
|
||||
<span class="demo-badge">Pizza</span>
|
||||
</div>
|
||||
<div class="demo-info">
|
||||
<p class="demo-type">Pizza · Casual · Italian</p>
|
||||
<h4 class="demo-name">Pizzeria da Marco</h4>
|
||||
<p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p>
|
||||
<div class="demo-link">View Template</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT'S INCLUDED -->
|
||||
<section class="included-section">
|
||||
<div class="included-inner">
|
||||
<div class="included-header">
|
||||
<h2>Everything included</h2>
|
||||
<p>One price. No surprises. Your site live in days.</p>
|
||||
</div>
|
||||
<div class="included-grid">
|
||||
<div class="included-item">
|
||||
<div class="included-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<h4>Custom Design</h4>
|
||||
<p>Built for your restaurant type — not a generic template</p>
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-icon">
|
||||
<svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
|
||||
</div>
|
||||
<h4>Mobile Ready</h4>
|
||||
<p>Perfect on every device — phone, tablet, desktop</p>
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-icon">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<h4>AI Menu Chat</h4>
|
||||
<p>Customers ask the menu in plain language, AI answers</p>
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
</div>
|
||||
<h4>Email Support</h4>
|
||||
<p>Direct line to us — fast replies, no bots</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRICING -->
|
||||
<section class="pricing-section">
|
||||
<h2>Website setup — one time</h2>
|
||||
<p>Choose your template tier. All include hosting for year one.</p>
|
||||
<div class="pricing-cards">
|
||||
<div class="pricing-card">
|
||||
<h3>Essential</h3>
|
||||
<h4>Your Restaurant Website</h4>
|
||||
<div class="price">€499</div>
|
||||
<div class="price-note">One-time · then €25/mo hosting</div>
|
||||
<ul>
|
||||
<li>Custom restaurant template</li>
|
||||
<li>Menu + photos + content</li>
|
||||
<li>Google Maps + contact form</li>
|
||||
<li>Mobile optimised</li>
|
||||
<li>Social media links</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pricing-card featured">
|
||||
<h3>Professional</h3>
|
||||
<h4>Website + AI Extras</h4>
|
||||
<div class="price">€699</div>
|
||||
<div class="price-note">One-time · then €30/mo all-in</div>
|
||||
<ul>
|
||||
<li>Everything in Essential</li>
|
||||
<li>AI menu chatbot (24/7)</li>
|
||||
<li>AI booking assistant</li>
|
||||
<li>Multi-language menu option</li>
|
||||
<li>Priority support line</li>
|
||||
<li>1 year hosting included</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MONTHLY RETAINER -->
|
||||
<section class="retainer-section">
|
||||
<div class="retainer-inner">
|
||||
<div class="retainer-header">
|
||||
<p class="section-eyebrow">Monthly Support Retainer</p>
|
||||
<h2>Keep your site fresh — prepaid hours</h2>
|
||||
<p class="retainer-intro">Need menu updates, seasonal changes, new photos, or new sections? Prepay hours and use them when you need. Cancel anytime — no lock-in.</p>
|
||||
</div>
|
||||
<div class="retainer-grid">
|
||||
<div class="retainer-card">
|
||||
<div class="retainer-badge">Starter</div>
|
||||
<div class="retainer-hours">2</div>
|
||||
<div class="retainer-unit">hours / month</div>
|
||||
<div class="retainer-price">€69<span>/mo</span></div>
|
||||
<div class="retainer-equivalent">≈ €35/hr</div>
|
||||
<ul class="retainer-features">
|
||||
<li>Menu updates</li>
|
||||
<li>Seasonal changes</li>
|
||||
<li>Photo swaps</li>
|
||||
<li>Email support</li>
|
||||
</ul>
|
||||
<button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Starter</button>
|
||||
</div>
|
||||
<div class="retainer-card featured">
|
||||
<div class="retainer-badge">Standard</div>
|
||||
<div class="retainer-hours">4</div>
|
||||
<div class="retainer-unit">hours / month</div>
|
||||
<div class="retainer-price">€119<span>/mo</span></div>
|
||||
<div class="retainer-equivalent">≈ €30/hr</div>
|
||||
<ul class="retainer-features">
|
||||
<li>Everything in Starter</li>
|
||||
<li>New menu sections</li>
|
||||
<li>Layout adjustments</li>
|
||||
<li>New pages (about, events)</li>
|
||||
<li>Priority response</li>
|
||||
</ul>
|
||||
<button class="retainer-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Standard</button>
|
||||
</div>
|
||||
<div class="retainer-card">
|
||||
<div class="retainer-badge">Pro</div>
|
||||
<div class="retainer-hours">8</div>
|
||||
<div class="retainer-unit">hours / month</div>
|
||||
<div class="retainer-price">€219<span>/mo</span></div>
|
||||
<div class="retainer-equivalent">≈ €27/hr</div>
|
||||
<ul class="retainer-features">
|
||||
<li>Everything in Standard</li>
|
||||
<li>Full page redesigns</li>
|
||||
<li>New features + integrations</li>
|
||||
<li>AI training for your restaurant</li>
|
||||
<li>Dedicated Slack channel</li>
|
||||
</ul>
|
||||
<button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Pro</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="retainer-note">Unused hours roll over to next month. Cancel anytime by sending one email. No contracts, no lock-in.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT FORM -->
|
||||
<section class="contact-section" id="contact">
|
||||
<div class="contact-inner">
|
||||
<div class="contact-header">
|
||||
<h2>Start your website</h2>
|
||||
<p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
|
||||
</div>
|
||||
|
||||
<form id="contactForm" onsubmit="handleSubmit(event)">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Restaurant Name</label>
|
||||
<input type="text" name="restaurant" placeholder="La Casa Grande" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Contact Name</label>
|
||||
<input type="text" name="name" placeholder="Javier" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phone</label>
|
||||
<input type="tel" name="phone" placeholder="+34 600 000 000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" placeholder="javier@lacasa.es" required>
|
||||
</div>
|
||||
<div class="form-group form-full">
|
||||
<label>Restaurant Type</label>
|
||||
<select name="type">
|
||||
<option value="">Select type...</option>
|
||||
<option value="spanish">Spanish / Tapas</option>
|
||||
<option value="italian">Italian / Pizza / Pasta</option>
|
||||
<option value="steakhouse">Steakhouse / Grill</option>
|
||||
<option value="indian">Indian / Asian</option>
|
||||
<option value="sushi">Japanese / Sushi</option>
|
||||
<option value="seafood">Seafood</option>
|
||||
<option value="other">Fusion / Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-full">
|
||||
<label>Tell us about your restaurant (optional)</label>
|
||||
<textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="form-submit">Send Enquiry</button>
|
||||
<p class="form-note">No spam. No commitment. Just a real conversation.</p>
|
||||
</form>
|
||||
|
||||
<div class="form-success" id="formSuccess">
|
||||
<h3>Message sent!</h3>
|
||||
<p>We'll be in touch within 24 hours. Check your email.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 HostPioneers.com — HostPioneers, Benalmádena Costa</p>
|
||||
<p><a href="https://hostpioneers.com">hostpioneers.com</a></p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const form = document.getElementById('contactForm');
|
||||
const success = document.getElementById('formSuccess');
|
||||
const submitBtn = form.querySelector('.form-submit');
|
||||
const data = new FormData(form);
|
||||
|
||||
// Show loading state
|
||||
submitBtn.textContent = 'Sending…';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Send to Telegram HP Alerts in background
|
||||
fetch('/autojobs/api/contact/telegram', {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams({
|
||||
name: data.get('name'),
|
||||
email: data.get('email'),
|
||||
phone: data.get('phone'),
|
||||
type: data.get('type') || 'other',
|
||||
restaurant: data.get('restaurant'),
|
||||
message: data.get('message')
|
||||
})
|
||||
}).catch(function() {
|
||||
// Telegram failure is non-fatal — user still sees success
|
||||
}).finally(function() {
|
||||
// Always show success regardless of Telegram result
|
||||
form.style.display = 'none';
|
||||
success.classList.add('show');
|
||||
success.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maharaja Spice — Indian Restaurant Benalmádena</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root { --bg: #0f0a08; --bg-card: #1c1410; --bg-warm: #231a14; --gold: #d4a843; --gold-light: #e8c97a; --red: #c0392b; --maroon: #6b1e1e; --cream: #f5efe6; --text: #e0d5c8; --text-muted: #9a8a78; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
/* DECORATIVE MANDALA PATTERN */
|
||||
.mandala-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.12) 0%, transparent 70%); pointer-events: none; }
|
||||
|
||||
/* NAV */
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
|
||||
nav.scrolled { background: rgba(15,10,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.15); }
|
||||
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); font-weight: 700; text-decoration: none; letter-spacing: 0.05em; }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
.nav-cta { background: var(--maroon); color: var(--gold); padding: 0.5rem 1.2rem; border: 1px solid var(--gold); border-radius: 2px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
|
||||
.nav-cta:hover { background: var(--gold); color: var(--bg); text-decoration: none; }
|
||||
|
||||
/* HERO */
|
||||
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,10,8,0.3) 0%, rgba(15,10,8,0.85) 65%, var(--bg) 100%), url('https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||
.hero-ornament { color: var(--gold); font-size: 1.5rem; margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1.0; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--gold); color: var(--bg); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid rgba(212,168,67,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,67,0.08); text-decoration: none; }
|
||||
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
|
||||
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 700; }
|
||||
.section-title em { font-style: italic; color: var(--gold); }
|
||||
|
||||
/* THALI / SPECIALTIES */
|
||||
#specialties { background: var(--bg-card); }
|
||||
.thali-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
|
||||
.thali-card { background: var(--bg); border: 1px solid rgba(212,168,67,0.12); border-radius: 8px; overflow: hidden; transition: border-color 0.3s; }
|
||||
.thali-card:hover { border-color: var(--gold); }
|
||||
.thali-card img { width: 100%; height: 180px; object-fit: cover; }
|
||||
.thali-info { padding: 1.2rem; }
|
||||
.thali-info .thali-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; }
|
||||
.thali-info .thali-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.6; }
|
||||
.thali-info .thali-price { font-size: 1.05rem; color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* MENU */
|
||||
.menu-section { background: var(--bg-warm); }
|
||||
.menu-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
|
||||
.menu-col h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--gold); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(212,168,67,0.2); }
|
||||
.menu-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
|
||||
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
|
||||
.menu-item-name { font-size: 0.9rem; color: var(--text); }
|
||||
.menu-item-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
|
||||
.menu-item-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
|
||||
|
||||
/* TANDOOR */
|
||||
#tandoor { background: var(--bg-card); }
|
||||
.tandoor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
|
||||
.tandoor-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }
|
||||
.tandoor-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--cream); margin-bottom: 1rem; }
|
||||
.tandoor-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.7; }
|
||||
.tandoor-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
|
||||
.tandoor-item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(212,168,67,0.08); }
|
||||
.tandoor-item span:first-child { color: var(--text); }
|
||||
.tandoor-item span:last-child { color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* REVIEWS */
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||
.review-card { background: var(--bg-card); border: 1px solid rgba(212,168,67,0.1); border-radius: 8px; padding: 1.5rem; }
|
||||
.review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
|
||||
.review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
|
||||
.review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
|
||||
|
||||
/* LOCATION */
|
||||
#location { background: var(--bg-card); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid rgba(212,168,67,0.08); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--text-muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.address-block { margin-top: 2rem; }
|
||||
.address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
|
||||
.address-block strong { color: var(--gold); font-weight: 400; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: #080504; padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: var(--gold); font-weight: 700; margin-bottom: 0.5rem; }
|
||||
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1rem; }
|
||||
footer p { font-size: 0.8rem; color: var(--text-muted); }
|
||||
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.menu-cols, .tandoor-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.tandoor-items { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">Maharaja Spice</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#specialties">Specialties</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#tandoor">Tandoor</a></li>
|
||||
<li><a href="#reviews">Reviews</a></li>
|
||||
<li><a href="#location" class="nav-cta">Book a Table</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="mandala-top"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-ornament">✦ ✦ ✦</div>
|
||||
<h1>Maharaja Spice</h1>
|
||||
<p class="hero-subtitle">Royal Indian Cuisine · Benalmádena Costa</p>
|
||||
<p class="hero-desc">Experience the flavours of India, reimagined. From the smoky clay ovens of the Punjab to the aromatic spice markets of Kerala — every dish tells a story of tradition, passion, and the finest ingredients.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#menu" class="btn-primary">Explore Menu</a>
|
||||
<a href="#location" class="btn-ghost">Book a Table</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="specialties">
|
||||
<div class="container">
|
||||
<p class="section-tag">Chef's Specialties</p>
|
||||
<h2 class="section-title">Signature <em>Dishes</em></h2>
|
||||
<div class="thali-grid">
|
||||
<div class="thali-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=500&q=75" alt="Butter Chicken" loading="lazy">
|
||||
<div class="thali-info">
|
||||
<div class="thali-name">Butter Chicken</div>
|
||||
<div class="thali-desc">Tandoor-charred chicken in a velvety tomato-cream sauce with kashmiri spices. Our most loved dish for 15 years.</div>
|
||||
<div class="thali-price">€14.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thali-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=500&q=75" alt="Lamb Rogan Josh" loading="lazy">
|
||||
<div class="thali-info">
|
||||
<div class="thali-name">Lamb Rogan Josh</div>
|
||||
<div class="thali-desc">Slow-braised lamb shoulder in aromatic Kashmiri chilli and yogurt gravy. A dish fit for royalty.</div>
|
||||
<div class="thali-price">€16.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thali-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&q=75" alt="Biryani" loading="lazy">
|
||||
<div class="thali-info">
|
||||
<div class="thali-name">Hyderabadi Biryani</div>
|
||||
<div class="thali-desc">Fragrant basmati rice layered with spiced meat, saffron, and fried onions. Cooked dum-style in sealed clay pot.</div>
|
||||
<div class="thali-price">€15.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu" class="menu-section">
|
||||
<div class="container">
|
||||
<p class="section-tag">Our Menu</p>
|
||||
<h2 class="section-title">Taste of <em>India</em></h2>
|
||||
<div class="menu-cols">
|
||||
<div class="menu-col">
|
||||
<h3>Starters</h3>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Samosa Chaat</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Crispy samosas, chickpea curry, tamarind, yogurt</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Paneer Tikka</span><span class="menu-item-price">€9.50</span></div><div class="menu-item-desc">Chargrilled cottage cheese, mint chutney</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Onion Bhaji</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Crispy onion fritters, mango chutney</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka</span><span class="menu-item-price">€10.00</span></div><div class="menu-item-desc">Tandoor-grilled chicken, seekh chutney</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Sheek Kebab</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Minced lamb, coriander, ginger, charcoal grill</div></div>
|
||||
</div>
|
||||
<div class="menu-col">
|
||||
<h3>Curries</h3>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka Masala</span><span class="menu-item-price">€13.50</span></div><div class="menu-item-desc">Tomato cream sauce, kashmiri spices</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Rogan Josh</span><span class="menu-item-price">€15.50</span></div><div class="menu-item-desc">Slow-braised lamb, Kashmiri chilli</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Palak Paneer</span><span class="menu-item-price">€12.00</span></div><div class="menu-item-desc">Spinach curry, fresh paneer, garlic, cumin</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Dal Makhani</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Black lentils, butter, cream — slow-cooked overnight</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Prawn Curry</span><span class="menu-item-price">€16.50</span></div><div class="menu-item-desc">Tiger prawns, coconut, curry leaf, mustard seed</div></div>
|
||||
</div>
|
||||
<div class="menu-col">
|
||||
<h3>Breads & Rice</h3>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Garlic Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Tandoor bread, fresh garlic, butter</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Butter Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Soft leavened bread, clarified butter</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Cheese Naan</span><span class="menu-item-price">€5.00</span></div><div class="menu-item-desc">Stuffed with cheddar and paneer</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Keema Naan</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Stuffed with spiced minced lamb</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Basmati Rice</span><span class="menu-item-price">€3.50</span></div><div class="menu-item-desc">Fragrant long-grain, steamed</div></div>
|
||||
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Saffron Biryani</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Basmati, saffron, fried onions</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tandoor">
|
||||
<div class="container">
|
||||
<div class="tandoor-grid">
|
||||
<div class="tandoor-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1596797038530-2c107229654b?w=800&q=80" alt="Tandoor oven" loading="lazy">
|
||||
</div>
|
||||
<div class="tandoor-text reveal">
|
||||
<p class="section-tag">From the Clay Oven</p>
|
||||
<h3>The Heart of Indian Cooking</h3>
|
||||
<p>Our tandoor is a traditional Indian clay oven, burning at over 450°C. It gives our breads their distinctive char, keeps our meats impossibly tender inside, and fills the restaurant with the irresistible aroma of saffron, charcoal, and roasting spices.</p>
|
||||
<p>Every morning our kitchen prepares fresh dough and marinates meats in our house spice blend — a recipe passed down three generations.</p>
|
||||
<div class="tandoor-items">
|
||||
<div class="tandoor-item"><span>Tandoori Chicken</span><span>€13.00</span></div>
|
||||
<div class="tandoor-item"><span>Seekh Kebab</span><span>€12.00</span></div>
|
||||
<div class="tandoor-item"><span>Paneer Tikka</span><span>€11.00</span></div>
|
||||
<div class="tandoor-item"><span>Garlic Naan</span><span>€4.00</span></div>
|
||||
<div class="tandoor-item"><span>Chicken Tikka</span><span>€13.50</span></div>
|
||||
<div class="tandoor-item"><span>Lamb Chops</span><span>€16.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reviews">
|
||||
<div class="container">
|
||||
<p class="section-tag">Reviews</p>
|
||||
<h2 class="section-title">What Our <em>Guests</em> Say</h2>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"The biryani is the best I've had outside India. Fragrant, perfectly spiced, the rice grains are separate and fluffy. The tandoori chicken had that authentic charcoal flavour. Truly exceptional."</p>
|
||||
<div class="review-author">— Priya S., Google</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"We eat here every week. The butter chicken is consistently perfect — creamy, spiced just right, generous portions. The staff always remembers us. Feels like a home from home."</p>
|
||||
<div class="review-author">— Michael R., TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"The lamb rogan josh transported me straight to Kashmir. Slow-braised to perfection, falling off the bone. The ambiance is warm and the service is impeccable. A real find."</p>
|
||||
<div class="review-author">— Anna K., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Visit Us</p>
|
||||
<h2 class="section-title">Find Your Way to <em>Maharaja Spice</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="reveal">
|
||||
<h3 style="font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday — Thursday</td><td>18:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
|
||||
</table>
|
||||
<div class="address-block">
|
||||
<p><strong>📍 Address</strong></p>
|
||||
<p>Av. Antonio Machado, 116<br>29630 Benalmádena Costa<br>Spain</p>
|
||||
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
|
||||
<p>+34 952 569 012<br>info@maharajaspice.es</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<div style="border-radius:8px;overflow:hidden;border:1px solid rgba(212,168,67,0.2);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">Maharaja Spice</p>
|
||||
<p class="footer-tagline">Royal Indian Cuisine · Benalmádena Costa</p>
|
||||
<p>Av. Antonio Machado, 116 · 29630 Benalmádena · +34 952 569 012</p>
|
||||
<p style="margin-top:1rem;opacity:0.4;">© 2026 Maharaja Spice. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trattoria Da Mario — Authentic Italian Kitchen</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root { --bg: #0a0808; --bg-card: #181412; --bg-dark: #1a1510; --cream: #f5efe6; --gold: #c9a55a; --gold-light: #dfc07a; --red: #8b1a1a; --text: #e8e0d5; --text-muted: #9a8f82; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
/* NAV */
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
|
||||
nav.scrolled { background: rgba(10,8,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,165,90,0.15); }
|
||||
.nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
.nav-cta { background: var(--red); color: white !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
|
||||
.nav-cta:hover { background: #a02020 !important; }
|
||||
|
||||
/* HERO */
|
||||
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,8,8,0.3) 0%, rgba(10,8,8,0.7) 55%, rgba(10,8,8,1) 100%), url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--gold); color: var(--bg); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid rgba(201,165,90,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,165,90,0.08); }
|
||||
|
||||
/* SECTIONS */
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
|
||||
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||
.section-title em { font-style: italic; color: var(--gold); }
|
||||
|
||||
/* ABOUT */
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||
.about-img { position: relative; border-radius: 4px; overflow: hidden; }
|
||||
.about-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
|
||||
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||
.about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
|
||||
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
|
||||
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
|
||||
.about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
|
||||
|
||||
/* MENU */
|
||||
#menu { background: var(--bg-card); }
|
||||
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
|
||||
.menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(201,165,90,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
|
||||
.menu-tab:first-child { border-radius: 2px 0 0 2px; }
|
||||
.menu-tab:last-child { border-radius: 0 2px 2px 0; }
|
||||
.menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
|
||||
.menu-category { display: none; }
|
||||
.menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
||||
.menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(201,165,90,0.08); }
|
||||
.menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
.menu-item-info { flex: 1; }
|
||||
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
|
||||
.menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
|
||||
.menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
|
||||
.menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
/* WINE */
|
||||
.wine-section { background: var(--bg-dark); }
|
||||
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
||||
.wine-item { text-align: center; padding: 1.5rem; border: 1px solid rgba(201,165,90,0.1); border-radius: 4px; }
|
||||
.wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||
.wine-item .wine-region { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||
.wine-item .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* REVIEWS */
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.review-card { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.1); border-radius: 8px; padding: 1.5rem; }
|
||||
.review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
|
||||
.review-card .review-text { font-size: 0.9rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
|
||||
.review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
|
||||
|
||||
/* LOCATION */
|
||||
#location { background: var(--bg-card); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid rgba(201,165,90,0.08); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--text-muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.hours-table tr:last-child { border: none; }
|
||||
.address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
|
||||
.address strong { color: var(--gold); font-weight: 400; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: #060404; padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
|
||||
footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* MOBILE */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.about-img::after { display: none; }
|
||||
.about-img img { height: 280px; }
|
||||
.about-features { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
section { padding: 4rem 1.2rem; }
|
||||
.hero-btns { flex-direction: column; align-items: center; }
|
||||
.btn-primary, .btn-ghost { width: 100%; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">Trattoria Da Mario</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#wine">Wine List</a></li>
|
||||
<li><a href="#reviews">Reviews</a></li>
|
||||
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||
<h1>Trattoria<br>Da Mario</h1>
|
||||
<p class="hero-subtitle">Nonna's kitchen, made with amore</p>
|
||||
<p class="hero-desc">Wood-fired pizza, hand-rolled pasta, and recipes from Naples since 1995. Fresh ingredients flown in from Italy every week.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#menu" class="btn-primary">View Menu</a>
|
||||
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Italian chef" loading="lazy">
|
||||
</div>
|
||||
<div class="about-text reveal">
|
||||
<p class="section-tag">Our Story</p>
|
||||
<h3>Three generations of Italian cooking</h3>
|
||||
<p>Trattoria Da Mario opened in 1995, founded by Mario Rossi who moved from Naples to the Costa del Sol. What began as a small kitchen serving the local Italian community has become Benalmádena's favourite Italian table.</p>
|
||||
<p>Every morning, our kitchen starts with fresh pasta made by hand — just like Nonna taught Mario. Our pizzas are cooked in a traditional wood-fired oven built from Neapolitan bricks. We source our ingredients from Italy: San Marzano tomatoes, buffalo mozzarella from Campania, DOP olive oil from Liguria.</p>
|
||||
<p>This is not fine dining. This is family cooking, served with warmth.</p>
|
||||
<div class="about-features">
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Wood-fired oven</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh pasta daily</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Italian imports</div>
|
||||
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family recipes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu">
|
||||
<div class="container">
|
||||
<p class="section-tag">Our Menu</p>
|
||||
<h2 class="section-title">The Taste of <em>Italy</em></h2>
|
||||
|
||||
<div class="menu-tabs">
|
||||
<button class="menu-tab active" onclick="showMenu('antipasti')">Antipasti</button>
|
||||
<button class="menu-tab" onclick="showMenu('pasta')">Pasta</button>
|
||||
<button class="menu-tab" onclick="showMenu('pizza')">Pizza</button>
|
||||
<button class="menu-tab" onclick="showMenu('secondi')">Secondi</button>
|
||||
<button class="menu-tab" onclick="showMenu('dolci')">Dolci</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<div class="menu-category active" id="menu-antipasti">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1541014741259-de529411b96a?w=200&q=70" alt="Bruschetta" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Bruschetta Pomodoro</span><span class="menu-item-price">€7.00</span></div>
|
||||
<p class="menu-item-desc">Grilled ciabatta, vine tomatoes, fresh basil, garlic, extra virgin olive oil</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=200&q=70" alt="Carpaccio" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Carpaccio di Manzo</span><span class="menu-item-price">€12.00</span></div>
|
||||
<p class="menu-item-desc">Thinly sliced beef, arugula, shaved Parmigiano, truffle oil, capers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Burrata" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Burrata Pugliese</span><span class="menu-item-price">€13.50</span></div>
|
||||
<p class="menu-item-desc">Creamy burrata, San Marzano tomatoes, 25-year balsamic, fresh basil</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=200&q=70" alt="Calamari" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Calamari Fritti</span><span class="menu-item-price">€10.00</span></div>
|
||||
<p class="menu-item-desc">Lightly fried squid rings, lemon aioli, marinara sauce</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-pasta">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=200&q=70" alt="Carbonara" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Spaghetti Carbonara</span><span class="menu-item-price">€14.00</span></div>
|
||||
<p class="menu-item-desc">Guanciale, egg yolk, Pecorino Romano, black pepper — the Roman way</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Cacio e Pepe" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Tonnarelli Cacio e Pepe</span><span class="menu-item-price">€13.50</span></div>
|
||||
<p class="menu-item-desc">Square spaghetti, Pecorino Romano, Tellicherry black pepper</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=200&q=70" alt="Ragù" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Pappardelle al Ragù</span><span class="menu-item-price">€15.50</span></div>
|
||||
<p class="menu-item-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, Parmigiano</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=200&q=70" alt="Gnocchi" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Gnocchi alla Sorrentina</span><span class="menu-item-price">€13.00</span></div>
|
||||
<p class="menu-item-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in oven</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-pizza">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&q=70" alt="Margherita" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Margherita DOP</span><span class="menu-item-price">€11.00</span></div>
|
||||
<p class="menu-item-desc">San Marzano tomatoes, buffalo mozzarella, fresh basil, olive oil</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=200&q=70" alt="Diavola" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Diavola</span><span class="menu-item-price">€13.50</span></div>
|
||||
<p class="menu-item-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, chili flakes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=200&q=70" alt="Quattro Formaggi" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Quattro Formaggi</span><span class="menu-item-price">€13.00</span></div>
|
||||
<p class="menu-item-desc">Mozzarella, gorgonzola, Parmigiano, taleggio — a cheese lover's dream</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=200&q=70" alt="Tartufo" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Pizza Tartufo</span><span class="menu-item-price">€17.00</span></div>
|
||||
<p class="menu-item-desc">Black truffle cream, mozzarella, fresh mushrooms, truffle oil</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-secondi">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Branzino" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Branzino al Forno</span><span class="menu-item-price">€22.00</span></div>
|
||||
<p class="menu-item-desc">Whole roasted sea bass, lemon, capers, olives, cherry tomatoes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Bistecca" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Bistecca alla Fiorentina</span><span class="menu-item-price">€28.00</span></div>
|
||||
<p class="menu-item-desc">500g T-bone steak, rosemary, garlic, Tuscan olive oil, grilled over oak</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-category" id="menu-dolci">
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tiramisù" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Tiramisù della Casa</span><span class="menu-item-price">€7.00</span></div>
|
||||
<p class="menu-item-desc">Our signature — mascarpone, espresso-soaked savoiardi, cocoa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1606313564200-e75d5e30476c?w=200&q=70" alt="Cannoli" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Cannoli Siciliani</span><span class="menu-item-price">€6.00</span></div>
|
||||
<p class="menu-item-desc">Crispy shells, sweet ricotta, pistachios, dark chocolate chips</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Panna Cotta" loading="lazy">
|
||||
<div class="menu-item-info">
|
||||
<div class="menu-item-header"><span class="menu-item-name">Panna Cotta</span><span class="menu-item-price">€6.50</span></div>
|
||||
<p class="menu-item-desc">Vanilla bean cream, wild berry compote, fresh mint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wine" class="wine-section">
|
||||
<div class="container">
|
||||
<p class="section-tag">Wine List</p>
|
||||
<h2 class="section-title">A Glass of <em>Italy</em></h2>
|
||||
<div class="wine-grid">
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Chianti Classico</div>
|
||||
<div class="wine-region">Tuscany</div>
|
||||
<div class="wine-price">from €18/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Barolo DOCG</div>
|
||||
<div class="wine-region">Piedmont</div>
|
||||
<div class="wine-price">from €32/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Prosecco di Valdobbiadene</div>
|
||||
<div class="wine-region">Veneto</div>
|
||||
<div class="wine-price">from €22/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Montepulciano d'Abruzzo</div>
|
||||
<div class="wine-region">Abruzzo</div>
|
||||
<div class="wine-price">from €16/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Vermentino di Sardegna</div>
|
||||
<div class="wine-region">Sardinia</div>
|
||||
<div class="wine-price">from €20/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Amarone della Valpolicella</div>
|
||||
<div class="wine-region">Veneto</div>
|
||||
<div class="wine-price">from €45/bottle</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reviews">
|
||||
<div class="container">
|
||||
<p class="section-tag">Reviews</p>
|
||||
<h2 class="section-title">What Our <em>Guests</em> Say</h2>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"The best carbonara I've had outside Italy. The pasta is made fresh every day — you can taste the difference. We come here every Sunday with the family."</p>
|
||||
<div class="review-author">— Sarah M., TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"Found this gem by accident. The wood-fired pizza is incredible — thin crust, perfect char. The tiramisù is homemade and the best I've had in Spain."</p>
|
||||
<div class="review-author">— James K., Google</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"Mario himself came out to greet us. Such warm hospitality. The burrata is heavenly and the wine list has great Italian options. A real neighbourhood trattoria."</p>
|
||||
<div class="review-author">— Elena R., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Visit Us</p>
|
||||
<h2 class="section-title">Find Your Way to <em>Our Table</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="info-block reveal">
|
||||
<h3>Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday</td><td>Closed</td></tr>
|
||||
<tr><td>Tuesday — Thursday</td><td>18:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>12:00 — 22:00</td></tr>
|
||||
</table>
|
||||
<div class="address">
|
||||
<p><strong>📍 Address</strong></p>
|
||||
<p>Av. Antonio Machado, 108<br>29630 Benalmádena Costa<br>Spain</p>
|
||||
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
|
||||
<p>+34 952 567 890</p>
|
||||
<p>info@trattoriadamario.es</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-block reveal">
|
||||
<h3>Find Us on the Map</h3>
|
||||
<div style="border-radius4px;overflow:hidden;border:1px solid rgba(201,165,90,0.2);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">Trattoria Da Mario</p>
|
||||
<p>Av. Antonio Machado, 108 · 29630 Benalmádena · +34 952 567 890</p>
|
||||
<p style="margin-top:1rem; opacity: 0.4;">© 2026 Trattoria Da Mario. Made with ❤️ in Benalmádena.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
|
||||
|
||||
function showMenu(category) {
|
||||
document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById('menu-' + category).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
revealEls.forEach(el => revealObserver.observe(el));
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||
a.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(a.getAttribute('href'));
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pizzeria da Marco — Artisan Pizza & Pasta</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--green: #3d8c40;
|
||||
--red: #c0392b;
|
||||
--cream: #faf3e8;
|
||||
--dark: #1a1210;
|
||||
--warm: #2d1f1a;
|
||||
--gold: #d4a843;
|
||||
--text: #e8ddd0;
|
||||
--muted: #9a8a78;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
/* ITALIAN FLAG ACCENT */
|
||||
.flag-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--green) 33%, var(--cream) 33%, var(--cream) 66%, var(--red) 66%); }
|
||||
|
||||
/* NAV */
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
|
||||
nav.scrolled { background: rgba(26,18,16,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.1); }
|
||||
.nav-logo { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); font-weight: 900; text-decoration: none; font-style: italic; }
|
||||
.nav-logo span { color: var(--green); }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--cream); }
|
||||
.nav-cta { background: var(--red); color: white; padding: 0.5rem 1.2rem; border-radius: 50px; font-weight: 600; font-size: 0.8rem; }
|
||||
.nav-cta:hover { background: #a93226; color: white; text-decoration: none; }
|
||||
|
||||
/* HERO */
|
||||
.hero { height: 100vh; min-height: 580px; position: relative; display: flex; align-items: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,18,16,0.3) 0%, rgba(26,18,16,0.9) 65%, var(--dark) 100%), url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-pizza-badge { position: absolute; bottom: 2rem; right: 2rem; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.6; }
|
||||
.hero-pizza-badge .badge-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
|
||||
.hero-pizza-badge .badge-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
|
||||
.hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 750px; }
|
||||
.hero-tag { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; font-weight: 600; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Fraunces', serif; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero h1 em { color: var(--red); font-style: italic; }
|
||||
.hero-subtitle { font-size: 1.1rem; color: var(--gold); margin-bottom: 1.5rem; font-weight: 300; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--red); color: white; padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: #a93226; transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid rgba(250,243,232,0.3); color: var(--cream); padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-size: 0.85rem; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { border-color: var(--cream); background: rgba(250,243,232,0.08); text-decoration: none; }
|
||||
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--green); text-align: center; margin-bottom: 0.5rem; font-weight: 600; }
|
||||
.section-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 900; }
|
||||
.section-title em { font-style: italic; color: var(--red); }
|
||||
|
||||
/* PIZZA GRID */
|
||||
#pizzas { background: var(--warm); }
|
||||
.pizza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
|
||||
.pizza-card { background: var(--dark); border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,168,67,0.08); transition: transform 0.3s, border-color 0.3s; }
|
||||
.pizza-card:hover { transform: translateY(-6px); border-color: rgba(212,168,67,0.25); }
|
||||
.pizza-card img { width: 100%; height: 180px; object-fit: cover; }
|
||||
.pizza-info { padding: 1.2rem; }
|
||||
.pizza-info .pizza-name { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 0.4rem; font-weight: 600; }
|
||||
.pizza-info .pizza-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; line-height: 1.5; }
|
||||
.pizza-footer { display: flex; justify-content: space-between; align-items: center; }
|
||||
.pizza-price { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--green); font-weight: 900; }
|
||||
.pizza-tag { font-size: 0.65rem; padding: 0.2rem 0.5rem; border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.tag-veg { background: rgba(61,140,64,0.15); color: var(--green); }
|
||||
.tag-spicy { background: rgba(192,57,43,0.15); color: var(--red); }
|
||||
.tag-popular { background: rgba(212,168,67,0.15); color: var(--gold); }
|
||||
|
||||
/* ABOUT */
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||
.about-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
|
||||
.about-text h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); margin-bottom: 1rem; font-weight: 600; }
|
||||
.about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||
.about-text p strong { color: var(--cream); }
|
||||
.process-steps { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
|
||||
.process-step { display: flex; align-items: center; gap: 0.8rem; }
|
||||
.process-step .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: white; font-family: 'Fraunces', serif; font-weight: 900; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.process-step .step-text { font-size: 0.8rem; color: var(--muted); }
|
||||
.process-step .step-text strong { color: var(--cream); }
|
||||
|
||||
/* PASTA */
|
||||
#pasta { background: var(--warm); }
|
||||
.pasta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
|
||||
.pasta-item { background: var(--dark); border-radius: 10px; overflow: hidden; }
|
||||
.pasta-item img { width: 100%; height: 140px; object-fit: cover; }
|
||||
.pasta-item .pasta-info { padding: 1rem; }
|
||||
.pasta-item .pasta-name { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||
.pasta-item .pasta-desc { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
|
||||
.pasta-item .pasta-price { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--green); font-weight: 900; }
|
||||
|
||||
/* REVIEWS */
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||
.review-card { background: var(--warm); border: 1px solid rgba(212,168,67,0.08); border-radius: 10px; padding: 1.5rem; }
|
||||
.review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
|
||||
.review-card .review-text { font-size: 0.88rem; color: var(--muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
|
||||
.review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
|
||||
|
||||
/* LOCATION */
|
||||
#location { background: var(--warm); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid rgba(212,168,67,0.08); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.address-block { margin-top: 2rem; }
|
||||
.address-block p { font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
|
||||
.address-block strong { color: var(--green); font-weight: 600; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: #0f0a08; padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Fraunces', serif; font-size: 2.5rem; color: var(--cream); font-weight: 900; font-style: italic; margin-bottom: 0.5rem; }
|
||||
.footer-logo span { color: var(--green); }
|
||||
footer p { font-size: 0.8rem; color: var(--muted); }
|
||||
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.hero-content { padding: 2rem; }
|
||||
.about-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.hero-pizza-badge { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="flag-stripe"></div>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo"><span>Pizzeria</span> da Marco</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#pizzas">Pizzas</a></li>
|
||||
<li><a href="#about">Our Story</a></li>
|
||||
<li><a href="#pasta">Pasta</a></li>
|
||||
<li><a href="#reviews">Reviews</a></li>
|
||||
<li><a href="#location" class="nav-cta">Order Now</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-pizza-badge">
|
||||
<div class="badge-num">4.8</div>
|
||||
<div class="badge-label">Rating</div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-tag">★ Benalmádena Costa ★</p>
|
||||
<h1>Pizzeria<br><em>da Marco</em></h1>
|
||||
<p class="hero-subtitle">Naples in the Costa del Sol · Wood-Fired Since 2010</p>
|
||||
<p class="hero-desc">Real Neapolitan pizza baked in a wood-fired oven at 450°C. 72-hour fermented dough, San Marzano tomatoes, buffalo mozzarella. Open every evening for dinner — no reservations needed.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#pizzas" class="btn-primary">View Our Pizzas</a>
|
||||
<a href="#location" class="btn-ghost">Find Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pizzas">
|
||||
<div class="container">
|
||||
<p class="section-tag">From the Wood-Fired Oven</p>
|
||||
<h2 class="section-title">Our <em>Pizzas</em></h2>
|
||||
<div class="pizza-grid">
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500&q=75" alt="Margherita" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Margherita DOP</div>
|
||||
<div class="pizza-desc">San Marzano tomatoes, buffalo mozzarella di Battipaglia, fresh basil, extra virgin olive oil</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€9.50</div>
|
||||
<span class="pizza-tag tag-veg">🌿 Vegetarian</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=500&q=75" alt="Diavola" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Diavola</div>
|
||||
<div class="pizza-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, tabasco-infused olive oil, chili flakes</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€12.00</div>
|
||||
<span class="pizza-tag tag-spicy">🔥 Spicy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=500&q=75" alt="Quattro Formaggi" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Quattro Formaggi</div>
|
||||
<div class="pizza-desc">Mozzarella, gorgonzola piccante, Parmigiano Reggiano, taleggio — four cheese perfection</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€12.50</div>
|
||||
<span class="pizza-tag tag-veg">🌿 Vegetarian</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=500&q=75" alt="Tartufo" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Tartufo e Funghi</div>
|
||||
<div class="pizza-desc">Black truffle cream, wild mushrooms, mozzarella, taleggio, fresh truffle oil, rosemary</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€15.00</div>
|
||||
<span class="pizza-tag tag-popular">⭐ Chef's Pick</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1600028068383-4589e2c5fc4e?w=500&q=75" alt="Prosciutto" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Prosciutto e Funghi</div>
|
||||
<div class="pizza-desc">San Daniele prosciutto, wild mushrooms, San Marzano tomatoes, mozzarella, fresh rocket</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€13.00</div>
|
||||
<span class="pizza-tag tag-popular">⭐ Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pizza-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1598679253544-2c97992403ea?w=500&q=75" alt="Capricciosa" loading="lazy">
|
||||
<div class="pizza-info">
|
||||
<div class="pizza-name">Capricciosa</div>
|
||||
<div class="pizza-desc">Cooked ham, artichoke hearts, wild mushrooms, black olives, San Marzano tomatoes, mozzarella</div>
|
||||
<div class="pizza-footer">
|
||||
<div class="pizza-price">€12.00</div>
|
||||
<span class="pizza-tag tag-popular">⭐ Classic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Pizza making" loading="lazy">
|
||||
</div>
|
||||
<div class="about-text reveal">
|
||||
<p class="section-tag">Our Story</p>
|
||||
<h3>Straight from Naples to Benalmádena</h3>
|
||||
<p>Marco Ferretti grew up in the pizzeria his grandfather ran in Naples' Quartieri Spagnoli. In 2010, he brought the family recipe to the Costa del Sol — the same <strong>72-hour fermented dough</strong>, the same <strong>wood-fired oven</strong> built by hand from Neapolitan bricks.</p>
|
||||
<p>Our oven burns at <strong>450°C</strong> — hot enough to bake a pizza in 90 seconds. The dough blisters, the cheese bubbles, the base gets those charred leopard spots that mark a real Neapolitan pizza.</p>
|
||||
<p>We use only <strong>00 flour</strong> from Naples, <strong>San Marzano tomatoes</strong> from the slopes of Vesuvius, and <strong>buffalo mozzarella</strong> from Battipaglia. If it's not from Italy, we don't use it.</p>
|
||||
<div class="process-steps">
|
||||
<div class="process-step"><div class="step-num">1</div><div class="step-text"><strong>72h</strong> Fermented dough</div></div>
|
||||
<div class="process-step"><div class="step-num">2</div><div class="step-text"><strong>450°C</strong> Wood-fired</div></div>
|
||||
<div class="process-step"><div class="step-num">3</div><div class="step-text"><strong>90 sec</strong> Baked to perfection</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pasta">
|
||||
<div class="container">
|
||||
<p class="section-tag">Fresh Pasta Daily</p>
|
||||
<h2 class="section-title">Handmade <em>Pasta</em></h2>
|
||||
<div class="pasta-grid">
|
||||
<div class="pasta-item reveal">
|
||||
<img src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&q=75" alt="Carbonara" loading="lazy">
|
||||
<div class="pasta-info">
|
||||
<div class="pasta-name">Spaghetti Carbonara</div>
|
||||
<div class="pasta-desc">Guanciale, egg yolk, Pecorino Romano, Tellicherry pepper — Roman authentic</div>
|
||||
<div class="pasta-price">€11.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pasta-item reveal">
|
||||
<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=400&q=75" alt="Cacio e Pepe" loading="lazy">
|
||||
<div class="pasta-info">
|
||||
<div class="pasta-name">Tonnarelli Cacio e Pepe</div>
|
||||
<div class="pasta-desc">Square spaghetti, Pecorino Romano DOP, Tellicherry black pepper</div>
|
||||
<div class="pasta-price">€10.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pasta-item reveal">
|
||||
<img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=400&q=75" alt="Ragù" loading="lazy">
|
||||
<div class="pasta-info">
|
||||
<div class="pasta-name">Pappardelle al Ragù</div>
|
||||
<div class="pasta-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, aged Parmigiano</div>
|
||||
<div class="pasta-price">€12.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pasta-item reveal">
|
||||
<img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=400&q=75" alt="Gnocchi" loading="lazy">
|
||||
<div class="pasta-info">
|
||||
<div class="pasta-name">Gnocchi alla Sorrentina</div>
|
||||
<div class="pasta-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in the wood oven</div>
|
||||
<div class="pasta-price">€10.50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reviews">
|
||||
<div class="container">
|
||||
<p class="section-tag">Reviews</p>
|
||||
<h2 class="section-title">What Our <em>Guests</em> Say</h2>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"I've eaten pizza all over Italy and this one is the real deal. The base is perfectly thin, the dough is airy, the char is authentic. The diavola has proper heat. Can't wait to come back."</p>
|
||||
<div class="review-author">— Giulia B., Google</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"No reservations, casual atmosphere, incredible food. The pasta carbonara was creamy and the guanciale was perfectly crispy. Best Italian on the Costa del Sol, hands down."</p>
|
||||
<div class="review-author">— Tom H., TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"Marco himself made our pizza right in front of us. The quattro formaggi is heaven — proper gorgonzola, not the mild stuff. The tiramisu for dessert was the perfect end. 10/10."</p>
|
||||
<div class="review-author">— Sophie L., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Find Us</p>
|
||||
<h2 class="section-title">Come <em>Visit</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="reveal">
|
||||
<h3 style="font-family:'Fraunces',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday — Thursday</td><td>18:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
|
||||
</table>
|
||||
<div class="address-block">
|
||||
<p><strong>📍 Address</strong></p>
|
||||
<p>Av. Antonio Machado, 124<br>29630 Benalmádena Costa<br>Spain</p>
|
||||
<p style="margin-top:1rem;"><strong>📞 Order / Info</strong></p>
|
||||
<p>+34 952 571 234<br>hello@pizzeriadamarco.es</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<div style="border-radius:12px;overflow:hidden;border:1px solid rgba(212,168,67,0.15);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo"><span>Pizzeria</span> da Marco</p>
|
||||
<p>Av. Antonio Machado, 124 · 29630 Benalmádena Costa · +34 952 571 234</p>
|
||||
<p style="margin-top:1rem;opacity:0.4;">© 2026 Pizzeria da Marco. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>La Bodega del Mar — Mediterranean Kitchen</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Cormorant+Garamond:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root { --bg: #f7f4ef; --bg-card: #ffffff; --bg-warm: #fdf8f2; --navy: #1a3557; --terracotta: #c4622d; --sand: #e8d5b7; --gold: #b8943c; --cream: #faf7f2; --text: #2c2825; --text-muted: #7a6f66; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
/* NAV */
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; background: transparent; }
|
||||
nav.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(200,98,45,0.1); }
|
||||
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--terracotta); font-weight: 700; text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--terracotta); }
|
||||
.nav-cta { background: var(--terracotta); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
|
||||
.nav-cta:hover { background: #b3582a; color: white; text-decoration: none; }
|
||||
|
||||
/* HERO */
|
||||
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to right, rgba(247,244,239,0.85) 0%, rgba(247,244,239,0.4) 50%, transparent 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 700px; }
|
||||
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.0; color: var(--navy); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero h1 em { font-style: italic; color: var(--terracotta); }
|
||||
.hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; font-style: italic; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--terracotta); color: white; padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: #b3582a; transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid var(--navy); color: var(--navy); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { background: var(--navy); color: white; text-decoration: none; }
|
||||
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); text-align: center; margin-bottom: 0.5rem; }
|
||||
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--navy); margin-bottom: 3rem; }
|
||||
.section-title em { font-style: italic; color: var(--terracotta); }
|
||||
|
||||
/* ABOUT */
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||
.about-img { border-radius: 8px; overflow: hidden; }
|
||||
.about-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
|
||||
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
|
||||
.about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
|
||||
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
|
||||
.about-feature .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }
|
||||
|
||||
/* TAPA HIGHLIGHTS */
|
||||
#tapas { background: var(--bg-warm); }
|
||||
.tapas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
||||
.tapa-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
|
||||
.tapa-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
|
||||
.tapa-card img { width: 100%; height: 160px; object-fit: cover; }
|
||||
.tapa-info { padding: 1rem; }
|
||||
.tapa-info .tapa-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.3rem; }
|
||||
.tapa-info .tapa-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
|
||||
.tapa-info .tapa-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; }
|
||||
|
||||
/* MENU CLASSICS */
|
||||
.menu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
|
||||
.menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--navy); margin-bottom: 1.2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--sand); }
|
||||
.menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); gap: 1rem; }
|
||||
.menu-item-name { font-size: 0.95rem; color: var(--text); }
|
||||
.menu-item-desc { font-size: 0.75rem; color: var(--text-muted); }
|
||||
.menu-item-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; white-space: nowrap; }
|
||||
|
||||
/* WINE */
|
||||
#wine { background: var(--navy); }
|
||||
#wine .section-tag { color: var(--sand); }
|
||||
#wine .section-title { color: white; }
|
||||
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
|
||||
.wine-item { text-align: center; padding: 1.2rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
|
||||
.wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: white; margin-bottom: 0.3rem; }
|
||||
.wine-item .wine-region { font-size: 0.75rem; color: var(--sand); margin-bottom: 0.5rem; }
|
||||
.wine-item .wine-price { font-size: 0.9rem; color: var(--sand); font-weight: 700; }
|
||||
|
||||
/* REVIEWS */
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||
.review-card { background: white; border: 1px solid var(--sand); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
|
||||
.review-card .stars { color: var(--terracotta); font-size: 0.9rem; margin-bottom: 0.8rem; }
|
||||
.review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
|
||||
.review-card .review-author { font-size: 0.8rem; color: var(--navy); font-weight: 600; }
|
||||
|
||||
/* LOCATION */
|
||||
#location { background: var(--bg-warm); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid var(--sand); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--text-muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.address-block { margin-top: 2rem; }
|
||||
.address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
|
||||
.address-block strong { color: var(--terracotta); font-weight: 600; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: var(--navy); padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: white; font-weight: 700; margin-bottom: 0.5rem; }
|
||||
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--sand); margin-bottom: 1rem; }
|
||||
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
|
||||
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.hero-content { padding: 2rem; }
|
||||
.about-grid, .menu-split, .info-grid, .tapas-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">La Bodega del Mar</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">Our Story</a></li>
|
||||
<li><a href="#tapas">Tapas</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#wine">Wine</a></li>
|
||||
<li><a href="#location" class="nav-cta">Reservas</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||
<h1>La Bodega<br><em>del Mar</em></h1>
|
||||
<p class="hero-subtitle">Cocina Mediterránea · Productos del Mercado</p>
|
||||
<p class="hero-desc">Fresh fish straight from the daily catch, organic vegetables from local farmers, and wines from small Spanish producers. The Costa del Sol on a plate — honest, generous, and full of flavour.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#tapas" class="btn-primary">Ver Tapas</a>
|
||||
<a href="#location" class="btn-ghost">Reservar Mesa</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=800&q=80" alt="Spanish kitchen" loading="lazy">
|
||||
</div>
|
||||
<div class="about-text reveal">
|
||||
<p class="section-tag">Our Story</p>
|
||||
<h3>Where the sea meets the table</h3>
|
||||
<p>La Bodega del Mar opened in 2012 in the heart of Benalmádena Costa, founded by chef Javier Moreno who spent 20 years working the coastal kitchens of Málaga, Granada, and Almería.</p>
|
||||
<p>Every morning Javier visits the market himself to choose the day's catch — whatever the fishermen brought in that morning. There's no menu for the specials board; it changes with the tide.</p>
|
||||
<p>We call ourselves a bodega, because that's what we are at heart: a place to eat well, drink well, and feel at home. Come as you are.</p>
|
||||
<div class="about-features">
|
||||
<div class="about-feature"><span class="dot"></span>Daily fish market</div>
|
||||
<div class="about-feature"><span class="dot"></span>Local organic produce</div>
|
||||
<div class="about-feature"><span class="dot"></span>Spanish natural wines</div>
|
||||
<div class="about-feature"><span class="dot"></span>Open 7 days a week</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tapas">
|
||||
<div class="container">
|
||||
<p class="section-tag">Para Picar</p>
|
||||
<h2 class="section-title">Our <em>Tapas</em></h2>
|
||||
<div class="tapas-grid">
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Gambas al Ajillo" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Gambas al Ajillo</div>
|
||||
<div class="tapa-desc">Garlic prawns in olive oil, guindilla pepper, white wine. Served with crusty bread to soak up the sauce.</div>
|
||||
<div class="tapa-price">€10.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?w=400&q=75" alt="Patatas Bravas" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Patatas Bravas</div>
|
||||
<div class="tapa-desc">Crispy fried potatoes, bravas sauce (spicy tomato), aioli. The house recipe since day one.</div>
|
||||
<div class="tapa-price">€6.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="Jamón Ibérico" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Jamón Ibérico de Bellota</div>
|
||||
<div class="tapa-desc">Hand-sliced 48-month aged acorn-fed Ibérico ham. Served with picos bread and tomato aliño.</div>
|
||||
<div class="tapa-price">€14.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=400&q=75" alt="Calamares" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Calamares Fritos</div>
|
||||
<div class="tapa-desc">Lightly fried squid rings and tentacles, lemon wedge, spicy aioli. Like being on the beach in Málaga.</div>
|
||||
<div class="tapa-price">€9.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1626200419199-391ae4be7a41?w=400&q=75" alt="Croquetas" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Croquetas de Bacalao</div>
|
||||
<div class="tapa-desc">Hand-rolled salt cod croquettes, crispy outside, creamy bechamel inside. Made fresh every morning.</div>
|
||||
<div class="tapa-price">€7.50</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tapa-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=400&q=75" alt="Pulpo" loading="lazy">
|
||||
<div class="tapa-info">
|
||||
<div class="tapa-name">Pulpo a la Gallega</div>
|
||||
<div class="tapa-desc">Galician-style octopus, boiled then seared, on a bed of boiled potatoes, paprika, olive oil.</div>
|
||||
<div class="tapa-price">€13.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu">
|
||||
<div class="container">
|
||||
<p class="section-tag">Platos Principales</p>
|
||||
<h2 class="section-title">Main <em>Dishes</em></h2>
|
||||
<div class="menu-split">
|
||||
<div class="menu-col">
|
||||
<h3>Fresh from the Sea</h3>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Pescaíto Frito</div>
|
||||
<div class="menu-item-desc">Mixed fried fish — small sardines, calamari, fish of the day. With lemon and alioli</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€16.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Sea Bass a la Plancha</div>
|
||||
<div class="menu-item-desc">Grilled sea bass fillet, sautéed potatoes, green pepper, olive oil</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€19.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Rice Plate — Paella</div>
|
||||
<div class="menu-item-desc">Traditional paella Valenciana. Chicken, rabbit, green beans, saffron. For 2 persons minimum</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€18.00 pp</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Black Rice</div>
|
||||
<div class="menu-item-desc">Squid ink rice, cuttlefish, monkfish. The specialty of the house</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€19.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Grilled Gambas</div>
|
||||
<div class="menu-item-desc">Large prawns on the grill, garlic butter, parsley, white wine</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€22.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-col">
|
||||
<h3>From the Land</h3>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Solomillo al Ajillo</div>
|
||||
<div class="menu-item-desc">Pan-fried pork tenderloin, garlic, white wine, roasted potatoes</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€14.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Pollo al Ajillo</div>
|
||||
<div class="menu-item-desc">Chicken pieces braised in garlic, white wine, thyme, olives</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€12.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Tortilla Española</div>
|
||||
<div class="menu-item-desc">Classic Spanish omelette — eggs, potatoes, onion. Served warm</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€8.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Spinach & Chickpeas</div>
|
||||
<div class="menu-item-desc">Espinacas con garbanzos — Andalusian style stew, cumin, paprika</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€10.00</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div>
|
||||
<div class="menu-item-name">Salmorejo</div>
|
||||
<div class="menu-item-desc">Cold Andalusian tomato soup, Ibérico ham, hard-boiled egg, olive oil</div>
|
||||
</div>
|
||||
<div class="menu-item-price">€7.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wine">
|
||||
<div class="container">
|
||||
<p class="section-tag">Vino</p>
|
||||
<h2 class="section-title">Spanish <em>Wines</em></h2>
|
||||
<div class="wine-grid">
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Albariño</div>
|
||||
<div class="wine-region">Rías Baixas, Galicia</div>
|
||||
<div class="wine-price">from €18/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Verdejo</div>
|
||||
<div class="wine-region">Rueda, Castilla y León</div>
|
||||
<div class="wine-price">from €16/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Rioja Reserva</div>
|
||||
<div class="wine-region">La Rioja</div>
|
||||
<div class="wine-price">from €22/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Ribera del Duero</div>
|
||||
<div class="wine-region">Castilla y León</div>
|
||||
<div class="wine-price">from €24/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Priorat</div>
|
||||
<div class="wine-region">Catalunya</div>
|
||||
<div class="wine-price">from €28/bottle</div>
|
||||
</div>
|
||||
<div class="wine-item">
|
||||
<div class="wine-name">Sherry Fino</div>
|
||||
<div class="wine-region">Jerez, Andalucía</div>
|
||||
<div class="wine-price">from €14/bottle</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reviews">
|
||||
<div class="container">
|
||||
<p class="section-tag">Reviews</p>
|
||||
<h2 class="section-title">What <em>Guests</em> Say</h2>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"The best tapas on the Costa del Sol. We tried the gambas al ajillo, croquetas, and pulpo — all exceptional. The rice dishes are incredible. This is real Spanish food."</p>
|
||||
<div class="review-author">— Helen & Peter, Google</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"Found this gem on our second night in Benalmádena. The owner Javier comes out to say hello. Fresh fish, generous portions, reasonable prices. We ate here 4 nights in a row."</p>
|
||||
<div class="review-author">— Brian M., TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"Authentic, warm, delicious. The espinacas con garbanzos was the best I've had in Spain. The house wine (tempranillo) is superb. This is what Spanish dining should be."</p>
|
||||
<div class="review-author">— Claudia F., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Encuéntranos</p>
|
||||
<h2 class="section-title">Find Your Way to <em>La Bodega</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="reveal">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--navy);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday — Thursday</td><td>12:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
|
||||
</table>
|
||||
<div class="address-block">
|
||||
<p><strong>📍 Dirección</strong></p>
|
||||
<p>Av. Antonio Machado, 120<br>29630 Benalmádena Costa<br>Spain</p>
|
||||
<p style="margin-top:1rem;"><strong>📞 Reservas</strong></p>
|
||||
<p>+34 952 570 123<br>info@labodegadelmar.es</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<div style="border-radius:8px;overflow:hidden;border:1px solid var(--sand);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">La Bodega del Mar</p>
|
||||
<p class="footer-tagline">Cocina Mediterránea · Benalmádena Costa</p>
|
||||
<p>Av. Antonio Machado, 120 · 29630 Benalmádena · +34 952 570 123</p>
|
||||
<p style="margin-top:1rem;">© 2026 La Bodega del Mar. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,340 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Argentine Grill — Premium Steakhouse</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Bebas+Neue&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root { --bg: #0d0b09; --bg-card: #1a1614; --bg-light: #221e1a; --ember: #e85d04; --gold: #c9922a; --cream: #f0e6d3; --text: #ddd0c0; --text-muted: #8a7d6e; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||
|
||||
/* FIRE BG */
|
||||
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,11,9,0.2) 0%, rgba(13,11,9,0.85) 70%, var(--bg) 100%), url('https://images.unsplash.com/photo-1558030006-450675393462?w=1600&q=80') center/cover no-repeat; }
|
||||
.hero-embers { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(232,93,4,0.15) 0%, transparent 60%); pointer-events: none; }
|
||||
|
||||
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
|
||||
nav.scrolled { background: rgba(13,11,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,146,42,0.15); }
|
||||
.nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--gold); letter-spacing: 0.1em; text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
.nav-cta { background: var(--ember); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
|
||||
.nav-cta:hover { background: #ff6b10; color: white; text-decoration: none; }
|
||||
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3.5rem, 10vw, 7rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||
.hero-subtitle { font-size: 1.1rem; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||
.btn-primary { background: var(--ember); color: white; padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-primary:hover { background: #ff6b10; transform: translateY(-2px); }
|
||||
.btn-ghost { border: 1px solid rgba(201,146,42,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
|
||||
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,146,42,0.08); text-decoration: none; }
|
||||
|
||||
section { padding: 6rem 2rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; }
|
||||
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); text-align: center; margin-bottom: 0.5rem; }
|
||||
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||
.section-title em { font-style: italic; color: var(--gold); }
|
||||
|
||||
/* CUTS */
|
||||
#cuts { background: var(--bg-card); }
|
||||
.cuts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
|
||||
.cut-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; overflow: hidden; text-align: center; transition: border-color 0.3s, transform 0.3s; }
|
||||
.cut-card:hover { border-color: var(--ember); transform: translateY(-4px); }
|
||||
.cut-card img { width: 100%; height: 160px; object-fit: cover; }
|
||||
.cut-card .cut-info { padding: 1rem; }
|
||||
.cut-card .cut-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||
.cut-card .cut-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
|
||||
.cut-card .cut-price { font-size: 1rem; color: var(--ember); font-weight: 700; }
|
||||
|
||||
/* ABOUT */
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||
.about-img { position: relative; }
|
||||
.about-img img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; }
|
||||
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||
.about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; text-align: center; }
|
||||
.about-stat .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--ember); }
|
||||
.about-stat .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
|
||||
/* MENU */
|
||||
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
|
||||
.menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201,146,42,0.2); }
|
||||
.menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 1rem; }
|
||||
.menu-item-name { font-size: 0.95rem; color: var(--text); }
|
||||
.menu-item-desc { font-size: 0.78rem; color: var(--text-muted); }
|
||||
.menu-item-price { font-size: 0.95rem; color: var(--ember); font-weight: 700; white-space: nowrap; }
|
||||
|
||||
/* WINE */
|
||||
#wine { background: var(--bg-card); }
|
||||
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem; }
|
||||
.wine-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; padding: 1.2rem; text-align: center; }
|
||||
.wine-card .wine-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||
.wine-card .wine-region { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||
.wine-card .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
|
||||
.wine-card .wine-glass { font-size: 0.8rem; color: var(--text-muted); }
|
||||
|
||||
/* REVIEWS */
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||
.review-card { background: var(--bg-card); border: 1px solid rgba(201,146,42,0.1); border-radius: 8px; padding: 1.5rem; }
|
||||
.review-card .stars { color: var(--ember); font-size: 0.9rem; margin-bottom: 0.8rem; }
|
||||
.review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
|
||||
.review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
|
||||
|
||||
/* LOCATION */
|
||||
#location { background: var(--bg-card); }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||
.hours-table { width: 100%; }
|
||||
.hours-table tr { border-bottom: 1px solid rgba(201,146,42,0.08); }
|
||||
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
|
||||
.hours-table td:first-child { color: var(--text-muted); }
|
||||
.hours-table td:last-child { color: var(--text); text-align: right; }
|
||||
.address-block { margin-top: 2rem; }
|
||||
.address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
|
||||
.address-block strong { color: var(--gold); font-weight: 400; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: #070504; padding: 4rem 2rem 2rem; text-align: center; }
|
||||
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
|
||||
footer p { font-size: 0.8rem; color: var(--text-muted); }
|
||||
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.about-img::after { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">THE ARGENTINE GRILL</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#cuts">Cuts</a></li>
|
||||
<li><a href="#about">Our Story</a></li>
|
||||
<li><a href="#wine">Wine & Bar</a></li>
|
||||
<li><a href="#reviews">Reviews</a></li>
|
||||
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-embers"></div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-tag">★ Benalmádena Costa ★</p>
|
||||
<h1>The Argentine<br>Grill</h1>
|
||||
<p class="hero-subtitle">Dry-Aged Beef · Open Fire · Argentine Heritage</p>
|
||||
<p class="hero-desc">Premium cuts from Argentina and Uruguay, dry-aged in-house for 45 days. Wood-fired grill, premium wine list, and the warmth of South American hospitality on the Costa del Sol.</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#cuts" class="btn-primary">View Our Cuts</a>
|
||||
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cuts">
|
||||
<div class="container">
|
||||
<p class="section-tag">From the Grill</p>
|
||||
<h2 class="section-title">Premium <em>Cuts</em></h2>
|
||||
<div class="cuts-grid">
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1558030006-450675393462?w=400&q=75" alt="Ribeye" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">Ribeye 400g</div>
|
||||
<div class="cut-desc">45-day dry-aged, wood-fired, rosemary butter</div>
|
||||
<div class="cut-price">€34.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1600891964092-4316c288032e?w=400&q=75" alt="Filet Mignon" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">Filet Mignon 280g</div>
|
||||
<div class="cut-desc">Prime cut, peppercorn crust, red wine jus</div>
|
||||
<div class="cut-price">€38.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="T-Bone" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">T-Bone 600g</div>
|
||||
<div class="cut-desc">For two, dry-aged 30 days, chimichurri side</div>
|
||||
<div class="cut-price">€48.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=400&q=75" alt="Tomahawk" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">Tomahawk 1.2kg</div>
|
||||
<div class="cut-desc">Shareable, 60-day dry-aged, bone-in ribeye</div>
|
||||
<div class="cut-price">€65.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1529694157872-4e0c0f3b238b?w=400&q=75" alt="Wagyu" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">Wagyu A5 200g</div>
|
||||
<div class="cut-desc">Japanese Wagyu, truffle mash, red wine reduction</div>
|
||||
<div class="cut-price">€85.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut-card reveal">
|
||||
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Lamb Chops" loading="lazy">
|
||||
<div class="cut-info">
|
||||
<div class="cut-name">Lamb Chops</div>
|
||||
<div class="cut-desc">Patagonian lamb, herb crust, mint sauce</div>
|
||||
<div class="cut-price">€28.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-img reveal">
|
||||
<img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800&q=80" alt="Grill master" loading="lazy">
|
||||
</div>
|
||||
<div class="about-text reveal">
|
||||
<p class="section-tag">Our Story</p>
|
||||
<h3>Fire, tradition, and the perfect steak</h3>
|
||||
<p>The Argentine Grill opened in 2008, bringing the asado culture of Buenos Aires to the Costa del Sol. Our parilla (traditional grill) burns at over 400°C, sealing each cut with a perfect char while keeping the inside tender and juicy.</p>
|
||||
<p>Every week, we receive premium beef from Argentina — grass-fed, free-range — that's dry-aged in our climate-controlled cabinet for up to 60 days. The result is a depth of flavour that modern cooking can't replicate.</p>
|
||||
<p>We are not a steakhouse. We are a temple to the grill.</p>
|
||||
<div class="about-stats">
|
||||
<div class="about-stat"><div class="stat-num">45+</div><div class="stat-label">Days Dry-Aged</div></div>
|
||||
<div class="about-stat"><div class="stat-num">400°</div><div class="stat-label">Grill Temp °C</div></div>
|
||||
<div class="about-stat"><div class="stat-num">17</div><div class="stat-label">Years Open</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wine">
|
||||
<div class="container">
|
||||
<p class="section-tag">Wine & Bar</p>
|
||||
<h2 class="section-title">The <em>Wine List</em></h2>
|
||||
<div class="wine-grid">
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Malbec Reserva</div>
|
||||
<div class="wine-region">Mendoza, Argentina</div>
|
||||
<div class="wine-price">from €28</div>
|
||||
<div class="wine-glass">Glass €6</div>
|
||||
</div>
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Cabernet Sauvignon</div>
|
||||
<div class="wine-region">Uco Valley, Argentina</div>
|
||||
<div class="wine-price">from €32</div>
|
||||
<div class="wine-glass">Glass €7</div>
|
||||
</div>
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Bonarda Vieja</div>
|
||||
<div class="wine-region">San Juan, Argentina</div>
|
||||
<div class="wine-price">from €22</div>
|
||||
<div class="wine-glass">Glass €5</div>
|
||||
</div>
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Torrontés</div>
|
||||
<div class="wine-region">Salta, Argentina</div>
|
||||
<div class="wine-price">from €20</div>
|
||||
<div class="wine-glass">Glass €5</div>
|
||||
</div>
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Chardonnay Barrel</div>
|
||||
<div class="wine-region">Patagonia, Argentina</div>
|
||||
<div class="wine-price">from €24</div>
|
||||
<div class="wine-glass">Glass €6</div>
|
||||
</div>
|
||||
<div class="wine-card">
|
||||
<div class="wine-name">Sangiovese Riserva</div>
|
||||
<div class="wine-region">Tuscany, Italy</div>
|
||||
<div class="wine-price">from €30</div>
|
||||
<div class="wine-glass">Glass €7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="reviews">
|
||||
<div class="container">
|
||||
<p class="section-tag">Guest Reviews</p>
|
||||
<h2 class="section-title">What <em>Guests</em> Say</h2>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"The best steak I've had in Spain. The ribeye was perfectly charred on the outside and melt-in-the-mouth tender inside. The Malbec list is excellent. Will be back every week."</p>
|
||||
<div class="review-author">— Darren T., Google</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"We came for our anniversary and it exceeded all expectations. The T-bone for two is incredible. Service was warm and attentive. A hidden gem in Benalmádena."</p>
|
||||
<div class="review-author">— Louise M., TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-card reveal">
|
||||
<div class="stars">★★★★★</div>
|
||||
<p class="review-text">"As an Argentine, I'm picky about my asado. This place gets it right. The wood-fired flavour, the quality of the beef — proper authentic parilla. Salud!"</p>
|
||||
<div class="review-author">— Carlos R., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<div class="container">
|
||||
<p class="section-tag">Find Us</p>
|
||||
<h2 class="section-title">Reserve Your <em>Table</em></h2>
|
||||
<div class="info-grid">
|
||||
<div class="reveal">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||
<table class="hours-table">
|
||||
<tr><td>Monday</td><td>Closed</td></tr>
|
||||
<tr><td>Tuesday — Thursday</td><td>19:00 — 23:00</td></tr>
|
||||
<tr><td>Friday — Saturday</td><td>19:00 — 00:00</td></tr>
|
||||
<tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
|
||||
</table>
|
||||
<div class="address-block">
|
||||
<p><strong>📍 Address</strong></p>
|
||||
<p>Av. Antonio Machado, 112<br>29630 Benalmádena Costa<br>Spain</p>
|
||||
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
|
||||
<p>+34 952 568 901<br>reservations@theargentinegrill.es</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<div style="border-radius:4px;overflow:hidden;border:1px solid rgba(201,146,42,0.2);">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">THE ARGENTINE GRILL</p>
|
||||
<p>Av. Antonio Machado, 112 · 29630 Benalmádena Costa · +34 952 568 901</p>
|
||||
<p style="margin-top:1rem;opacity:0.4;">© 2026 The Argentine Grill. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,438 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kaito Sushi — Omakase & Izakaya</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Playfair+Display:ital,wght@1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--ink: #0a0a0a;
|
||||
--paper: #f5f0e8;
|
||||
--wood: #8b6b4a;
|
||||
--wood-dark: #5c3d2e;
|
||||
--cream: #faf8f4;
|
||||
--text: #1a1a1a;
|
||||
--muted: #7a6a5a;
|
||||
--gold: #c9a055;
|
||||
--red: #b83b3b;
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
body { font-family: 'Noto Sans JP', sans-serif; background: var(--ink); color: var(--cream); line-height: 1.7; overflow-x: hidden; }
|
||||
|
||||
/* SLIDE-UP REVEAL */
|
||||
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* NAV */
|
||||
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 3rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.4s; }
|
||||
nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); }
|
||||
.nav-logo { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; color: var(--cream); font-weight: 300; letter-spacing: 0.2em; text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
|
||||
.nav-links a { color: rgba(250,248,244,0.5); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--cream); }
|
||||
.nav-cta { border: 1px solid rgba(201,160,85,0.5); color: var(--gold); padding: 0.4rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
|
||||
.nav-cta:hover { background: var(--gold); color: var(--ink); }
|
||||
|
||||
/* HERO — Full screen, centered, very minimal */
|
||||
.hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1553621042-f6e147245754?w=1600&q=80') center/cover no-repeat; filter: brightness(0.35) saturate(0.6); }
|
||||
.hero-rule { width: 1px; height: 60px; background: var(--gold); margin: 0 auto 2rem; opacity: 0; animation: fadeIn 1s 0.3s forwards; }
|
||||
.hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.4s forwards; }
|
||||
.hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; color: var(--cream); letter-spacing: 0.3em; line-height: 1.1; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.6s forwards; }
|
||||
.hero-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.9rem, 2vw, 1.2rem); color: rgba(250,248,244,0.5); letter-spacing: 0.2em; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 1s 0.8s forwards; }
|
||||
.hero-btns { display: flex; gap: 1.2rem; justify-content: center; opacity: 0; animation: fadeUp 1s 1s forwards; }
|
||||
.btn-primary { background: var(--gold); color: var(--ink); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; transition: all 0.3s; }
|
||||
.btn-primary:hover { background: var(--cream); }
|
||||
.btn-ghost { border: 1px solid rgba(250,248,244,0.25); color: var(--cream); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
|
||||
.btn-ghost:hover { border-color: var(--cream); }
|
||||
|
||||
/* KANJI DECORATION */
|
||||
.kanji-strip { background: var(--wood-dark); padding: 1.2rem; text-align: center; }
|
||||
.kanji-strip span { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; color: rgba(250,248,244,0.4); letter-spacing: 0.5em; margin: 0 1rem; }
|
||||
|
||||
/* NARRATIVE / ABOUT — very editorial */
|
||||
.editorial { padding: 8rem 3rem; max-width: 860px; margin: 0 auto; }
|
||||
.editorial-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||
.editorial h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--cream); line-height: 1.3; margin-bottom: 2rem; }
|
||||
.editorial p { color: rgba(250,248,244,0.6); font-size: 0.95rem; line-height: 2; margin-bottom: 1.5rem; font-weight: 300; }
|
||||
.editorial p:last-child { margin-bottom: 0; }
|
||||
|
||||
/* HORIZONTAL MENU — full width horizontal scrolling panels */
|
||||
.menu-scroll { background: var(--paper); color: var(--text); overflow-x: auto; }
|
||||
.menu-scroll-inner { display: flex; min-width: max-content; }
|
||||
.menu-panel { min-width: 320px; max-width: 360px; padding: 3rem 2.5rem; border-right: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
|
||||
.menu-panel:last-child { border-right: none; }
|
||||
.menu-panel-tag { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wood); margin-bottom: 1.5rem; }
|
||||
.menu-panel-title { font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; color: var(--text); margin-bottom: 0.3rem; }
|
||||
.menu-panel-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 2rem; font-style: italic; }
|
||||
.menu-dish { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||||
.menu-dish:last-child { border-bottom: none; }
|
||||
.menu-dish-name { font-size: 0.9rem; color: var(--text); }
|
||||
.menu-dish-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
|
||||
.menu-dish-price { font-size: 0.9rem; color: var(--wood); font-weight: 600; white-space: nowrap; }
|
||||
|
||||
/* OMAKASE FEATURE — asymmetric layout */
|
||||
.omakase { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
|
||||
.omakase-img { background: url('https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?w=900&q=80') center/cover no-repeat; min-height: 400px; }
|
||||
.omakase-text { background: var(--wood-dark); padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.omakase-tag { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||
.omakase-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; line-height: 1.4; }
|
||||
.omakase-desc { color: rgba(250,248,244,0.6); font-size: 0.9rem; line-height: 1.9; margin-bottom: 2rem; font-weight: 300; }
|
||||
.omakase-price { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
|
||||
.omakase-amount { font-family: 'Noto Serif JP', serif; font-size: 2.5rem; color: var(--cream); font-weight: 300; margin-bottom: 2rem; }
|
||||
.omakase-link { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,160,85,0.3); padding-bottom: 0.2rem; transition: border-color 0.3s; }
|
||||
.omakase-link:hover { border-color: var(--gold); }
|
||||
|
||||
/* IZAKAYA / DRINKS — dark section */
|
||||
.izakaya { background: var(--ink); padding: 6rem 3rem; }
|
||||
.izakaya-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.izakaya-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
|
||||
.izakaya-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); }
|
||||
.izakaya-title span { display: block; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; font-family: 'Noto Sans JP', sans-serif; }
|
||||
.drinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
||||
.drink-item { border: 1px solid rgba(201,160,85,0.1); padding: 1.5rem; border-radius: 2px; }
|
||||
.drink-item .drink-name { font-family: 'Noto Serif JP', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.2rem; }
|
||||
.drink-item .drink-style { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
|
||||
.drink-item .drink-price { font-size: 0.85rem; color: var(--gold); }
|
||||
|
||||
/* REVIEWS — 3 columns, minimal */
|
||||
.reviews-section { background: var(--paper); padding: 6rem 3rem; }
|
||||
.reviews-inner { max-width: 1100px; margin: 0 auto; }
|
||||
.reviews-header { text-align: center; margin-bottom: 3rem; }
|
||||
.reviews-header h2 { font-family: 'Noto Serif JP', serif; font-size: 2rem; font-weight: 300; color: var(--text); margin-bottom: 0.5rem; }
|
||||
.reviews-header p { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
|
||||
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); }
|
||||
.review-item { background: var(--paper); padding: 2.5rem 2rem; }
|
||||
.review-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
|
||||
.review-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
|
||||
.review-author { font-size: 0.75rem; color: var(--text); font-weight: 500; letter-spacing: 0.05em; }
|
||||
|
||||
/* LOCATION — very minimal, 2 columns */
|
||||
.location { background: var(--ink); padding: 6rem 3rem; border-top: 1px solid rgba(201,160,85,0.08); }
|
||||
.location-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
|
||||
.location-block h3 { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; }
|
||||
.hours-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; }
|
||||
.hours-row span:first-child { color: rgba(250,248,244,0.4); }
|
||||
.hours-row span:last-child { color: var(--cream); }
|
||||
.contact-line { font-size: 0.85rem; color: rgba(250,248,244,0.4); margin-bottom: 0.5rem; }
|
||||
.contact-line a { color: var(--gold); text-decoration: none; }
|
||||
.map-placeholder { border: 1px solid rgba(201,160,85,0.15); overflow: hidden; border-radius: 2px; }
|
||||
.map-placeholder iframe { width: 100%; height: 100%; min-height: 300px; border: none; display: block; filter: brightness(0.8) saturate(0.5); }
|
||||
|
||||
/* FOOTER */
|
||||
footer { background: #050505; padding: 3rem; text-align: center; border-top: 1px solid rgba(201,160,85,0.08); }
|
||||
.footer-logo { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--cream); font-weight: 300; letter-spacing: 0.4em; margin-bottom: 1rem; }
|
||||
footer p { font-size: 0.72rem; color: rgba(250,248,244,0.25); letter-spacing: 0.1em; }
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 1rem 1.5rem; }
|
||||
.nav-links { display: none; }
|
||||
.hero h1 { letter-spacing: 0.15em; }
|
||||
.omakase { grid-template-columns: 1fr; }
|
||||
.reviews-grid { grid-template-columns: 1fr; }
|
||||
.location-inner { grid-template-columns: 1fr; }
|
||||
.editorial { padding: 5rem 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
<a href="#" class="nav-logo">KAITO</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#omakase">Omakase</a></li>
|
||||
<li><a href="#drinks">Izakaya</a></li>
|
||||
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-rule"></div>
|
||||
<p class="hero-eyebrow">Omakase · Izakaya · Benalmádena Costa</p>
|
||||
<h1>KAITO</h1>
|
||||
<p class="hero-sub">Sushi & Japanese Kitchen</p>
|
||||
<div class="hero-btns">
|
||||
<a href="#menu" class="btn-primary">View Menu</a>
|
||||
<a href="#omakase" class="btn-ghost">Omakase Experience</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KANJI STRIP -->
|
||||
<div class="kanji-strip">
|
||||
<span>壽司</span>
|
||||
<span>職人の技</span>
|
||||
<span>巻物</span>
|
||||
<span>味</span>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="editorial" id="about">
|
||||
<p class="editorial-eyebrow reveal">Our Philosophy</p>
|
||||
<h2 class="reveal">Every piece tells a story of the sea</h2>
|
||||
<p class="reveal">Kaito opened in 2018 with a single mission: to bring the discipline and beauty of Japanese sushi craft to the Costa del Sol. Our head chef, Kenji Tanaka, trained for 12 years in Tokyo's Ginza district before bringing his knife and his philosophy to Spain.</p>
|
||||
<p class="reveal">We buy from the same suppliers as the best sushi bars in Barcelona — bluefin tuna from the Strait of Gibraltar, wild salmon from Norway, otoro from Tsukiji's successor markets. Every morning our fish arrives in ice, every evening it becomes art on your plate.</p>
|
||||
<p class="reveal">Omakase means "I leave it up to you." When you sit at our counter, you surrender to the chef's judgement. This is the highest form of sushi dining — trust, technique, and a meal that changes with the seasons.</p>
|
||||
</section>
|
||||
|
||||
<!-- HORIZONTAL SCROLLING MENU -->
|
||||
<section class="menu-scroll" id="menu">
|
||||
<div class="menu-scroll-inner">
|
||||
<div class="menu-panel">
|
||||
<p class="menu-panel-tag">前菜 / Starters</p>
|
||||
<h3 class="menu-panel-title">Starters</h3>
|
||||
<p class="menu-panel-sub">Small dishes, big flavour</p>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Edamame</div><div class="menu-dish-desc">Sea salt, yuzu chili</div></div>
|
||||
<div class="menu-dish-price">€5</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Miso Soup</div><div class="menu-dish-desc">Dashi, silken tofu, wakame</div></div>
|
||||
<div class="menu-dish-price">€4</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Gyoza (6pc)</div><div class="menu-dish-desc">Pork & chive, ponzu dip</div></div>
|
||||
<div class="menu-dish-price">€8</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Tako Wasabi</div><div class="menu-dish-desc">Octopus, wasabi mayo, tobiko</div></div>
|
||||
<div class="menu-dish-price">€12</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name"> Agedashi Tofu</div><div class="menu-dish-desc">Fried tofu, dashi broth, katsuobushi</div></div>
|
||||
<div class="menu-dish-price">€7</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-panel">
|
||||
<p class="menu-panel-tag">握り / Nigiri</p>
|
||||
<h3 class="menu-panel-title">Nigiri</h3>
|
||||
<p class="menu-panel-sub">Two pieces per order</p>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Salmon</div><div class="menu-dish-desc">Wild Norwegian, sea salt</div></div>
|
||||
<div class="menu-dish-price">€7</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Bluefin Tuna</div><div class="menu-dish-desc">Gibraltar Strait, wasabi</div></div>
|
||||
<div class="menu-dish-price">€9</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Otoro</div><div class="menu-dish-desc">Fatty tuna belly, pickled ginger</div></div>
|
||||
<div class="menu-dish-price">€14</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Sea Bass</div><div class="menu-dish-desc">Yellowtail, ponzu, chive</div></div>
|
||||
<div class="menu-dish-price">€8</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Ebi</div><div class="menu-dish-desc">Tiger prawn, yuzu mayo</div></div>
|
||||
<div class="menu-dish-price">€7</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Ikura</div><div class="menu-dish-desc">Salmon roe, shiso, nori</div></div>
|
||||
<div class="menu-dish-price">€12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-panel">
|
||||
<p class="menu-panel-tag">巻き物 / Rolls</p>
|
||||
<h3 class="menu-panel-title">Rolls</h3>
|
||||
<p class="menu-panel-sub">8 pieces per roll</p>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Rainbow Roll</div><div class="menu-dish-desc">Salmon, tuna, avocado, cucumber</div></div>
|
||||
<div class="menu-dish-price">€16</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Dragon Roll</div><div class="menu-dish-desc">Eel, cucumber, avocado, unagi sauce</div></div>
|
||||
<div class="menu-dish-price">€17</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Spicy Tuna</div><div class="menu-dish-desc">Tuna, sriracha mayo, cucumber, crispy shallot</div></div>
|
||||
<div class="menu-dish-price">€14</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">California Roll</div><div class="menu-dish-desc">Crab stick, avocado, cucumber, tobiko</div></div>
|
||||
<div class="menu-dish-price">€12</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Vegetable Roll</div><div class="menu-dish-desc">Avocado, cucumber, carrot, asparagus</div></div>
|
||||
<div class="menu-dish-price">€9</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-panel">
|
||||
<p class="menu-panel-tag">メイン / Mains</p>
|
||||
<h3 class="menu-panel-title">Mains</h3>
|
||||
<p class="menu-panel-sub">Rice bowls & cooked dishes</p>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Salmon Teriyaki</div><div class="menu-dish-desc">Grilled salmon, teriyaki, steamed rice, salad</div></div>
|
||||
<div class="menu-dish-price">€18</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Chicken Katsu</div><div class="menu-dish-desc">Breaded chicken, katsu curry, jasmine rice</div></div>
|
||||
<div class="menu-dish-price">€16</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Tonkotsu Ramen</div><div class="menu-dish-desc">12-hour broth, chashu pork, soft egg, nori, noodles</div></div>
|
||||
<div class="menu-dish-price">€17</div>
|
||||
</div>
|
||||
<div class="menu-dish">
|
||||
<div><div class="menu-dish-name">Vegetable Tempura</div><div class="menu-dish-desc">Seasonal vegetables, light batter, tentsuyu dip</div></div>
|
||||
<div class="menu-dish-price">€14</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OMAKASE FEATURE -->
|
||||
<section class="omakase" id="omakase">
|
||||
<div class="omakase-img reveal"></div>
|
||||
<div class="omakase-text reveal">
|
||||
<p class="omakase-tag">体験 / Omakase Experience</p>
|
||||
<h3 class="omakase-title">Let the chef decide your meal</h3>
|
||||
<p class="omakase-desc">Sit at the counter. Watch the knife. Surrender to the seasons. Our omakase menu changes every week — whatever is freshest, most seasonal, most exceptional. Typically 12–15 courses over 90 minutes.</p>
|
||||
<p class="omakase-desc">The chef will guide you through each piece — its origin, its character, why it was chosen today. This is sushi as meditation.</p>
|
||||
<p class="omakase-price">FROM</p>
|
||||
<p class="omakase-amount">€65 per person</p>
|
||||
<a href="#location" class="omakase-link">Reserve your omakase seat →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IZAKAYA / DRINKS -->
|
||||
<section class="izakaya" id="drinks">
|
||||
<div class="izakaya-inner">
|
||||
<div class="izakaya-header">
|
||||
<div>
|
||||
<p style="font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;">居酒屋 / Drinks</p>
|
||||
<h2 class="izakaya-title">Izakaya</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drinks-grid">
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Sake Toko</div>
|
||||
<div class="drink-style">Junmai, chilled, 300ml</div>
|
||||
<div class="drink-price">from €18</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Sake Daiginjo</div>
|
||||
<div class="drink-style">Premium, floral notes</div>
|
||||
<div class="drink-price">from €28</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Asahi Draft</div>
|
||||
<div class="drink-style">Japanese lager, 330ml</div>
|
||||
<div class="drink-price">€4.50</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Sapporo</div>
|
||||
<div class="drink-style">Japanese lager, 330ml</div>
|
||||
<div class="drink-price">€4.50</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name"> plum wine</div>
|
||||
<div class="drink-style">Umeshu, on the rocks</div>
|
||||
<div class="drink-price">€7</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Yuzu Highball</div>
|
||||
<div class="drink-style">Whiskey, yuzu, soda</div>
|
||||
<div class="drink-price">€9</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Japanese Whisky</div>
|
||||
<div class="drink-style">Suntory Toki, on the rocks</div>
|
||||
<div class="drink-price">€10</div>
|
||||
</div>
|
||||
<div class="drink-item">
|
||||
<div class="drink-name">Green Tea</div>
|
||||
<div class="drink-style">Matcha hot, house blend</div>
|
||||
<div class="drink-price">€4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REVIEWS -->
|
||||
<section class="reviews-section" id="reviews">
|
||||
<div class="reviews-inner">
|
||||
<div class="reviews-header">
|
||||
<h2 class="reveal">What guests say</h2>
|
||||
<p class="reveal">★★★★★ Google · TripAdvisor · TheFork</p>
|
||||
</div>
|
||||
<div class="reviews-grid">
|
||||
<div class="review-item reveal">
|
||||
<div class="review-stars">★★★★★</div>
|
||||
<p class="review-text">"The omakase experience was the best meal of my life. Chef Kenji's knife work is mesmerising. The otoro melted on my tongue. An absolute must in Benalmádena."</p>
|
||||
<div class="review-author">— Marco T., Google</div>
|
||||
</div>
|
||||
<div class="review-item reveal">
|
||||
<div class="review-stars">★★★★★</div>
|
||||
<p class="review-text">"We did the omakase for our anniversary. The chef explained every piece. The attention to detail, the seasonality, the presentation — this is Michelin-starred quality without the pretension."</p>
|
||||
<div class="review-author">— Laura & David, TripAdvisor</div>
|
||||
</div>
|
||||
<div class="review-item reveal">
|
||||
<div class="review-stars">★★★★★</div>
|
||||
<p class="review-text">"As someone who has eaten sushi in Tokyo, this is the real thing. The fish quality is exceptional, the rice has perfect seasoning, and the sake list is impressive. Kaito is exceptional."</p>
|
||||
<div class="review-author">— Yuki N., TheFork</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LOCATION -->
|
||||
<section class="location" id="location">
|
||||
<div class="location-inner">
|
||||
<div class="location-block reveal">
|
||||
<h3>Visit Us</h3>
|
||||
<div class="hours-row"><span>Monday</span><span>Closed</span></div>
|
||||
<div class="hours-row"><span>Tuesday — Thursday</span><span>18:00 — 23:00</span></div>
|
||||
<div class="hours-row"><span>Friday — Saturday</span><span>18:00 — 00:00</span></div>
|
||||
<div class="hours-row"><span>Sunday</span><span>13:00 — 22:00</span></div>
|
||||
<div style="margin-top:2rem;">
|
||||
<p class="contact-line">📍 Av. Antonio Machado, 128<br>29630 Benalmádena Costa, Spain</p>
|
||||
<p class="contact-line" style="margin-top:0.8rem;">📞 <a href="tel:+34952572001">+34 952 572 001</a></p>
|
||||
<p class="contact-line">✉️ <a href="mailto:info@kaitosushi.es">info@kaitosushi.es</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-placeholder reveal">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1=s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="footer-logo">KAITO</p>
|
||||
<p>Av. Antonio Machado, 128 · 29630 Benalmádena Costa · +34 952 572 001</p>
|
||||
<p style="margin-top:0.5rem;opacity:0.3;">© 2026 Kaito Sushi. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const nav = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||
a.addEventListener('click', e => { e.preventDefault();
|
||||
const t = document.querySelector(a.getAttribute('href'));
|
||||
if(t) t.scrollIntoView({behavior:'smooth',block:'start'});
|
||||
});
|
||||
});
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); }
|
||||
});
|
||||
}, {threshold: 0.1});
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user