421 lines
23 KiB
HTML
421 lines
23 KiB
HTML
<!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>
|