133 lines
6.6 KiB
HTML
133 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Кофейня</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--coffee:#2C1810;--coffee-light:#3D2317;--gold:#D4A574}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--white);background:var(--ink)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,var(--coffee) 0%,var(--ink) 100%);text-align:center;padding:120px 24px}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:16px;color:var(--gold)}
|
||
.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 32px}
|
||
.hero .emoji{font-size:64px;margin-bottom:24px}
|
||
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.btn:hover{background:#e6b885}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:48px;text-align:center;color:var(--gold)}
|
||
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
|
||
.menu-category{background:var(--coffee);border-radius:16px;padding:32px}
|
||
.menu-category h3{font-size:22px;font-weight:700;margin-bottom:24px;color:var(--gold);border-bottom:1px solid var(--coffee-light);padding-bottom:12px}
|
||
.menu-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--coffee-light)}
|
||
.menu-item:last-child{border-bottom:none}
|
||
.menu-item-name{font-weight:500}
|
||
.menu-item-price{color:var(--gold);font-weight:700;font-size:18px}
|
||
.menu-item-desc{color:var(--gray-500);font-size:14px;margin-top:4px}
|
||
.info-section{background:var(--coffee)}
|
||
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;text-align:center}
|
||
.info-item{padding:24px}
|
||
.info-item .emoji{font-size:48px;margin-bottom:16px}
|
||
.info-item h3{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--gold)}
|
||
.info-item p{color:var(--gray-500)}
|
||
.cta{text-align:center;padding:80px 24px;background:linear-gradient(135deg,var(--ink) 0%,var(--coffee) 100%)}
|
||
.cta h2{font-size:36px;font-weight:700;margin-bottom:16px;color:var(--gold)}
|
||
.cta p{color:var(--gray-500);margin-bottom:32px}
|
||
.footer{text-align:center;padding:32px;color:var(--gray-500);font-size:14px}
|
||
@media(max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.menu-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="emoji">☕</div>
|
||
<h1>Кофейня</h1>
|
||
<p>Свежий кофе, уютная атмосфера и лучшие напитки в городе</p>
|
||
<a class="btn" href="#menu">Посмотреть меню</a>
|
||
</section>
|
||
<section id="menu" class="section">
|
||
<h2>Наше меню</h2>
|
||
<div class="menu-grid">
|
||
<div class="menu-category">
|
||
<h3>☕ Кофе</h3>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Эспрессо</div><div class="menu-item-desc">Классика итальянского кофе</div></div>
|
||
<div class="menu-item-price">400 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Капучино</div><div class="menu-item-desc">Нежная молочная пенка</div></div>
|
||
<div class="menu-item-price">650 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Латте</div><div class="menu-item-desc">Мягкий вкус с молоком</div></div>
|
||
<div class="menu-item-price">700 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Раффе</div><div class="menu-item-desc">Сливочный кофейный коктейль</div></div>
|
||
<div class="menu-item-price">750 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="menu-category">
|
||
<h3>🧊 Холодные напитки</h3>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Айс-латте</div><div class="menu-item-desc">Холодный латте со льдом</div></div>
|
||
<div class="menu-item-price">750 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Фрапучино</div><div class="menu-item-desc">Кофейный коктейль со льдом</div></div>
|
||
<div class="menu-item-price">850 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Лимонад</div><div class="menu-item-desc">Домашний лимонад</div></div>
|
||
<div class="menu-item-price">600 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="menu-category">
|
||
<h3>🥐 Десерты</h3>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Круассан</div><div class="menu-item-desc">Свежий, с шоколадом</div></div>
|
||
<div class="menu-item-price">500 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Чизкейк</div><div class="menu-item-desc">Классический нью-йорк</div></div>
|
||
<div class="menu-item-price">700 ₸</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div><div class="menu-item-name">Кексы</div><div class="menu-item-desc">Ассортимент на выбор</div></div>
|
||
<div class="menu-item-price">400 ₸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section info-section">
|
||
<div class="container">
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<div class="emoji">📍</div>
|
||
<h3>Адрес</h3>
|
||
<p>ул. Примерная, 12<br>Алматы, Казахстан</p>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="emoji">🕐</div>
|
||
<h3>Часы работы</h3>
|
||
<p>Пн-Пт: 8:00 - 22:00<br>Сб-Вс: 9:00 - 23:00</p>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="emoji">📞</div>
|
||
<h3>Контакты</h3>
|
||
<p>+7 (700) 000-00-00<br>hello@coffee.kz</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="cta">
|
||
<h2>Ждём вас!</h2>
|
||
<p>Приходите попробовать наш кофе или закажите доставку</p>
|
||
<a class="btn" href="https://wa.me/77000000000">Заказать в WhatsApp</a>
|
||
</section>
|
||
<footer class="footer">
|
||
<p>© 2026 Кофейня. Все права защищены.</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|