388 lines
25 KiB
HTML
388 lines
25 KiB
HTML
<!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>
|