телефон 8 777 206 30 00, Instagram, фото-меню
This commit is contained in:
parent
2bffaab63a
commit
4d61a313ad
112
index.html
112
index.html
@ -12,7 +12,32 @@
|
|||||||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||||||
<style>
|
<style>
|
||||||
a.kt-ai-btn { text-decoration: none; }
|
a.kt-ai-btn { text-decoration: none; }
|
||||||
.menu-list { display: grid; gap: var(--kt-ai-space-4); }
|
|
||||||
|
.menu-photo {
|
||||||
|
position: relative;
|
||||||
|
margin-top: var(--kt-ai-space-6);
|
||||||
|
border-radius: var(--kt-ai-radius-lg, 12px);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--kt-ai-border);
|
||||||
|
background: var(--kt-ai-bg-soft);
|
||||||
|
}
|
||||||
|
.menu-photo img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.menu-photo figcaption {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 50%;
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--kt-ai-fg-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-list { display: grid; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); }
|
||||||
.menu-item {
|
.menu-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
@ -32,6 +57,13 @@
|
|||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
color: var(--kt-ai-fg-muted);
|
color: var(--kt-ai-fg-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--kt-ai-space-3);
|
||||||
|
margin-top: var(--kt-ai-space-6);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -42,6 +74,7 @@
|
|||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
|
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#menu">Меню</a>
|
<a class="kt-ai-btn" data-variant="ghost" href="#menu">Меню</a>
|
||||||
|
<a class="kt-ai-btn" data-variant="ghost" href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener">Instagram</a>
|
||||||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Как нас найти</a>
|
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Как нас найти</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@ -85,13 +118,18 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="menu" class="kt-ai-section" data-divider="true">
|
<section id="menu" class="kt-ai-section" data-divider="true">
|
||||||
<div class="kt-ai-wrap" data-width="narrow">
|
<div class="kt-ai-wrap">
|
||||||
<div class="kt-ai-section-head">
|
<div class="kt-ai-section-head">
|
||||||
<h2>Меню</h2>
|
<h2>Меню</h2>
|
||||||
<p>Коротко и без лишнего. Цены в тенге.</p>
|
<p>Коротко и без лишнего. Цены в тенге.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-list" style="margin-top:var(--kt-ai-space-9)">
|
<figure class="menu-photo">
|
||||||
|
<img src="https://images.unsplash.com/photo-1442550528053-c431ecb55509?w=1400&q=70&auto=format&fit=crop" alt="Чашка кофе на барной стойке кофейни" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22400%22></svg>'">
|
||||||
|
<figcaption>Фото главного напитка дня</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="menu-list">
|
||||||
<div class="menu-cat">Классика</div>
|
<div class="menu-cat">Классика</div>
|
||||||
<div class="menu-item"><span class="name">Эспрессо</span><span class="lead"></span><span class="price">900 ₸</span></div>
|
<div class="menu-item"><span class="name">Эспрессо</span><span class="lead"></span><span class="price">900 ₸</span></div>
|
||||||
<div class="menu-item"><span class="name">Американо</span><span class="lead"></span><span class="price">1 100 ₸</span></div>
|
<div class="menu-item"><span class="name">Американо</span><span class="lead"></span><span class="price">1 100 ₸</span></div>
|
||||||
@ -112,18 +150,80 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery" class="kt-ai-section" data-divider="true">
|
||||||
|
<div class="kt-ai-wrap">
|
||||||
|
<div class="kt-ai-section-head">
|
||||||
|
<h2>Фотоменю</h2>
|
||||||
|
<p>Тот же порядок, что в меню выше: классика, сезон, выпечка.</p>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-8)">
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?w=600&q=70&auto=format&fit=crop" alt="Эспрессо" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Эспрессо · 900 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?w=600&q=70&auto=format&fit=crop" alt="Американо" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Американо · 1 100 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1534778101976-62847782c213?w=600&q=70&auto=format&fit=crop" alt="Капучино" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Капучино · 1 400 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=600&q=70&auto=format&fit=crop" alt="Флэт уайт" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Флэт уайт · 1 500 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1541167760496-1628856ab772?w=600&q=70&auto=format&fit=crop" alt="Раф лаванда" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Раф лаванда · 1 600 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1530018607912-eff2daa1bac4?w=600&q=70&auto=format&fit=crop" alt="Какао на кокосовом молоке" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Какао · 1 500 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1515823064-d6e0c04616a7?w=600&q=70&auto=format&fit=crop" alt="Матча латте" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Матча латте · 1 700 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1437418747212-8d9709afab22?w=600&q=70&auto=format&fit=crop" alt="Лимонад с мятой и огурцом" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Лимонад · 1 300 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=600&q=70&auto=format&fit=crop" alt="Крендель с сыром" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Крендель с сыром · 1 200 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1524351199678-941a58a3df50?w=600&q=70&auto=format&fit=crop" alt="Чизкейк" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Чизкейк · 1 400 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="kt-ai-card menu-photo" style="margin-top:0">
|
||||||
|
<img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=600&q=70&auto=format&fit=crop" alt="Круассан миндальный" loading="lazy" onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22338%22></svg>'">
|
||||||
|
<figcaption>Круассан · 1 300 ₸</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="contacts" class="kt-ai-cta">
|
<section id="contacts" class="kt-ai-cta">
|
||||||
<div class="kt-ai-wrap" data-width="narrow">
|
<div class="kt-ai-wrap" data-width="narrow">
|
||||||
<h2>Заходите на чашку</h2>
|
<h2>Заходите на чашку</h2>
|
||||||
<p>Алматы, ул. Абылай хана, 42. Ежедневно с 8:00 до 22:00. Забронировать стол: +7 701 234 56 78.</p>
|
<p>Алматы, ул. Абылай хана, 42. Ежедневно с 8:00 до 22:00.</p>
|
||||||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="tel:+77012345678">Позвонить</a>
|
<div class="cta-row">
|
||||||
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="tel:+87772063000">Позвонить 8 777 206 30 00</a>
|
||||||
|
<a class="kt-ai-btn" data-size="lg" href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener">Instagram</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||||||
<span>© 2026 Зерно</span>
|
<span>© 2026 Зерно</span>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<span>Instagram · Telegram</span>
|
<span>
|
||||||
|
<a href="tel:+87772063000" style="color:var(--kt-ai-fg-muted);text-decoration:none">8 777 206 30 00</a>
|
||||||
|
<span style="color:var(--kt-ai-fg-muted)"> · </span>
|
||||||
|
<a href="https://instagram.com/zero.coffee.kz" target="_blank" rel="noopener" style="color:var(--kt-ai-fg-muted);text-decoration:none">Instagram</a>
|
||||||
|
</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user