232 lines
15 KiB
HTML
232 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>K-Beauty — Корейская косметика</title>
|
||
<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>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--pink:#FF6B9D;--pink-light:#FFE5EF}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,#1a1d24 0%,#2d1f2e 100%);color:var(--white);padding:100px 24px;text-align:center}
|
||
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:clamp(18px,3vw,22px);color:#c9d1d9;max-width:700px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--pink);color:var(--white);padding:16px 32px;border-radius:12px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
|
||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,157,.3)}
|
||
.btn-whatsapp{background:#25D366}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:clamp(28px,4vw,42px);font-weight:700;margin-bottom:40px;text-align:center}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s}
|
||
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.12)}
|
||
.card-img{width:100%;height:240px;object-fit:cover;background:var(--gray-100)}
|
||
.card-body{padding:24px}
|
||
.card-title{font-size:20px;font-weight:700;margin-bottom:12px}
|
||
.card-desc{color:var(--gray-500);font-size:15px;margin-bottom:16px;line-height:1.5}
|
||
.card-price{font-size:24px;font-weight:800;color:var(--pink);margin-bottom:16px}
|
||
.badge{display:inline-block;background:var(--pink-light);color:var(--pink);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;margin-bottom:12px}
|
||
.advantages{background:var(--gray-100)}
|
||
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;max-width:1140px;margin:0 auto}
|
||
.adv-card{text-align:center;padding:32px 24px;background:var(--white);border-radius:16px}
|
||
.adv-icon{font-size:48px;margin-bottom:16px}
|
||
.adv-title{font-size:18px;font-weight:700;margin-bottom:12px}
|
||
.adv-text{color:var(--gray-500);font-size:15px;line-height:1.6}
|
||
.contact-section{background:linear-gradient(135deg,var(--pink) 0%,#FF8FAB 100%);color:var(--white);text-align:center}
|
||
.contact-section h2{color:var(--white)}
|
||
.contact-phone{font-size:clamp(32px,5vw,48px);font-weight:800;margin:24px 0;display:block;color:var(--white);text-decoration:none}
|
||
.contact-note{font-size:18px;opacity:.95;max-width:600px;margin:0 auto 32px}
|
||
.original-banner{background:var(--cyan-50);border:2px solid var(--cyan);border-radius:16px;padding:40px;text-align:center;margin:40px auto;max-width:1140px}
|
||
.original-banner h3{font-size:28px;font-weight:700;margin-bottom:16px;color:var(--ink)}
|
||
.original-banner p{font-size:18px;color:var(--gray-500);max-width:700px;margin:0 auto}
|
||
.original-badge{font-size:64px;margin-bottom:16px}
|
||
footer{background:var(--ink);color:var(--white);text-align:center;padding:40px 24px}
|
||
footer p{opacity:.7;font-size:15px}
|
||
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:640px){.hero{padding:60px 20px}.section{padding:48px 20px}.container{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<h1>🌸 Корейская косметика</h1>
|
||
<p>100% оригинальная уходовая косметика из Кореи. Всё самое популярное и эффективное для вашей кожи в одном месте.</p>
|
||
<a class="btn" href="#catalog">Смотреть каталог</a>
|
||
<a class="btn btn-whatsapp" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать корейскую косметику" style="margin-left:12px">Заказать в WhatsApp</a>
|
||
</section>
|
||
|
||
<div class="original-banner reveal">
|
||
<div class="original-badge">✨</div>
|
||
<h3>100% Оригинальная продукция</h3>
|
||
<p>Гарантирую подлинность каждого продукта. Вся косметика напрямую из Кореи — никаких подделок и реплик. Ваше здоровье и красота в безопасности!</p>
|
||
</div>
|
||
|
||
<section id="catalog" class="section">
|
||
<h2>🔥 Популярные бренды</h2>
|
||
<div class="grid">
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/beauty,joseon,ginseong" alt="Beauty of Joseon">
|
||
<div class="card-body">
|
||
<span class="badge" style="background:#FFD700;color:#000">🥇 #1</span>
|
||
<h3 class="card-title">Beauty of Joseon</h3>
|
||
<p class="card-desc">Сияние, ровный тон, anti-age. Легендарный SPF с рисом и прополисом, сыворотки с ниацинамидом.</p>
|
||
<div class="card-price">от 6 800 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Beauty of Joseon" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/toner,hyaluronic,blue" alt="Torriden">
|
||
<div class="card-body">
|
||
<span class="badge" style="background:#C0C0C0;color:#000">🥈 #2</span>
|
||
<h3 class="card-title">Torriden</h3>
|
||
<p class="card-desc">Увлажнение и восстановление барьера. Гиалуроновая кислота 5D, тонеры для глубокого увлажнения.</p>
|
||
<div class="card-price">от 5 900 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Torriden" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/cosrx,snail,essence" alt="COSRX">
|
||
<div class="card-body">
|
||
<span class="badge" style="background:#CD7F32;color:#fff">🥉 #3</span>
|
||
<h3 class="card-title">COSRX</h3>
|
||
<p class="card-desc">Акне, поры, текстура. Улиточная эссенция, патчи от прыщей, пилинги для гладкой кожи.</p>
|
||
<div class="card-price">от 4 900 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать COSRX" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/anua,heartleaf,toner" alt="Anua">
|
||
<div class="card-body">
|
||
<span class="badge">ХИТ</span>
|
||
<h3 class="card-title">Anua</h3>
|
||
<p class="card-desc">Чувствительная кожа, покраснения. Тонер с сердцелисткой — успокаивает за 3 дня.</p>
|
||
<div class="card-price">от 6 500 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Anua" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/skin1004,centella,ampoule" alt="SKIN1004">
|
||
<div class="card-body">
|
||
<span class="badge">НАТУРАЛЬНОЕ</span>
|
||
<h3 class="card-title">SKIN1004</h3>
|
||
<p class="card-desc">Центелла, успокоение кожи. 100% экстракт центеллы азиатской для восстановления кожи.</p>
|
||
<div class="card-price">от 7 200 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать SKIN1004" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/round,lab,jeju" alt="Round Lab">
|
||
<div class="card-body">
|
||
<span class="badge">SPF</span>
|
||
<h3 class="card-title">Round Lab</h3>
|
||
<p class="card-desc">Мягкий уход + SPF. Бирюзовая вода Чеджу, мягкие пенки и солнцезащитные кремы.</p>
|
||
<div class="card-price">от 5 600 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Round Lab" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/medicube,age,serum" alt="Medicube">
|
||
<div class="card-body">
|
||
<span class="badge">ANTI-AGE</span>
|
||
<h3 class="card-title">Medicube</h3>
|
||
<p class="card-desc">Anti-age, упругость, «glass skin». Бустеры для сияния и устройства для ухода за лицом.</p>
|
||
<div class="card-price">от 8 900 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Medicube" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/dr,althea,resveratrol" alt="Dr. Althea">
|
||
<div class="card-body">
|
||
<span class="badge">ВОССТАНОВЛЕНИЕ</span>
|
||
<h3 class="card-title">Dr. Althea</h3>
|
||
<p class="card-desc">Восстановление и увлажнение. Резвератрол, маски для сияния и кремы с пептидами.</p>
|
||
<div class="card-price">от 6 200 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Dr. Althea" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/isntree,hyaluronic,toner" alt="Isntree">
|
||
<div class="card-body">
|
||
<span class="badge">УВЛАЖНЕНИЕ</span>
|
||
<h3 class="card-title">Isntree</h3>
|
||
<p class="card-desc">Увлажнение и жирная/комбинированная кожа. Гиалуроновая кислота, зелёный чай, себорегуляция.</p>
|
||
<div class="card-price">от 5 400 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Isntree" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<img class="card-img" src="https://loremflickr.com/600/400/laneige,water,sleeping" alt="Laneige">
|
||
<div class="card-body">
|
||
<span class="badge">PREMIUM</span>
|
||
<h3 class="card-title">Laneige</h3>
|
||
<p class="card-desc">Интенсивное увлажнение. Ночные маски Water Sleeping Mask, гидро-пластыри для губ.</p>
|
||
<div class="card-price">от 9 500 ₸</div>
|
||
<a class="btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Laneige" style="width:100%;text-align:center">Заказать</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section advantages">
|
||
<h2>Почему корейская косметика?</h2>
|
||
<div class="adv-grid">
|
||
<div class="adv-card reveal">
|
||
<div class="adv-icon">🔬</div>
|
||
<h3 class="adv-title">Инновации</h3>
|
||
<p class="adv-text">Корея — мировой лидер косметических технологий. Передовые формулы и уникальные ингредиенты.</p>
|
||
</div>
|
||
<div class="adv-card reveal">
|
||
<div class="adv-icon">🌿</div>
|
||
<h3 class="adv-title">Натуральность</h3>
|
||
<p class="adv-text">Экстракты растений, ферменты, муцин улитки — природа работает на вашу красоту.</p>
|
||
</div>
|
||
<div class="adv-card reveal">
|
||
<div class="adv-icon">💧</div>
|
||
<h3 class="adv-title">Увлажнение</h3>
|
||
<p class="adv-text">Многоступенчатая система увлажнения — основа корейского подхода к уходу.</p>
|
||
</div>
|
||
<div class="adv-card reveal">
|
||
<div class="adv-icon">✨</div>
|
||
<h3 class="adv-title">Результат</h3>
|
||
<p class="adv-text">Видимый эффект уже через 2-4 недели регулярного использования.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section contact-section">
|
||
<div class="container">
|
||
<h2>📞 Для заказа</h2>
|
||
<p class="contact-note">Напишите мне в WhatsApp или позвоните — помогу подобрать идеальный уход для вашей кожи!</p>
|
||
<a class="contact-phone" href="tel:+7787026388804">8 702 638 88 04</a>
|
||
<a class="btn btn-whatsapp" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу проконсультироваться по корейской косметике" style="font-size:18px;padding:18px 36px">Написать в WhatsApp</a>
|
||
<p style="margin-top:24px;font-size:18px;opacity:.95">Instagram: <a href="https://instagram.com/fatimka555" style="color:var(--white);font-weight:700;text-decoration:underline">@fatimka555</a></p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>🌸 K-Beauty Shop — 100% оригинальная корейская косметика</p>
|
||
<p style="margin-top:8px">Телефон: 8 702 638 88 04</p>
|
||
<p style="margin-top:8px">Instagram: <a href="https://instagram.com/fatimka555" style="color:var(--cyan);text-decoration:none">@fatimka555</a></p>
|
||
</footer>
|
||
|
||
<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>
|