355 lines
19 KiB
HTML
355 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Shkor beauty — корейская косметика в Минске (прототип витрины)</title>
|
||
<meta name="description" content="Shkor beauty — витрина магазина корейской косметики: уход за лицом, телом и волосами. Прототип каталога, заказы пока не принимаются.">
|
||
<style>
|
||
:root{
|
||
--ink:#1c1a17; --paper:#faf7f2; --card:#ffffff; --line:#e4ddd2;
|
||
--acc:#0e7a5f; --acc-soft:#e7f2ee; --muted:#6f6a61; --sale:#b3352c;
|
||
--sans:"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
|
||
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5}
|
||
a{color:inherit;text-decoration:none}
|
||
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
|
||
.note{font-family:var(--mono);font-size:12px;background:var(--ink);color:#f4f0e6;padding:6px 0;text-align:center}
|
||
.note b{color:#8fd4bd}
|
||
|
||
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
|
||
.hbar{display:flex;align-items:center;gap:18px;padding:14px 0}
|
||
.logo{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
|
||
.logo span{color:var(--acc)}
|
||
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
|
||
.search{flex:1;display:flex}
|
||
.search input{flex:1;border:1px solid var(--line);border-right:none;padding:10px 14px;font:inherit;font-size:14px;background:var(--paper);border-radius:6px 0 0 6px;outline:none}
|
||
.search input:focus{border-color:var(--acc)}
|
||
.search button{border:none;background:var(--acc);color:#fff;padding:0 16px;border-radius:0 6px 6px 0;cursor:pointer;font:inherit;font-size:14px}
|
||
.hlinks{display:flex;gap:16px;font-size:14px;white-space:nowrap}
|
||
.hlinks a:hover{color:var(--acc)}
|
||
nav.cats{display:flex;gap:4px;overflow-x:auto;padding:0 0 10px;font-size:14px}
|
||
nav.cats a{padding:6px 12px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
|
||
nav.cats a:hover{border-color:var(--acc);color:var(--acc)}
|
||
nav.cats a.all{background:var(--acc-soft);color:var(--acc);font-weight:600}
|
||
|
||
.hero{background:linear-gradient(180deg,var(--acc-soft),var(--paper));border-bottom:1px solid var(--line)}
|
||
.hero .wrap{display:flex;gap:40px;align-items:center;padding-top:52px;padding-bottom:52px;flex-wrap:wrap}
|
||
.hero h1{font-size:clamp(30px,4.5vw,46px);line-height:1.1;letter-spacing:-.02em;max-width:16ch}
|
||
.hero p{margin-top:14px;max-width:48ch;color:var(--muted);font-size:17px}
|
||
.hero .btn{display:inline-block;margin-top:22px;background:var(--acc);color:#fff;padding:13px 26px;border-radius:6px;font-weight:600}
|
||
.hero .btn:hover{filter:brightness(1.08)}
|
||
.rhythm{flex:1;min-width:260px;display:flex;align-items:flex-end;gap:4px;height:120px;opacity:.9}
|
||
.rhythm span{flex:1;background:var(--acc);border-radius:3px 3px 0 0;animation:grow 2.8s ease-in-out infinite}
|
||
@keyframes grow{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
|
||
.rhythm span:nth-child(3n){background:var(--ink)}
|
||
|
||
section{padding:46px 0}
|
||
h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin-bottom:6px}
|
||
.sub{color:var(--muted);font-size:15px;margin-bottom:24px}
|
||
|
||
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
|
||
.cat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 18px;transition:transform .15s ease,border-color .15s ease}
|
||
.cat:hover{transform:translateY(-2px);border-color:var(--acc)}
|
||
.cat .ic{width:38px;height:38px;border-radius:8px;background:var(--acc-soft);margin-bottom:12px;position:relative}
|
||
.cat .ic::after{content:"";position:absolute;inset:11px;background:var(--acc);border-radius:50%}
|
||
.cat.a .ic::after{border-radius:2px}
|
||
.cat.b .ic::after{height:6px;top:16px}
|
||
.cat.c .ic::after{width:6px;left:16px}
|
||
.cat.d .ic::after{border-radius:50%;inset:14px 11px}
|
||
.cat h3{font-size:16px;margin-bottom:4px}
|
||
.cat p{font-size:13px;color:var(--muted)}
|
||
|
||
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
|
||
.chips a{font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
|
||
.chips a:hover{border-color:var(--acc);color:var(--acc)}
|
||
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
|
||
.p{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease}
|
||
.p:hover{box-shadow:0 6px 18px rgba(28,26,23,.08)}
|
||
.ph{aspect-ratio:1/1;background:var(--acc-soft);display:flex;align-items:center;justify-content:center;position:relative}
|
||
.ph .b{font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--acc);border:1.5px solid var(--acc);padding:8px 14px;border-radius:4px;background:var(--card)}
|
||
.ph .tag{position:absolute;top:10px;left:10px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px}
|
||
.ph .tag.new{background:var(--acc)}
|
||
.pb{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
|
||
.pb .cat-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
|
||
.pb .brand{font-size:12px;font-weight:700;color:var(--acc);margin-top:4px}
|
||
.pb h3{font-size:14.5px;font-weight:400;line-height:1.35;margin:4px 0 10px;flex:1}
|
||
.price{display:flex;align-items:baseline;gap:8px}
|
||
.price .now{font-size:17px;font-weight:700}
|
||
.price .old{font-size:13px;color:var(--muted);text-decoration:line-through}
|
||
.p button{margin-top:12px;border:1.5px solid var(--ink);background:transparent;padding:9px;font:inherit;font-size:13.5px;font-weight:600;border-radius:6px;cursor:pointer;transition:.15s}
|
||
.p button:hover{background:var(--ink);color:#fff}
|
||
|
||
.brands{display:flex;flex-wrap:wrap;gap:10px}
|
||
.brands span{font-family:var(--mono);font-size:13px;border:1px solid var(--line);padding:8px 16px;border-radius:6px;background:var(--card);color:var(--muted)}
|
||
.brands span:hover{color:var(--acc);border-color:var(--acc)}
|
||
|
||
.dark{background:var(--ink);color:#f4f0e6}
|
||
.dark .sub{color:#b9b2a4}
|
||
.dark form{display:flex;gap:10px;max-width:480px;margin-top:8px;flex-wrap:wrap}
|
||
.dark input{flex:1;min-width:200px;border:1px solid #4a453d;background:transparent;color:inherit;padding:12px 14px;border-radius:6px;font:inherit;outline:none}
|
||
.dark input:focus{border-color:var(--acc)}
|
||
.dark button{background:var(--acc);border:none;color:#fff;padding:12px 22px;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}
|
||
|
||
footer{padding:30px 0 40px;color:var(--muted);font-size:13.5px}
|
||
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||
footer .proto{font-family:var(--mono);font-size:12px}
|
||
|
||
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;opacity:0;transition:.25s ease;z-index:9}
|
||
#toast.show{transform:translate(-50%,0);opacity:1}
|
||
|
||
@media (max-width:720px){
|
||
.hlinks{display:none}
|
||
.hero .wrap{padding-top:34px;padding-bottom:34px}
|
||
.rhythm{display:none}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="note">Прототип витрины — шаг 1 из плана Shkor beauty. Наполнение демонстрационное, оплата не подключена.</div>
|
||
|
||
<header>
|
||
<div class="wrap">
|
||
<div class="hbar">
|
||
<a class="logo" href="#">Shkor <span>beauty</span><small>корейская косметика · Минск</small></a>
|
||
<div class="search">
|
||
<input type="search" placeholder="Поиск: тонер, пэды, гидрофильное масло…">
|
||
<button>Найти</button>
|
||
</div>
|
||
<div class="hlinks">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#brands">Бренды</a>
|
||
<a href="#sub">Подписка</a>
|
||
</div>
|
||
</div>
|
||
<nav class="cats" aria-label="Разделы">
|
||
<a class="all" href="#catalog">Весь каталог</a>
|
||
<a href="#face">Уход за лицом</a>
|
||
<a href="#body">Уход за телом</a>
|
||
<a href="#hair">Уход за волосами</a>
|
||
<a href="#makeup">Декоративная косметика</a>
|
||
<a href="#acc">Аксессуары</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="hero">
|
||
<div class="wrap">
|
||
<div>
|
||
<h1>Корейский уход — с полки до двери за 1 день</h1>
|
||
<p>Каталог проверенных K-beauty брендов в Минске: очищение, тонизирование, сыворотки, SPF. Самовывоз и доставка по Беларуси.</p>
|
||
<a class="btn" href="#catalog">Смотреть каталог</a>
|
||
</div>
|
||
<div class="rhythm" aria-hidden="true">
|
||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="catalog">
|
||
<div class="wrap">
|
||
<h2>Каталог</h2>
|
||
<p class="sub">Пять разделов, как у эталона рынка — структура навигации Korealab.</p>
|
||
<div class="catgrid">
|
||
<a class="cat a" href="#face"><span class="ic"></span><h3>Уход за лицом</h3><p>Очищение, тонеры, сыворотки, маски, SPF</p></a>
|
||
<a class="cat b" href="#body"><span class="ic"></span><h3>Уход за телом</h3><p>Гели для душа, лосьоны, кремы для рук</p></a>
|
||
<a class="cat c" href="#hair"><span class="ic"></span><h3>Уход за волосами</h3><p>Шампуни, маски, ампулы, филлеры</p></a>
|
||
<a class="cat d" href="#makeup"><span class="ic"></span><h3>Декоративная косметика</h3><p>Тинты, BB-кремы, бальзамы для губ</p></a>
|
||
<a class="cat a" href="#acc"><span class="ic"></span><h3>Аксессуары</h3><p>Спонжи, пады, пилочки, зеркала</p></a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="face" style="padding-top:0">
|
||
<div class="wrap">
|
||
<h2>Уход за лицом</h2>
|
||
<p class="sub">Подкатегории первого уровня — быстрый вход в нужный шаг рутины.</p>
|
||
<div class="chips">
|
||
<a href="#demo">Очищение</a><a href="#demo">Тонизирование</a><a href="#demo">Сыворотки и эссенции</a>
|
||
<a href="#demo">Патчи для глаз</a><a href="#demo">Тканевые маски</a><a href="#demo">Кремы</a>
|
||
<a href="#demo">Солнцезащитные средства</a><a href="#demo">Средства с кислотами</a>
|
||
</div>
|
||
<div class="grid" id="demo">
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="tag">−30%</span><span class="b">SKIN627</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Сыворотки</span><span class="brand">SKIN627</span>
|
||
<h3>Увлажняющая сыворотка для лица Hyaluron Centella Ampoule</h3>
|
||
<div class="price"><span class="now">35,00 руб.</span><span class="old">50,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="tag new">Новинка</span><span class="b">JMsolution</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Пэды</span><span class="brand">JMsolution</span>
|
||
<h3>Увлажняющие пэды с гиалуроновой кислотой Multi Hyaluronic</h3>
|
||
<div class="price"><span class="now">59,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="b">Beauty of Joseon</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">SPF</span><span class="brand">Beauty of Joseon</span>
|
||
<h3>Солнцезащитный гель Relief Sun SPF50+ PA++++</h3>
|
||
<div class="price"><span class="now">49,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="tag">−25%</span><span class="b">Biodance</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Маски</span><span class="brand">Biodance</span>
|
||
<h3>Коллагеновая маска-пленка Collagen Wrapping Peel-off Mask</h3>
|
||
<div class="price"><span class="now">12,00 руб.</span><span class="old">16,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="b">Anua</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Тонеры</span><span class="brand">Anua</span>
|
||
<h3>Успокаивающий тонер с сердечником Centella Toner 77%</h3>
|
||
<div class="price"><span class="now">62,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="b">Banila Co</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Очищение</span><span class="brand">Banila Co</span>
|
||
<h3>Гидрофильное масло Clean It Zero Original</h3>
|
||
<div class="price"><span class="now">54,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="b">SKIN627</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Сыворотки</span><span class="brand">SKIN627</span>
|
||
<h3>Сыворотка для лица с ретинолом Retinol Pantenol Ampoule</h3>
|
||
<div class="price"><span class="now">35,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="p">
|
||
<div class="ph"><span class="tag new">Новинка</span><span class="b">A'PIEU</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Патчи</span><span class="brand">A'PIEU</span>
|
||
<h3>Патчи для глаз с молочной кислотой Milk One-Day Perfector</h3>
|
||
<div class="price"><span class="now">18,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="body" style="padding-top:0">
|
||
<div class="wrap">
|
||
<h2>Уход за телом и волосами</h2>
|
||
<p class="sub">Витрина разделов вне лица — по мотивам карточек эталона.</p>
|
||
<div class="grid">
|
||
<article class="p">
|
||
<div class="ph"><span class="b">WEPROVE</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Для душа</span><span class="brand">WEPROVE</span>
|
||
<h3>Обновляющий гель для душа Renewing Aloe Shower Gel</h3>
|
||
<div class="price"><span class="now">29,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="p">
|
||
<div class="ph"><span class="tag">−15%</span><span class="b">WEPROVE</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Шампуни</span><span class="brand">WEPROVE</span>
|
||
<h3>Восстанавливающий шампунь Daily Hair Repairing Shampoo</h3>
|
||
<div class="price"><span class="now">23,60 руб.</span><span class="old">27,80 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="p">
|
||
<div class="ph"><span class="b">Care:Nel</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Кремы для рук</span><span class="brand">Care:Nel</span>
|
||
<h3>Питательный крем для рук с ши и центеллой</h3>
|
||
<div class="price"><span class="now">14,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
<article class="p">
|
||
<div class="ph"><span class="b">Ciracle</span></div>
|
||
<div class="pb">
|
||
<span class="cat-l">Аксессуары</span><span class="brand">Ciracle</span>
|
||
<h3>Силиконовый спонж для умывания с чехлом</h3>
|
||
<div class="price"><span class="now">9,00 руб.</span></div>
|
||
<button>В корзину</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="brands">
|
||
<div class="wrap">
|
||
<h2>Бренды</h2>
|
||
<p class="sub">Формат «Алфавит брендов» как у эталона — вход через доверие к марке.</p>
|
||
<div class="brands">
|
||
<span>A'PIEU</span><span>ANSKIN</span><span>Anua</span><span>Atopalm</span>
|
||
<span>AXIS-Y</span><span>Banila Co</span><span>Beauty of Joseon</span><span>Biodance</span>
|
||
<span>Care:Nel</span><span>Celimax</span><span>Cos de Baha</span><span>JMsolution</span>
|
||
<span>SKIN627</span><span>WEPROVE</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dark" id="sub">
|
||
<div class="wrap">
|
||
<h2>Подписка на поступления</h2>
|
||
<p class="sub">Одно письмо в неделю: новинки, скидки и разборы составов. Без спама.</p>
|
||
<form onsubmit="event.preventDefault();toast('Прототип: подписка не подключена')">
|
||
<input type="email" placeholder="your@email.com" required>
|
||
<button>Подписаться</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="wrap">
|
||
<div>Shkor beauty — витрина корейской косметики. Прототип шага 1: каталог без платежей.</div>
|
||
<div class="proto">собрано харнесом Simbiot · кооператив 42 · cil.by</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="toast" role="status"></div>
|
||
<script>
|
||
function toast(t){
|
||
var el=document.getElementById('toast');
|
||
el.textContent=t;el.classList.add('show');
|
||
clearTimeout(el._t);el._t=setTimeout(function(){el.classList.remove('show')},2200);
|
||
}
|
||
document.querySelectorAll('.p button').forEach(function(b){
|
||
b.addEventListener('click',function(){toast('Прототип: заказ и оплата будут на шаге 2')});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|