catalog: кликабельные карточки изделий
This commit is contained in:
parent
579b1a7831
commit
251835dd6c
54
index.html
54
index.html
@ -106,30 +106,36 @@ tr:hover{background:var(--gray-100)}
|
||||
<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>
|
||||
<a href="hats.html" style="text-decoration:none;color:inherit">
|
||||
<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>
|
||||
</a>
|
||||
<a href="vests.html" style="text-decoration:none;color:inherit">
|
||||
<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>
|
||||
</a>
|
||||
<a href="socks.html" style="text-decoration:none;color:inherit">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
83
socks.html
Normal file
83
socks.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!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>На наших встречах мы осваиваем вязание на 5 спицах, учимся вязать пятку и мысок, подбираем красивые узоры для манжет и стопы.</p>
|
||||
</div>
|
||||
|
||||
<div class="gallery">
|
||||
<img src="https://picsum.photos/seed/socks1/400/300" alt="Носки 1">
|
||||
<img src="https://picsum.photos/seed/socks2/400/300" alt="Носки 2">
|
||||
<img src="https://picsum.photos/seed/socks3/400/300" alt="Носки 3">
|
||||
<img src="https://picsum.photos/seed/socks4/400/300" alt="Носки 4">
|
||||
</div>
|
||||
|
||||
<div class="specs">
|
||||
<h2>Характеристики</h2>
|
||||
<ul>
|
||||
<li><strong>Материалы:</strong> носочная пряжа с полиамидом, мериносовая шерсть, альпака</li>
|
||||
<li><strong>Сезон:</strong> осень, зима, весна</li>
|
||||
<li><strong>Техники:</strong> вязание на 5 спицах, пятка-бумеранг, круговая пятка</li>
|
||||
<li><strong>Размеры:</strong> от 35 до 45 (индивидуально)</li>
|
||||
<li><strong>Время вязания:</strong> 3-4 встречи клуба</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>
|
||||
83
vests.html
Normal file
83
vests.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!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/vest1/400/300" alt="Жилетка 1">
|
||||
<img src="https://picsum.photos/seed/vest2/400/300" alt="Жилетка 2">
|
||||
<img src="https://picsum.photos/seed/vest3/400/300" alt="Жилетка 3">
|
||||
<img src="https://picsum.photos/seed/vest4/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> от XS до XXL (по размерной сетке)</li>
|
||||
<li><strong>Время вязания:</strong> 4-6 встреч клуба</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>
|
||||
Loading…
Reference in New Issue
Block a user