227 lines
15 KiB
HTML
227 lines
15 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>
|
||
<div style="background:var(--primary-light);padding:24px;border-radius:12px;border-left:4px solid var(--primary)">
|
||
<p style="font-size:18px;font-weight:700;color:var(--primary-dark);margin-bottom:8px">🎯 Наша миссия</p>
|
||
<p>Сохранять и передавать традиции ручного вязания, создавать сообщество талантливых и добрых людей, дарить тепло наших рук детям и взрослым, которым нужна забота и поддержка.</p>
|
||
</div>
|
||
<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="babies" class="section">
|
||
<div class="container">
|
||
<h2 class="reveal">👶 Для малышей</h2>
|
||
<p class="reveal" style="text-align:center;max-width:700px;margin:0 auto 40px;font-size:18px">Мы вяжем тёплые вещи для недоношенных детей и передаём их в перинатальный центр Уральска</p>
|
||
|
||
<div class="grid">
|
||
<div class="card reveal" style="background:#FFF5F9">
|
||
<h3 style="color:#D63384">🧢 Шапочки для новорождённых</h3>
|
||
<p><strong>Размеры:</strong> 30-32 см (для веса 1-2 кг), 34-36 см (для веса 2-3 кг)</p>
|
||
<p><strong>Материалы:</strong> гипоаллергенная пряжа из мериноса, альпака, детский хлопок</p>
|
||
<p><strong>Особенности:</strong> бесшовное вязание, мягкие нити, никаких грубых узлов</p>
|
||
<p><strong>Нужно на одного малыша:</strong> 2-3 шапочки</p>
|
||
</div>
|
||
|
||
<div class="card reveal" style="background:#F0F7FF">
|
||
<h3 style="color:#0066CC">🧦 Носочки для крошек</h3>
|
||
<p><strong>Размеры:</strong> 5-7 см стопа (для веса 1-2 кг), 8-10 см (для веса 2-3 кг)</p>
|
||
<p><strong>Материалы:</strong> специальная носочная пряжа для детей, шерсть мериноса</p>
|
||
<p><strong>Особенности:</strong> свободная резинка, плоские швы, натуральные красители</p>
|
||
<p><strong>Нужно на одного малыша:</strong> 3-4 пары носочков</p>
|
||
</div>
|
||
|
||
<div class="card reveal" style="background:#FFF8E6">
|
||
<h3 style="color:#CC8800">🧤 Царапки-варежки</h3>
|
||
<p><strong>Размер:</strong> универсальный для новорождённых</p>
|
||
<p><strong>Материалы:</strong> тонкий хлопок, бамбуковая пряжа</p>
|
||
<p><strong>Особенности:</strong> защита от случайных царапин, воздухопроницаемые</p>
|
||
<p><strong>Нужно на одного малыша:</strong> 2-3 пары</p>
|
||
</div>
|
||
|
||
<div class="card reveal" style="background:#F5FFF5">
|
||
<h3 style="color:#228B22">👕 Боди-пеленки</h3>
|
||
<p><strong>Размеры:</strong> 44-50 (для веса 1-2 кг), 52-56 (для веса 2-3 кг)</p>
|
||
<p><strong>Материалы:</strong> детский хлопок с добавлением шёлка для терморегуляции</p>
|
||
<p><strong>Особенности:</strong> застёжки-кнопки, свободный крой для комфорта</p>
|
||
<p><strong>Нужно на одного малыша:</strong> 2-3 изделия</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-top:32px;background:var(--primary-light)">
|
||
<h3 style="color:var(--primary-dark)">💜 Как помочь?</h3>
|
||
<ul style="margin-left:20px">
|
||
<li>Приходите на встречи клуба — научим вязать специальные изделия для малышей</li>
|
||
<li>Приносите качественную пряжу (меринос, альпака, детский хлопок)</li>
|
||
<li>Готовые работы передаём через координатора раз в месяц</li>
|
||
<li>Финансовая помощь на закупку пряжи — по согласованию</li>
|
||
</ul>
|
||
<p style="margin-top:16px;font-weight:700;color:var(--primary-dark)">📞 Координатор направления: +7 (777) 123-45-67</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="team" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2 class="reveal">Наши участники</h2>
|
||
<p class="reveal" style="text-align:center;max-width:700px;margin:0 auto 40px">Познакомьтесь с нашими талантливыми мастерицами — хранительницами традиций вязания</p>
|
||
<div class="grid">
|
||
<div class="card reveal" style="text-align:center">
|
||
<img src="https://loremflickr.com/280/280/woman,knitting" alt="Участник клуба" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:4px solid var(--primary-light)">
|
||
<h3 style="color:var(--primary-dark)">Елена</h3>
|
||
<p style="color:var(--gray-500);font-size:14px;margin-bottom:12px">Основатель клуба</p>
|
||
<p>Вяжет более 20 лет, любит сложные араны и косы. Обучает новичков основам вязания.</p>
|
||
</div>
|
||
<div class="card reveal" style="text-align:center">
|
||
<img src="https://loremflickr.com/280/280/woman,craft" alt="Участник клуба" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:4px solid var(--primary-light)">
|
||
<h3 style="color:var(--primary-dark)">Мария</h3>
|
||
<p style="color:var(--gray-500);font-size:14px;margin-bottom:12px">Мастер детских изделий</p>
|
||
<p>Специалист по вязанию для малышей. Создаёт невероятно нежные пинетки и шапочки.</p>
|
||
</div>
|
||
<div class="card reveal" style="text-align:center">
|
||
<img src="https://loremflickr.com/280/280/woman,yarn" alt="Участник клуба" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:4px solid var(--primary-light)">
|
||
<h3 style="color:var(--primary-dark)">Ольга</h3>
|
||
<p style="color:var(--gray-500);font-size:14px;margin-bottom:12px">Эксперт по узорам</p>
|
||
<p>Знает сотни узоров, помогает подбирать схемы для индивидуальных проектов.</p>
|
||
</div>
|
||
<div class="card reveal" style="text-align:center">
|
||
<img src="https://loremflickr.com/280/280/woman,wool" alt="Участник клуба" style="width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:4px solid var(--primary-light)">
|
||
<h3 style="color:var(--primary-dark)">Наталья</h3>
|
||
<p style="color:var(--gray-500);font-size:14px;margin-bottom:12px">Мастер носочного вязания</p>
|
||
<p>Вяжет потрясающие носки с жаккардом. Научит вязать на 5 спицах за 2 встречи.</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>
|