ya-hochu-sdelat-sayt-po-kore/index.html

585 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>K-Beauty — Корейская косметика | fatimka555</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<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{
--primary:#E85D75;
--primary-dark:#C4455B;
--secondary:#F4A8B7;
--accent:#FFE5EC;
--gold:#D4AF37;
--silver:#C0C0C0;
--bronze:#CD7F32;
--ink:#1A1A2E;
--text:#4A4A5A;
--text-light:#6B6B7B;
--white:#FFFFFF;
--gradient:linear-gradient(135deg,#E85D75 0%,#F47B9F 50%,#FFA8C4 100%);
--gradient-dark:linear-gradient(135deg,#1A1A2E 0%,#2D1F2E 100%);
--shadow-sm:0 2px 8px rgba(232,93,117,0.08);
--shadow-md:0 8px 24px rgba(232,93,117,0.12);
--shadow-lg:0 16px 48px rgba(232,93,117,0.18);
--shadow-xl:0 24px 64px rgba(232,93,117,0.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.7 'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:linear-gradient(180deg,#FFF5F8 0%,#FFFFFF 100%);min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.hero{
background:var(--gradient-dark);
color:var(--white);
padding:120px 24px 100px;
text-align:center;
position:relative;
overflow:hidden;
}
.hero::before{
content:'✨';
position:absolute;
font-size:300px;
opacity:0.03;
top:-50px;
left:-100px;
transform:rotate(-15deg);
}
.hero::after{
content:'🌸';
position:absolute;
font-size:400px;
opacity:0.03;
bottom:-100px;
right:-100px;
transform:rotate(15deg);
}
.hero-content{position:relative;z-index:1}
.hero-badge{
display:inline-block;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.2);
padding:8px 20px;
border-radius:50px;
font-size:14px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:24px;
color:var(--secondary);
}
.hero h1{
font:700 clamp(42px,8vw,80px)/1.05 'Playfair Display',serif;
margin-bottom:20px;
background:linear-gradient(135deg,#FFFFFF 0%,#FFE5EC 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero p{
font-size:clamp(18px,3vw,22px);
color:rgba(255,255,255,0.85);
max-width:680px;
margin:0 auto 40px;
line-height:1.8;
}
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--gradient);
color:var(--white);
padding:18px 36px;
border-radius:50px;
font-weight:700;
font-size:16px;
text-decoration:none;
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
box-shadow:0 8px 24px rgba(232,93,117,0.3);
border:none;
cursor:pointer;
}
.btn:hover{
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(232,93,117,0.4);
}
.btn-whatsapp{background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,0.3)}
.btn-whatsapp:hover{box-shadow:0 16px 40px rgba(37,211,102,0.4)}
.btn-outline{
background:transparent;
border:2px solid rgba(255,255,255,0.3);
box-shadow:none;
}
.btn-outline:hover{
background:rgba(255,255,255,0.1);
border-color:rgba(255,255,255,0.5);
}
.section{padding:100px 24px}
.section-header{text-align:center;margin-bottom:60px}
.section h2{
font:700 clamp(32px,5vw,48px)/1.15 'Playfair Display',serif;
color:var(--ink);
margin-bottom:16px;
}
.section-subtitle{
font-size:18px;
color:var(--text-light);
max-width:600px;
margin:0 auto;
}
.original-banner{
background:linear-gradient(135deg,var(--accent) 0%,#FFF0F5 100%);
border:2px solid var(--secondary);
border-radius:24px;
padding:50px 40px;
text-align:center;
margin:60px auto;
max-width:1100px;
position:relative;
overflow:hidden;
}
.original-banner::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,transparent 70%);
animation:shimmer 3s infinite;
}
@keyframes shimmer{0%{transform:translate(-50%,-50%)}100%{transform:translate(50%,50%)}}
.original-badge{font-size:80px;margin-bottom:20px;position:relative;z-index:1;display:block}
.original-banner h3{
font:700 32px 'Playfair Display',serif;
color:var(--ink);
margin-bottom:16px;
position:relative;
z-index:1;
}
.original-banner p{
font-size:18px;
color:var(--text);
max-width:700px;
margin:0 auto;
line-height:1.8;
position:relative;
z-index:1;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:32px;
max-width:1200px;
margin:0 auto;
}
.card{
background:var(--white);
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow-md);
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
position:relative;
}
.card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--gradient);
opacity:0;
transition:opacity 0.4s;
z-index:0;
}
.card:hover{
transform:translateY(-12px);
box-shadow:var(--shadow-xl);
}
.card:hover::before{opacity:0.03}
.card-img{
width:100%;
height:280px;
object-fit:cover;
background:#F8F9FB;
position:relative;
z-index:1;
transition:transform 0.4s;
}
.card:hover .card-img{transform:scale(1.05)}
.card-body{padding:28px;position:relative;z-index:1}
.card-badge{
display:inline-block;
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
margin-bottom:14px;
}
.card-badge.gold{background:var(--gold);color:#000}
.card-badge.silver{background:var(--silver);color:#000}
.card-badge.bronze{background:var(--bronze);color:#fff}
.card-badge.hit{background:var(--gradient);color:#fff}
.card-title{
font:700 22px 'Playfair Display',serif;
color:var(--ink);
margin-bottom:12px;
}
.card-desc{
font-size:15px;
color:var(--text-light);
line-height:1.7;
margin-bottom:20px;
}
.card-price{
font:700 26px 'Playfair Display',serif;
color:var(--primary);
margin-bottom:20px;
}
.card-btn{
width:100%;
text-align:center;
padding:14px;
}
.advantages{background:var(--white)}
.adv-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
max-width:1100px;
margin:0 auto;
}
.adv-card{
text-align:center;
padding:40px 30px;
background:linear-gradient(180deg,#FFFFFF 0%,#FFF8FA 100%);
border-radius:24px;
box-shadow:var(--shadow-sm);
transition:all 0.3s;
border:1px solid rgba(232,93,117,0.08);
}
.adv-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
border-color:var(--secondary);
}
.adv-icon{font-size:56px;margin-bottom:20px;display:block}
.adv-title{
font:700 20px 'Playfair Display',serif;
color:var(--ink);
margin-bottom:14px;
}
.adv-text{
font-size:15px;
color:var(--text-light);
line-height:1.7;
}
.contact-section{
background:var(--gradient);
color:var(--white);
text-align:center;
position:relative;
overflow:hidden;
}
.contact-section::before{
content:'📱';
position:absolute;
font-size:400px;
opacity:0.05;
bottom:-100px;
right:-50px;
transform:rotate(-15deg);
}
.contact-section h2{color:var(--white)}
.contact-section .section-subtitle{color:rgba(255,255,255,0.9)}
.contact-phone{
font:800 clamp(36px,6vw,56px) 'Playfair Display',serif;
color:var(--white);
margin:32px 0;
display:block;
text-decoration:none;
transition:opacity 0.3s;
}
.contact-phone:hover{opacity:0.9}
.contact-note{
font-size:18px;
opacity:0.95;
max-width:600px;
margin:0 auto 32px;
}
.instagram-link{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(45deg,#833AB4,#FD1D1D,#FCAF45);
color:var(--white);
padding:16px 32px;
border-radius:50px;
font-weight:700;
text-decoration:none;
margin-top:24px;
transition:transform 0.3s,box-shadow 0.3s;
}
.instagram-link:hover{
transform:translateY(-3px);
box-shadow:0 12px 32px rgba(131,58,180,0.3);
}
footer{
background:var(--ink);
color:var(--white);
text-align:center;
padding:50px 24px;
}
.footer-content{max-width:600px;margin:0 auto}
.footer-logo{
font:700 28px 'Playfair Display',serif;
margin-bottom:12px;
background:var(--gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.footer-text{opacity:0.7;font-size:15px;margin-bottom:8px}
.footer-link{
color:var(--secondary);
text-decoration:none;
transition:opacity 0.3s;
}
.footer-link:hover{opacity:1}
.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.in{opacity:1;transform:none}
@media (max-width:768px){
.hero{padding:80px 20px 60px}
.section{padding:60px 20px}
.grid{grid-template-columns:1fr;gap:24px}
.adv-grid{grid-template-columns:1fr;gap:28px}
.original-banner{padding:36px 24px;margin:40px 16px}
.hero-buttons{flex-direction:column;align-items:center}
.btn{width:100%;max-width:300px;justify-content:center}
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<span class="hero-badge">✨ 100% Оригинал из Кореи</span>
<h1>K-Beauty Shop</h1>
<p>Премиальная корейская косметика для сияния вашей кожи. Только проверенные бренды с мировым признанием.</p>
<div class="hero-buttons">
<a class="btn" href="#catalog">
<span>🛍️</span> Смотреть каталог
</a>
<a class="btn btn-whatsapp" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать корейскую косметику">
<span>💬</span> Заказать в WhatsApp
</a>
<a class="btn btn-outline" href="https://instagram.com/fatimka555" target="_blank">
<span>📸</span> Instagram
</a>
</div>
</div>
</section>
<div class="container">
<div class="original-banner reveal">
<span class="original-badge">💎</span>
<h3>Гарантия 100% оригинала</h3>
<p>Вся косметика напрямую из Кореи — никаких подделок и реплик. Сертификаты качества на каждый продукт. Ваша красота и безопасность — мой приоритет!</p>
</div>
</div>
<section id="catalog" class="section">
<div class="section-header">
<h2>🔥 Топ-10 брендов</h2>
<p class="section-subtitle">Самые популярные и эффективные бренды корейской косметики</p>
</div>
<div class="grid">
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=600&h=400&fit=crop" alt="Beauty of Joseon">
<div class="card-body">
<span class="card-badge gold">🥇 Бренд #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 card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Beauty of Joseon">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1608248597279-f99d160bfbc8?w=600&h=400&fit=crop" alt="Torriden">
<div class="card-body">
<span class="card-badge silver">🥈 Бренд #2</span>
<h3 class="card-title">Torriden</h3>
<p class="card-desc">Увлажнение и восстановление барьера. Гиалуроновая кислота 5D, тонеры для глубокого увлажнения.</p>
<div class="card-price">от 5 900 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Torriden">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1556228720-1957be83f30b?w=600&h=400&fit=crop" alt="COSRX">
<div class="card-body">
<span class="card-badge bronze">🥉 Бренд #3</span>
<h3 class="card-title">COSRX</h3>
<p class="card-desc">Акне, поры, текстура. Улиточная эссенция, патчи от прыщей, пилинги для гладкой кожи.</p>
<div class="card-price">от 4 900 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать COSRX">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1596462502278-27bfdd403348?w=600&h=400&fit=crop" alt="Anua">
<div class="card-body">
<span class="card-badge hit">🔥 ХИТ</span>
<h3 class="card-title">Anua</h3>
<p class="card-desc">Чувствительная кожа, покраснения. Тонер с сердцелисткой — успокаивает за 3 дня.</p>
<div class="card-price">от 6 500 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Anua">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?w=600&h=400&fit=crop" alt="SKIN1004">
<div class="card-body">
<span class="card-badge hit">🌿 Натуральное</span>
<h3 class="card-title">SKIN1004</h3>
<p class="card-desc">Центелла, успокоение кожи. 100% экстракт центеллы азиатской для восстановления кожи.</p>
<div class="card-price">от 7 200 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать SKIN1004">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=600&h=400&fit=crop" alt="Round Lab">
<div class="card-body">
<span class="card-badge hit">☀️ 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 card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Round Lab">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1629198688000-71f23e745b6e?w=600&h=400&fit=crop" alt="Medicube">
<div class="card-body">
<span class="card-badge hit">⚡ 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 card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Medicube">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=600&h=400&fit=crop" alt="Dr. Althea">
<div class="card-body">
<span class="card-badge hit">💧 Восстановление</span>
<h3 class="card-title">Dr. Althea</h3>
<p class="card-desc">Восстановление и увлажнение. Резвератрол, маски для сияния и кремы с пептидами.</p>
<div class="card-price">от 6 200 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Dr. Althea">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?w=600&h=400&fit=crop" alt="Isntree">
<div class="card-body">
<span class="card-badge hit">🍃 Увлажнение</span>
<h3 class="card-title">Isntree</h3>
<p class="card-desc">Увлажнение и жирная/комбинированная кожа. Гиалуроновая кислота, зелёный чай, себорегуляция.</p>
<div class="card-price">от 5 400 ₸</div>
<a class="btn card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Isntree">Заказать</a>
</div>
</div>
<div class="card reveal">
<img class="card-img" src="https://images.unsplash.com/photo-1598440947619-2c35fc9af908?w=600&h=400&fit=crop" alt="Laneige">
<div class="card-body">
<span class="card-badge hit">👑 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 card-btn" href="https://wa.me/7787026388804?text=Здравствуйте! Хочу заказать Laneige">Заказать</a>
</div>
</div>
</div>
</section>
<section class="section advantages">
<div class="section-header">
<h2>✨ Почему K-Beauty?</h2>
<p class="section-subtitle">Корейская косметика покорила мир не случайно</p>
</div>
<div class="adv-grid">
<div class="adv-card reveal">
<span class="adv-icon">🔬</span>
<h3 class="adv-title">Инновации</h3>
<p class="adv-text">Корея — мировой лидер косметических технологий. Передовые формулы и уникальные ингредиенты.</p>
</div>
<div class="adv-card reveal">
<span class="adv-icon">🌿</span>
<h3 class="adv-title">Натуральность</h3>
<p class="adv-text">Экстракты растений, ферменты, муцин улитки — природа работает на вашу красоту.</p>
</div>
<div class="adv-card reveal">
<span class="adv-icon">💧</span>
<h3 class="adv-title">Увлажнение</h3>
<p class="adv-text">Многоступенчатая система увлажнения — основа корейского подхода к уходу.</p>
</div>
<div class="adv-card reveal">
<span class="adv-icon">✨</span>
<h3 class="adv-title">Результат</h3>
<p class="adv-text">Видимый эффект уже через 2-4 недели регулярного использования.</p>
</div>
</div>
</section>
<section class="section contact-section">
<div class="container">
<div class="section-header">
<h2>📞 Для заказа</h2>
<p class="section-subtitle">Свяжитесь со мной — помогу подобрать идеальный уход!</p>
</div>
<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:20px 40px">
<span>💬</span> Написать в WhatsApp
</a>
<br>
<a class="instagram-link" href="https://instagram.com/fatimka555" target="_blank">
<span>📸</span> @fatimka555 в Instagram
</a>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-logo">🌸 K-Beauty Shop</div>
<p class="footer-text">100% оригинальная корейская косметика</p>
<p class="footer-text">Телефон: <a class="footer-link" href="tel:+7787026388804">8 702 638 88 04</a></p>
<p class="footer-text">Instagram: <a class="footer-link" href="https://instagram.com/fatimka555">@fatimka555</a></p>
</div>
</footer>
<script>
var io=new IntersectionObserver(function(entries){
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
},{threshold:.12});
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
</script>
</body>
</html>