194 lines
14 KiB
HTML
194 lines
14 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&family=Cormorant+Garamond:ital,wght@1,400;1,600&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);font-style:italic}
|
||
.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 'Cormorant Garamond',cursive,s-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">
|
||
<div style="max-width:900px;margin:0 auto;text-align:center">
|
||
<h1 style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap">
|
||
<img src="WhatsApp%20Image%202026-08-14%20at%2023.19.59-2.jpeg" alt="28" style="width:80px;height:80px;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.2)">
|
||
<span>28 петель</span>
|
||
</h1>
|
||
<p>Благотворительный клуб вязания в Уральске — вяжем с любовью для недоношенных детей</p>
|
||
<div style="background:var(--primary-light);padding:24px;border-radius:12px;border-left:4px solid var(--primary);margin:32px auto;max-width:700px;text-align:left">
|
||
<p style="font-size:18px;font-weight:700;color:var(--primary-dark);margin-bottom:8px;font-style:normal">🎯 Наша миссия</p>
|
||
<p style="font-style:italic"><strong>Вязать с любовью для самых маленьких бойцов</strong> — недоношенных деток, которые нуждаются в особом тепле и заботе. Каждое изделие создаётся вручную из гипоаллергенной пряжи и передаётся в перинатальный центр Уральска бесплатно.</p>
|
||
</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px">
|
||
<a class="btn" href="#history">История клуба</a>
|
||
<a class="btn" href="#babies">Для малышей</a>
|
||
<a class="btn" href="#team">Наши волонтёры</a>
|
||
<a class="btn" href="#contacts">Контакты</a>
|
||
</div>
|
||
</div>
|
||
</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>Сегодня наш клуб — это уютное пространство в центре Уральска, где собираются вязальщицы любого уровня: от новичков до мастеров с многолетним опытом. <strong>Наша главная цель — помогать недоношенным детям и их семьям</strong>, создавая тёплые, нежные вещи ручной работы для самых крошечных пациентов перинатального центра.</p>
|
||
<br>
|
||
<p>Наши встречи проходят каждую неделю: мы обучаем основам, осваиваем сложные техники, совместно вяжем большие проекты и просто душевно общаемся за чашкой чая.</p>
|
||
</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 style="text-align:center;margin:40px 0">
|
||
<img src="WhatsApp%20Image%202026-08-18%20at%2011.58.18-1.jpeg" alt="Наш малыш" style="width:100%;max-width:500px;height:350px;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1)">
|
||
</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>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.39.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.39%20_1_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.39%20_2_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40%20_1_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40%20_2_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40%20_3_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:600px;margin:16px auto 0">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40%20_4_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
<img src="WhatsApp%20Image%202026-08-28%20at%2010.59.40%20_5_.jpeg" alt="Волонтёр" style="width:100%;height:250px;object-fit:cover;border-radius:12px">
|
||
</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>
|