169 lines
9.5 KiB
HTML
169 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Клуб вязания 28 петель — Уральск</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--primary: #9B7EBD;
|
||
--primary-light: #E8DFF5;
|
||
--primary-dark: #6B4C9A;
|
||
--ink: #2D2438;
|
||
--white: #FFFFFF;
|
||
--gray-100: #F5F0FA;
|
||
--gray-300: #D4C5E5;
|
||
--gray-500: #7A6C8D;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);padding:100px 24px;text-align:center}
|
||
.hero h1{font:700 clamp(36px,6vw,56px)/1.1 'Unbounded',sans-serif;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:var(--primary-light);max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--white);color:var(--primary-dark);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform .2s}
|
||
.btn:hover{transform:translateY(-2px)}
|
||
.btn-primary{background:var(--primary-dark);color:var(--white)}
|
||
.section h2{font:700 36px/1.2 'Unbounded',sans-serif;margin-bottom:40px;text-align:center;color:var(--primary-dark)}
|
||
.section{padding:80px 24px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:24px;transition:transform .2s}
|
||
.card:hover{transform:translateY(-4px)}
|
||
.card h3{font:700 22px/1.3 'Unbounded',sans-serif;margin-bottom:16px;color:var(--primary-dark)}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
|
||
.table-wrapper{overflow-x:auto}
|
||
table{width:100%;border-collapse:collapse;background:var(--white);border-radius:12px;overflow:hidden}
|
||
th,td{padding:16px;text-align:left;border-bottom:1px solid var(--gray-300)}
|
||
th{background:var(--primary);color:var(--white);font-weight:700}
|
||
tr:hover{background:var(--gray-100)}
|
||
.product-img{width:100%;height:240px;object-fit:cover;border-radius:12px;margin-bottom:16px}
|
||
.contact-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary-dark);text-decoration:none;font-weight:600;margin-bottom:12px}
|
||
.contact-link:hover{text-decoration:underline}
|
||
.instagram{display:inline-block;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:var(--white);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;margin-top:16px}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(max-width:640px){.hero{padding:60px 20px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||
</style>
|
||
<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>">
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<h1>28 петель</h1>
|
||
<p>Клуб вязания в Уральске — где тепло рук создаёт красоту</p>
|
||
<a class="btn" href="#contacts">Связаться с нами</a>
|
||
</section>
|
||
|
||
<section id="history" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">История клуба</h2>
|
||
<div class="card reveal">
|
||
<p>Клуб «28 петель» был основан в 2016 году группой единомышленниц, влюблённых в искусство вязания. В 2026 году нам исполняется 10 лет!</p>
|
||
<br>
|
||
<p>Сегодня наш клуб — это уютное пространство в центре Уральска, где собираются вязальщицы любого уровня: от новичков до мастеров с многолетним опытом. Мы верим, что вязание — это не просто хобби, а способ создать уникальные вещи своими руками, найти новых друзей и провести время в приятной компании.</p>
|
||
<br>
|
||
<p>Наши встречи проходят каждую неделю: мы обучаем основам, осваиваем сложные техники, совместно вяжем большие проекты и просто душевно общаемся за чашкой чая.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="sizes" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2 class="reveal">Размерная сетка</h2>
|
||
<div class="table-wrapper reveal">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Размер</th>
|
||
<th>Обхват груди (см)</th>
|
||
<th>Обхват талии (см)</th>
|
||
<th>Обхват бёдер (см)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>XS (40)</td><td>76-80</td><td>58-62</td><td>84-88</td></tr>
|
||
<tr><td>S (42-44)</td><td>82-88</td><td>64-70</td><td>90-96</td></tr>
|
||
<tr><td>M (46-48)</td><td>90-96</td><td>72-78</td><td>98-104</td></tr>
|
||
<tr><td>L (50-52)</td><td>98-104</td><td>80-86</td><td>106-112</td></tr>
|
||
<tr><td>XL (54-56)</td><td>106-112</td><td>88-94</td><td>114-120</td></tr>
|
||
<tr><td>XXL (58-60)</td><td>114-120</td><td>96-102</td><td>122-128</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card reveal" style="margin-top:24px">
|
||
<h3>📏 Как снять мерки</h3>
|
||
<ul>
|
||
<li><strong>Обхват груди:</strong> измеряется по самым выступающим точкам, лента должна проходить горизонтально</li>
|
||
<li><strong>Обхват талии:</strong> измеряется по самому узкому месту туловища</li>
|
||
<li><strong>Обхват бёдер:</strong> измеряется по самым выступающим точкам ягодиц</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="products" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">Наши изделия</h2>
|
||
<div class="grid">
|
||
<div class="card reveal">
|
||
<img src="https://picsum.photos/seed/hat1/400/300" alt="Вязаная шапочка" class="product-img">
|
||
<h3>🧢 Шапочки</h3>
|
||
<p>Тёплые и стильные шапочки из шерстяной пряжи. Вяжем различными узорами: косы, араны, жаккард. Подбираем индивидуальную схему под любой размер.</p>
|
||
<br>
|
||
<p><strong>Материалы:</strong> мериносовая шерсть, альпака, мохер</p>
|
||
<p><strong>Время вязания:</strong> 2-3 встречи</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img src="https://picsum.photos/seed/vest1/400/300" alt="Вязаный жилет" class="product-img">
|
||
<h3>👚 Жилетки</h3>
|
||
<p>Уютные жилетки — идеальный слой для прохладной погоды. Классические модели с пуговицами или современные безрукавки свободного кроя.</p>
|
||
<br>
|
||
<p><strong>Материалы:</strong> полушерсть, хлопок с акрилом</p>
|
||
<p><strong>Время вязания:</strong> 4-6 встреч</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<img src="https://picsum.photos/seed/socks1/400/300" alt="Вязаные носки" class="product-img">
|
||
<h3>🧦 Носочки</h3>
|
||
<p>Тёплые носки ручной работы — лучший подарок для ног. Осваиваем вязание на 5 спицах, узоры для стопы и манжеты с резинкой.</p>
|
||
<br>
|
||
<p><strong>Материалы:</strong> носочная пряжа с добавлением полиамида</p>
|
||
<p><strong>Время вязания:</strong> 3-4 встречи</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2 class="reveal">Контакты</h2>
|
||
<div class="grid">
|
||
<div class="card reveal">
|
||
<h3>📍 Где мы находимся</h3>
|
||
<p>г. Уральск, проспект Достык 45, офис 203</p>
|
||
<br>
|
||
<p><strong>Режим работы:</strong></p>
|
||
<p>Вт, Чт: 15:00 — 20:00</p>
|
||
<p>Сб: 11:00 — 18:00</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>📞 Связаться с нами</h3>
|
||
<a href="tel:+77771234567" class="contact-link">📱 +7 (777) 123-45-67</a>
|
||
<a href="mailto:28petel@example.kz" class="contact-link">✉️ 28petel@example.kz</a>
|
||
<br>
|
||
<a href="https://instagram.com/28petel_uralsk" class="instagram" target="_blank">📸 Мы в Instagram</a>
|
||
</div>
|
||
</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>
|