haitham/hostpioneers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs

Browse Source
This commit is contained in:
Horus AI
2026-04-24 12:58:02 +02:00
parent 51d7df0f26
commit 9406bdc06b
19 changed files with 7092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/ristorante/italian/index.html
+457
View File
@@ -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>