90 lines
4.8 KiB
HTML
90 lines
4.8 KiB
HTML
<!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=Manrope:wght@400;700&family=Unbounded:wght@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{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--font-head:'Unbounded',sans-serif;--font-body:'Manrope',sans-serif}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 var(--font-body);color:var(--ink);background:var(--white);font-family:var(--font-body)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);text-align:center;padding:120px 0}
|
||
.hero h1{font-family:var(--font-head);font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.section{padding:80px 0;background:var(--white)}
|
||
.section h2{font-family:var(--font-head);font-size:36px;font-weight:700;margin-bottom:24px;text-align:center}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
|
||
.menu-item{background:var(--cyan-50);border-radius:12px;padding:20px;text-align:center}
|
||
.menu-item img{width:100%;height:auto;border-radius:8px;margin-bottom:12px}
|
||
.menu-item h3{font-size:22px;font-weight:700;margin-bottom:8px}
|
||
.menu-item p{font-size:16px;color:var(--gray-500)}
|
||
.contact-links a{display:inline-block;margin:0 10px;color:var(--cyan);text-decoration:none;font-weight:700}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section{padding:48px 20px}.container{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero"><div class="container">
|
||
<h1>Кофейня «Арома Кофе»</h1>
|
||
<p>Тёплая атмосфера, ароматный кофе и вкусные десерты. Приходите за лучшим вкусом в городе!</p>
|
||
<a class="btn" href="#menu">Посмотреть меню</a>
|
||
</div></section>
|
||
|
||
<section id="menu" class="section reveal"><div class="container">
|
||
<h2>Меню</h2>
|
||
<div class="menu-grid">
|
||
<div class="menu-item">
|
||
<img src="https://picsum.photos/seed/espresso/400/300" alt="Эспрессо">
|
||
<h3>Эспрессо</h3>
|
||
<p>Классический ударный кофе — 120 ₽</p>
|
||
</div>
|
||
<div class="menu-item">
|
||
<img src="https://picsum.photos/seed/latte/400/300" alt="Капучино">
|
||
<h3>Капучино</h3>
|
||
<p>Мягкая пенка и молоко — 180 ₽</p>
|
||
</div>
|
||
<div class="menu-item">
|
||
<img src="https://picsum.photos/seed/croissant/400/300" alt="Круассан">
|
||
<h3>Круассан</h3>
|
||
<p>Только свежий, ароматный — 150 ₽</p>
|
||
</div>
|
||
<div class="menu-item">
|
||
<img src="https://picsum.photos/seed/muffin/400/300" alt="Маффин">
|
||
<h3>Маффин</h3>
|
||
<p>С ягодами, шоколадом — 130 ₽</p>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section id="contacts" class="section reveal"><div class="container">
|
||
<h2>Контакты</h2>
|
||
<div class="card">
|
||
<p><strong>Адрес:</strong> ул. Центральная, 10, г. Алматы</p>
|
||
<p><strong>Телефон:</strong> +7 777 123 45 67</p>
|
||
<p><strong>Часы работы:</strong> Пн‑Вс 8:00‑22:00</p>
|
||
<div class="contact-links">
|
||
<a href="https://wa.me/77771234567?text=Здравствуйте!" target="_blank">WhatsApp</a>
|
||
<a href="tel:+77771234567">Позвонить</a>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:24px;">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434508331!2d73.0973961157436!3d53.90453307994671!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x42451c1e6b5fcbc3%3A0x2b5a1c2e2c0de7b9!2sAlmaty%20Center%20Park!5e0!3m2!1sen!2skz!4v1600000000000" width="100%" height="320" style="border:0;border-radius:12px" loading="lazy"></iframe>
|
||
</div>
|
||
</div></section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){if(e.isIntersecting) e.target.classList.add('in');});
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
|
||
</script>
|
||
</body>
|
||
</html>
|