sozday-sayt-dlya-menyu-s-kyu/index.html

447 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Генацвале — Ресторан грузинской кухни</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Manrope:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍷</text></svg>">
<style>
:root{--wine:#8B1538;--wine-dark:#5C0F26;--gold:#C9A961;--cream:#FFF8F0;--ink:#2D1B18;--gray:#8B7355}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--cream)}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.hero{background:linear-gradient(135deg,var(--wine-dark),var(--wine));color:var(--cream);padding:120px 24px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('https://picsum.photos/seed/georgia1/1920/1080') center/cover;opacity:0.15;animation:slowZoom 30s ease-in-out infinite}
@keyframes slowZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero h1{font:'Lobster',cursive;font-size:84px;margin-bottom:16px;color:var(--gold);text-shadow:2px 2px 8px rgba(0,0,0,0.5);animation:fadeInDown 1s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
.hero p{font-size:24px;opacity:0.95;margin-bottom:24px;animation:fadeIn 1.5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero .decorative-line{width:200px;height:3px;background:var(--gold);margin:32px auto;animation:expandWidth 2s ease}
@keyframes expandWidth{from{width:0}to{width:200px}}
.hero .address{font-size:20px;opacity:0.9;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:12px}
.hero .phone{font-size:28px;font-weight:700;color:var(--gold);margin-top:24px;display:inline-block;padding:16px 32px;background:rgba(201,169,97,0.15);border:2px solid var(--gold);border-radius:50px;transition:all 0.3s}
.hero .phone:hover{background:var(--gold);color:var(--wine-dark);transform:scale(1.05)}
.hero-features{display:flex;justify-content:center;gap:32px;margin-top:48px;flex-wrap:wrap}
.hero-feature{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:20px 28px;border-radius:16px;border:1px solid rgba(255,255,255,0.2);animation:fadeInUp 1.5s ease backwards}
.hero-feature:nth-child(1){animation-delay:0.3s}
.hero-feature:nth-child(2){animation-delay:0.5s}
.hero-feature:nth-child(3){animation-delay:0.7s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-feature span{font-size:32px;display:block;margin-bottom:8px}
.hero-feature p{font-size:14px;opacity:0.9}
.qr-section{background:linear-gradient(135deg,var(--wine),var(--wine-dark));padding:80px 24px;text-align:center}
.qr-section h2{font:'Lobster',cursive;font-size:48px;color:var(--gold);margin-bottom:32px}
.qr-card{background:var(--cream);border-radius:20px;padding:48px;max-width:420px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,0.4);border:3px solid var(--gold)}
.qr-code{width:300px;height:300px;margin:0 auto 28px;background:white;padding:20px;border-radius:12px;box-shadow:inset 0 0 20px rgba(0,0,0,0.1)}
.qr-code img{width:100%;height:100%;object-fit:contain}
.qr-text{font-size:20px;font-weight:600;color:var(--wine);line-height:1.5}
.menu-section{padding:100px 24px;max-width:1200px;margin:0 auto}
.menu-section h2{font:'Lobster',cursive;font-size:56px;text-align:center;margin-bottom:16px;color:var(--wine)}
.menu-section .subtitle{text-align:center;font-size:20px;color:var(--gray);margin-bottom:64px}
.category{margin-bottom:80px;scroll-margin-top:20px}
.category h3{font-size:32px;font-weight:700;color:var(--wine);margin-bottom:32px;padding-bottom:16px;border-bottom:3px solid var(--gold);display:inline-block;position:relative}
.category h3::after{content:'';position:absolute;bottom:-3px;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.menu-item{background:white;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.1);transition:all 0.3s ease;cursor:pointer}
.menu-item:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(0,0,0,0.15)}
.menu-item img{width:100%;height:220px;object-fit:cover;transition:transform 0.3s}
.menu-item:hover img{transform:scale(1.08)}
.menu-item-content{padding:24px}
.menu-item h4{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.menu-item .desc{font-size:14px;color:var(--gray);margin-bottom:16px;line-height:1.6}
.menu-item .price-row{display:flex;justify-content:space-between;align-items:center}
.menu-item .price{font-size:24px;font-weight:700;color:var(--wine)}
.menu-item .currency{font-size:14px;color:var(--gray);margin-left:4px}
.service-notice{background:linear-gradient(135deg,var(--wine-dark),var(--wine));color:var(--cream);padding:60px 24px;text-align:center}
.service-notice p{font-size:20px;max-width:600px;margin:0 auto 12px}
.service-notice .highlight{color:var(--gold);font-weight:700;font-size:28px;display:block;margin-top:12px}
.footer{background:var(--ink);color:var(--cream);padding:80px 24px;text-align:center}
.footer h3{font:'Lobster',cursive;font-size:40px;color:var(--gold);margin-bottom:32px}
.footer p{margin-bottom:16px;font-size:18px}
.footer .contact{font-size:22px;font-weight:600;color:var(--gold);margin:24px 0;display:flex;align-items:center;justify-content:center;gap:12px}
.footer .contact a{color:inherit;text-decoration:none;transition:opacity 0.3s}
.footer .contact a:hover{opacity:0.8}
.footer-hours{margin-top:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,0.1);opacity:0.7}
@media(max-width:768px){
.hero h1{font-size:48px}.hero p{font-size:18px}
.menu-section h2{font-size:40px}.menu-grid{grid-template-columns:1fr}
.qr-code{width:240px;height:240px}.hero-features{flex-direction:column;align-items:center}
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<h1>🍷 Генацвале</h1>
<div class="decorative-line"></div>
<p>Ресторан настоящей грузинской кухни в сердце Астаны</p>
<p style="font-size:18px;opacity:0.8;margin-top:8px">Гостеприимство как искусство, вкус как традиция</p>
<div class="address">
<span>📍</span>
<span>г.Астана, ул.Достык 16</span>
</div>
<div class="hero-features">
<div class="hero-feature">
<span>🔥</span>
<p>Мангал<br>ежедневно</p>
</div>
<div class="hero-feature">
<span>🍷</span>
<p>Винная<br>карта</p>
</div>
<div class="hero-feature">
<span>🎵</span>
<p>Живая<br>музыка</p>
</div>
</div>
<a href="tel:+77083011539" class="phone">📞 7083011539</a>
</div>
</section>
<section class="qr-section">
<div class="container">
<h2>📱 Меню онлайн</h2>
<div class="qr-card">
<div class="qr-code">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://pages.git.vibe42.kz/Tolganay/sozday-sayt-dlya-menyu-s-kyu/" alt="QR код меню">
</div>
<p class="qr-text">Наведите камеру смартфона,<br>чтобы открыть меню</p>
</div>
</div>
</section>
<section class="menu-section">
<div class="container">
<h2>🍽 Наше Меню</h2>
<p class="subtitle">Все цены указаны в тенге (₸)</p>
<div class="category" id="salads">
<h3>🥗 Салаты</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/georgian,salad" alt="Грузинский салат">
<div class="menu-item-content">
<h4>Грузинский салат</h4>
<p class="desc">Свежие овощи с зеленью и ореховой заправкой</p>
<div class="price-row"><span class="price">1 800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/caesar,salad" alt="Цезарь">
<div class="menu-item-content">
<h4>Цезарь с курицей</h4>
<p class="desc">Классика с пармезаном и сухариками</p>
<div class="price-row"><span class="price">2 600</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/vegetable,salad" alt="Овощной">
<div class="menu-item-content">
<h4>Овощной салат</h4>
<p class="desc">Помидоры, огурцы, перец с зеленью</p>
<div class="price-row"><span class="price">1 500</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/caprese,salad" alt="Капрезе">
<div class="menu-item-content">
<h4>Капрезе</h4>
<p class="desc">Томаты, моцарелла, базилик</p>
<div class="price-row"><span class="price">2 400</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="appetizers">
<h3>🥟 Закуски</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/khachapuri,cheese" alt="Хачапури">
<div class="menu-item-content">
<h4>Хачапури по-аджарски</h4>
<p class="desc">Лодочка с сыром сулугуни и яйцом</p>
<div class="price-row"><span class="price">2 800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/georgian,appetizer" alt="Пхали">
<div class="menu-item-content">
<h4>Пхали ассорти</h4>
<p class="desc">Шпинат, свекла, фасоль с грецким орехом</p>
<div class="price-row"><span class="price">1 900</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/beans,georgian" alt="Лобио">
<div class="menu-item-content">
<h4>Лобио в горшочке</h4>
<p class="desc">Фасоль по-грузински с зеленью</p>
<div class="price-row"><span class="price">1 600</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/eggplant,roll" alt="Баклажаны">
<div class="menu-item-content">
<h4>Баклажаны с орехами</h4>
<p class="desc">Рулетики из баклажанов с ореховой начинкой</p>
<div class="price-row"><span class="price">2 100</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="soups">
<h3>🍲 Супы</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/kharcho,soup" alt="Харчо">
<div class="menu-item-content">
<h4>Харчо</h4>
<p class="desc">Наваристый суп с говядиной и ткемали</p>
<div class="price-row"><span class="price">2 400</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/chicken,soup" alt="Чихиртма">
<div class="menu-item-content">
<h4>Чихиртма</h4>
<p class="desc">Куриный суп с яйцом</p>
<div class="price-row"><span class="price">2 100</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/mushroom,soup" alt="Грибной">
<div class="menu-item-content">
<h4>Грибной суп</h4>
<p class="desc">Ароматный суп из шампиньонов</p>
<div class="price-row"><span class="price">1 900</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="hot">
<h3>🥘 Горячие блюда</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/khinkali,dumpling" alt="Хинкали">
<div class="menu-item-content">
<h4>Хинкали (5 шт)</h4>
<p class="desc">С говядиной и свининой, сочные</p>
<div class="price-row"><span class="price">3 200</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/roasted,chicken" alt="Цыпленок">
<div class="menu-item-content">
<h4>Цыпленок табака</h4>
<p class="desc">Жареный цыпленок под прессом</p>
<div class="price-row"><span class="price">5 200</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/beef,potato" alt="Оджахури">
<div class="menu-item-content">
<h4>Оджахури</h4>
<p class="desc">Мясо с картофелем по-домашнему</p>
<div class="price-row"><span class="price">3 800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/chicken,cutlet" alt="Котлеты">
<div class="menu-item-content">
<h4>Котлеты по-киевски</h4>
<p class="desc">Куриные с маслом внутри</p>
<div class="price-row"><span class="price">2 900</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/salmon,grilled" alt="Рыба">
<div class="menu-item-content">
<h4>Рыба на гриле</h4>
<p class="desc">Стейк лосося с овощами</p>
<div class="price-row"><span class="price">6 500</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="mangal">
<h3>🍖 Мангал</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/shashlik,meat" alt="Шашлык">
<div class="menu-item-content">
<h4>Шашлык из свинины</h4>
<p class="desc">На углях, с луком и лавашом</p>
<div class="price-row"><span class="price">4 500</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/lula,kebab" alt="Люля-кебаб">
<div class="menu-item-content">
<h4>Люля-кебаб</h4>
<p class="desc">Из баранины с зеленью</p>
<div class="price-row"><span class="price">3 600</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/pork,ribs" alt="Рёбрышки">
<div class="menu-item-content">
<h4>Свиные рёбрышки</h4>
<p class="desc">Томлёные в медовом соусе</p>
<div class="price-row"><span class="price">4 800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/lamb,grilled" alt="Шашлык из баранины">
<div class="menu-item-content">
<h4>Шашлык из баранины</h4>
<p class="desc">Нежная баранина на углях</p>
<div class="price-row"><span class="price">5 500</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="bakery">
<h3>🥟 Выпечка</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/khachapuri,imeretian" alt="Имеретинский">
<div class="menu-item-content">
<h4>Хачапури имеретинский</h4>
<p class="desc">Круглый с сыром внутри</p>
<div class="price-row"><span class="price">2 200</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/khachapuri,cheese" alt="Мегрельский">
<div class="menu-item-content">
<h4>Хачапури мегрельский</h4>
<p class="desc">С двойным сыром сверху</p>
<div class="price-row"><span class="price">2 600</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/lobiani,bean" alt="Лобиани">
<div class="menu-item-content">
<h4>Лобиани</h4>
<p class="desc">Закрытый пирог с фасолью</p>
<div class="price-row"><span class="price">1 800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/achma,pie" alt="Ачма">
<div class="menu-item-content">
<h4>Ачма</h4>
<p class="desc">Многослойный пирог с сыром</p>
<div class="price-row"><span class="price">2 400</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="desserts">
<h3>🍰 Десерты</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/churchkhela,georgian" alt="Чурчхела">
<div class="menu-item-content">
<h4>Чурчхела</h4>
<p class="desc">Орехи в виноградном соке</p>
<div class="price-row"><span class="price">800</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/baklava,sweet" alt="Пахлава">
<div class="menu-item-content">
<h4>Пахлава грузинская</h4>
<p class="desc">Слоёная с орехами и мёдом</p>
<div class="price-row"><span class="price">1 400</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/pelamushi,pudding" alt="Пеламуши">
<div class="menu-item-content">
<h4>Пеламуши</h4>
<p class="desc">Виноградный пудинг</p>
<div class="price-row"><span class="price">1 200</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
<div class="category" id="drinks">
<h3>🍷 Напитки</h3>
<div class="menu-grid">
<div class="menu-item">
<img src="https://loremflickr.com/400/300/red,wine" alt="Вино">
<div class="menu-item-content">
<h4>Вино домашнее (бокал)</h4>
<p class="desc">Красное / белое / полусладкое</p>
<div class="price-row"><span class="price">1 500</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/lemonade,drink" alt="Лимонад">
<div class="menu-item-content">
<h4>Лимонад домашний</h4>
<p class="desc">Тархун / цитрус / ягоды (0.5л)</p>
<div class="price-row"><span class="price">1 200</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/tea,georgian" alt="Чай">
<div class="menu-item-content">
<h4>Чай грузинский</h4>
<p class="desc">Зелёный / чёрный с чабером</p>
<div class="price-row"><span class="price">600</span><span class="currency">₸</span></div>
</div>
</div>
<div class="menu-item">
<img src="https://loremflickr.com/400/300/coffee,turkish" alt="Кофе">
<div class="menu-item-content">
<h4>Кофе по-восточному</h4>
<p class="desc">В турке, с кардамоном</p>
<div class="price-row"><span class="price">900</span><span class="currency">₸</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="service-notice">
<div class="container">
<p>💝 Обслуживание включено в счёт</p>
<span class="highlight">10%</span>
<p style="margin-top:20px;opacity:0.8;font-size:16px">Спасибо, что выбрали нас!</p>
</div>
</section>
<footer class="footer">
<div class="container">
<h3>🍷 Генацвале</h3>
<p class="contact">📍 г.Астана, ул.Достык 16</p>
<p class="contact">📞 <a href="tel:+77083011539">7083011539</a></p>
<div class="footer-hours">
<p>⏰ Режим работы: ежедневно с 10:00 до 23:00</p>
<p style="margin-top:12px;font-size:14px">Бронь столо по телефону</p>
</div>
</div>
</footer>
</body>
</html>