84 lines
4.7 KiB
HTML
84 lines
4.7 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}
|
||
*{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),var(--primary-dark));color:var(--white);padding:60px 24px;text-align:center}
|
||
.hero h1{font:700 clamp(36px,6vw,48px)/1.1 'Unbounded',sans-serif;margin-bottom:16px}
|
||
.back-link{display:inline-block;color:var(--white);text-decoration:none;margin-top:16px;opacity:.9}
|
||
.back-link:hover{opacity:1}
|
||
.section{padding:60px 24px}
|
||
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:40px 0}
|
||
.gallery img{width:100%;height:280px;object-fit:cover;border-radius:12px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:24px}
|
||
.card h2{font:700 28px/1.3 'Unbounded',sans-serif;color:var(--primary-dark);margin-bottom:16px}
|
||
.specs{background:var(--white);border-radius:12px;padding:24px;margin:24px 0}
|
||
.specs ul{list-style:none;padding-left:0}
|
||
.specs li{padding:12px 0;border-bottom:1px solid var(--gray-300)}
|
||
.specs li:last-child{border-bottom:none}
|
||
.btn{display:inline-block;background:var(--primary);color:var(--white);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;margin-top:24px}
|
||
</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>🧢 Шапочки</h1>
|
||
<p>Тёплые и стильные вязаные шапочки</p>
|
||
<a href="index.html#products" class="back-link">← Вернуться к каталогу</a>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="card">
|
||
<h2>Описание</h2>
|
||
<p>Наши шапочки — это сочетание тепла, уюта и стиля. Мы используем различные техники вязания: от классической резинки до сложных арановых узоров и жаккарда.</p>
|
||
<br>
|
||
<p>Каждая шапочка вяжется индивидуально под ваш размер, с учётом всех пожеланий по фасону и цвету.</p>
|
||
</div>
|
||
|
||
<div class="gallery">
|
||
<img src="https://picsum.photos/seed/hat1/400/300" alt="Шапочка 1">
|
||
<img src="https://picsum.photos/seed/hat2/400/300" alt="Шапочка 2">
|
||
<img src="https://picsum.photos/seed/hat3/400/300" alt="Шапочка 3">
|
||
<img src="https://picsum.photos/seed/hat4/400/300" alt="Шапочка 4">
|
||
</div>
|
||
|
||
<div class="specs">
|
||
<h2>Характеристики</h2>
|
||
<ul>
|
||
<li><strong>Материалы:</strong> мериносовая шерсть, альпака, мохер, кашемир</li>
|
||
<li><strong>Сезон:</strong> осень, зима, весна</li>
|
||
<li><strong>Узоры:</strong> резинка, косы, араны, жаккард, соты</li>
|
||
<li><strong>Размеры:</strong> от 52 до 62 см (индивидуально)</li>
|
||
<li><strong>Время вязания:</strong> 2-3 встречи клуба</li>
|
||
<li><strong>Уход:</strong> ручная стирка при 30°C, сушить в расправленном виде</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>📋 Доступные модели</h2>
|
||
<ul>
|
||
<li><strong>Классическая бини</strong> — простая и уютная, подходит всем</li>
|
||
<li><strong>Шапка с помпоном</strong> — игривая и стильная</li>
|
||
<li><strong>Объёмная с косами</strong> — тёплая и эффектная</li>
|
||
<li><strong>Ушанка</strong> — для самых холодных дней</li>
|
||
<li><strong>Тюрбан</strong> — элегантная и необычная</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<a href="index.html#contacts" class="btn">Заказать шапочку</a>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|