Compare commits

..

2 Commits

View File

@ -18,7 +18,7 @@
--gray-500: #7A6C8D; --gray-500: #7A6C8D;
} }
*{box-sizing:border-box;margin:0;padding:0} *{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)} 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} .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{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 h1{font:700 clamp(36px,6vw,56px)/1.1 'Cormorant Garamond',cursive,s-serif;margin-bottom:24px}
@ -56,6 +56,10 @@ tr:hover{background:var(--gray-100)}
<span>28 петель</span> <span>28 петель</span>
</h1> </h1>
<p>Благотворительный клуб вязания в Уральске — вяжем с любовью для недоношенных детей</p> <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"> <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="#history">История клуба</a>
<a class="btn" href="#babies">Для малышей</a> <a class="btn" href="#babies">Для малышей</a>
@ -146,14 +150,18 @@ tr:hover{background:var(--gray-100)}
<section id="team" class="section" style="background:var(--gray-100)"> <section id="team" class="section" style="background:var(--gray-100)">
<div class="container"> <div class="container">
<h2 class="reveal">Наши волонтёры</h2> <h2 class="reveal">Наши волонтёры</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px"> <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.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_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.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"> <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_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_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"> <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_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"> <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>