341 lines
20 KiB
HTML
341 lines
20 KiB
HTML
<!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>
|