246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="kk">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Гүл Дүкені — Табиғи сұлулық</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>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--rose:#E91E8C;
|
||
--rose-light:#FFF0F7;
|
||
--green:#2D8B5B;
|
||
--green-dark:#1A5C3D;
|
||
--cream:#FDF8F5;
|
||
--ink:#1A1A2E;
|
||
--gray:#6B7280;
|
||
--white:#fff;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
|
||
/* Hero */
|
||
.hero{background:linear-gradient(135deg,var(--rose) 0%,var(--green-dark) 100%);color:var(--white);min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden}
|
||
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:rgba(255,255,255,.06);border-radius:50%}
|
||
.hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:rgba(255,255,255,.04);border-radius:50%}
|
||
.hero .container{position:relative;z-index:1}
|
||
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(42px,7vw,72px);font-weight:800;line-height:1.08;margin-bottom:24px}
|
||
.hero p{font-size:clamp(18px,2.2vw,22px);opacity:.9;max-width:560px;margin-bottom:36px;line-height:1.6}
|
||
.btn{display:inline-block;background:var(--white);color:var(--rose);padding:16px 36px;border-radius:50px;font-weight:700;text-decoration:none;font-size:17px;transition:transform .2s,box-shadow .2s}
|
||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.2)}
|
||
.btn-green{background:var(--green);color:var(--white)}
|
||
|
||
/* Sections */
|
||
.section{padding:80px 24px}
|
||
.section h2{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,44px);font-weight:700;text-align:center;margin-bottom:16px;color:var(--ink)}
|
||
.section .subtitle{text-align:center;color:var(--gray);max-width:560px;margin:0 auto 48px;font-size:18px}
|
||
|
||
/* Catalog */
|
||
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s}
|
||
.card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.12)}
|
||
.card-img{width:100%;height:220px;object-fit:cover}
|
||
.card-body{padding:24px}
|
||
.card-body h3{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.card-body p{color:var(--gray);font-size:15px;margin-bottom:14px}
|
||
.card-price{font-size:22px;font-weight:800;color:var(--rose)}
|
||
.tag{display:inline-block;background:var(--rose-light);color:var(--rose);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:10px}
|
||
|
||
/* Features */
|
||
.features{background:var(--cream)}
|
||
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px;max-width:1140px;margin:0 auto}
|
||
.feat-item{text-align:center;padding:32px 20px}
|
||
.feat-icon{font-size:48px;margin-bottom:16px}
|
||
.feat-item h3{font-size:19px;font-weight:700;margin-bottom:8px}
|
||
.feat-item p{color:var(--gray);font-size:15px}
|
||
|
||
/* CTA */
|
||
.cta{background:linear-gradient(135deg,var(--green-dark),var(--green));color:var(--white);text-align:center}
|
||
.cta h2{color:var(--white)}
|
||
.cta p{opacity:.9;max-width:500px;margin:0 auto 32px;font-size:18px}
|
||
|
||
/* Contact */
|
||
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px;margin:0 auto;align-items:start}
|
||
.contact-info p{margin-bottom:12px;font-size:16px}
|
||
.contact-info strong{color:var(--ink)}
|
||
.contact-info a{color:var(--rose);text-decoration:none;font-weight:600}
|
||
.contact-info a:hover{text-decoration:underline}
|
||
form{background:var(--cream);padding:36px;border-radius:20px}
|
||
form label{display:block;font-weight:600;margin-bottom:6px;font-size:15px}
|
||
form input,form textarea,form select{width:100%;padding:14px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;font-family:inherit;margin-bottom:16px;transition:border-color .2s}
|
||
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--rose)}
|
||
form button{width:100%;background:var(--rose);color:var(--white);border:none;padding:16px;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer;transition:background .2s}
|
||
form button:hover{background:#c7156f}
|
||
|
||
/* Footer */
|
||
footer{text-align:center;padding:40px 24px;color:var(--gray);font-size:14px;background:var(--cream)}
|
||
|
||
/* Reveal animation */
|
||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
|
||
@media(max-width:768px){
|
||
.contact-wrap{grid-template-columns:1fr}
|
||
.hero{min-height:auto;padding:100px 0 80px}
|
||
.section{padding:56px 20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero"><div class="container">
|
||
<h1>🌸 Гүл Дүкені</h1>
|
||
<p>Табиғи сұлулық пен махаббатты жеткіземіз. Букеттер, композициялар, мерекелік ораулар — бәрі жеке сіз үшін.</p>
|
||
<a class="btn" href="#catalog">Каталогты көру</a>
|
||
<a class="btn btn-green" href="#order">Тапсырыс беру</a>
|
||
</div></section>
|
||
|
||
<!-- Catalog -->
|
||
<section id="catalog" class="section reveal"><div class="container">
|
||
<h2>🌺 Букеттер мен композициялар</h2>
|
||
<p class="subtitle">Әрбір гүл — мұқият таңдалған, әр композиция — сүйіспеншіліп жасалған</p>
|
||
<div class="catalog">
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/rose,bouquet" alt="Роза букеті">
|
||
<div class="card-body">
|
||
<span class="tag">Хит сатылым</span>
|
||
<h3>💗 «Махаббат хабары»</h3>
|
||
<p>25 қызыл роза, эвкалипт, қорапта</p>
|
||
<div class="card-price">18 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/tulip,spring" alt="Тюльпан букеті">
|
||
<div class="card-body">
|
||
<span class="tag" style="background:#E8F5E9;color:var(--green)">Көктем</span>
|
||
<h3>🌷 «Көктем самалы»</h3>
|
||
<p>21 тюльпан, гербера, жасыл толқын</p>
|
||
<div class="card-price">12 500 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/wedding,flowers" alt="Той букеті">
|
||
<div class="card-body">
|
||
<span class="tag">Премиум</span>
|
||
<h3>💐 «Той шаңырағы»</h3>
|
||
<p>Арнайы той композициясы — пион, орхидея, лилия</p>
|
||
<div class="card-price">35 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/sunflower,bouquet" alt="Күнбағыс букеті">
|
||
<div class="card-body">
|
||
<span class="tag" style="background:#FFF8E1;color:#B8860B">Күннің жылуы</span>
|
||
<h3>🌻 «Күн сәулесі»</h3>
|
||
<p>9 үлкен күнбағыс, ашық және оң</p>
|
||
<div class="card-price">8 900 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/lily,elegant" alt="Лилия букеті">
|
||
<div class="card-body">
|
||
<span class="tag">Элегант</span>
|
||
<h3>🤍 «Ақ серенада»</h3>
|
||
<p>Ақ лилия, рафлия, классикалық стиль</p>
|
||
<div class="card-price">15 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img" src="https://loremflickr.com/500/350/mixed,flower" alt="Арнаулы букет">
|
||
<div class="card-body">
|
||
<span class="tag" style="background:#F3E5F5;color:#7B1FA2">Жеке</span>
|
||
<h3>✨ «Сіздің арнауыңыз»</h3>
|
||
<p>Кез-келген бюджетке жеке букет жасаймыз</p>
|
||
<div class="card-price">Бастап 5 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- Features -->
|
||
<section class="features section reveal"><div class="container">
|
||
<h2>Неге біз?</h2>
|
||
<p class="subtitle">Гүлдер — біздің мамандығымыз, сізге сүйіспеншіліп қызмет етеміз</p>
|
||
<div class="feat-grid">
|
||
<div class="feat-item">
|
||
<div class="feat-icon">🚚</div>
|
||
<h3>Жеткізу</h3>
|
||
<p>Күніне 2 сағат ішінде қаланыңыздың кез-келген нүктесіне</p>
|
||
</div>
|
||
<div class="feat-item">
|
||
<div class="feat-icon">💎</div>
|
||
<h3>Жаңа гүлдер</h3>
|
||
<p>Тікелей голландиялық және эквадорлық плантациялардан</p>
|
||
</div>
|
||
<div class="feat-item">
|
||
<div class="feat-icon">🎨</div>
|
||
<h3>Флорист-дизайнер</h3>
|
||
<p>Әрбукет — кәсібі флористтің қолынан шыққан туынды</p>
|
||
</div>
|
||
<div class="feat-item">
|
||
<div class="feat-icon">💬</div>
|
||
<h3>Кеңес береміз</h3>
|
||
<p>Көмектесіп, қай гүлді таңдау керектігін айтамыз</p>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta section reveal"><div class="container">
|
||
<h2>🌹 Сүйген адамыңызға сүйіспеншіліңізді жеткізіңіз</h2>
|
||
<p>Тапсырысты қазір беріңіз — бүгін жеткіземіз!</p>
|
||
<a class="btn" href="#order">Тапсырыс беру</a>
|
||
</div></section>
|
||
|
||
<!-- Order form + Contact -->
|
||
<section id="order" class="section reveal"><div class="container">
|
||
<h2>📝 Тапсырыс беру</h2>
|
||
<p class="subtitle">Форманы толтырыңыз — біз сізбен байланысамыз</p>
|
||
<div class="contact-wrap">
|
||
<div class="contact-info">
|
||
<p><strong>📍 Мекенжай:</strong><br>Алматы, Абай даңғылы 125</p>
|
||
<p><strong>🕐 Жұмыс уақыты:</strong><br>Тәулік бойы (9:00 — 21:00)</p>
|
||
<p><strong>📱 Телефон:</strong><br><a href="tel:+77001234567">+7 700 123 45 67</a></p>
|
||
<p><strong>💬 WhatsApp:</strong><br><a href="https://wa.me/77001234567?text=Сәлем! Гүл тапсырысы бар">Жазыңыз</a></p>
|
||
<p><strong>📷 Instagram:</strong><br><a href="#">@gul_dukeni</a></p>
|
||
</div>
|
||
<form action="https://formsubmit.co/EMAIL_HERE" method="POST">
|
||
<input type="hidden" name="_subject" value="Жаңа тапсырыс 🌸 Гүл Дүкені">
|
||
<label>Атыңыз</label>
|
||
<input name="name" placeholder="Атыңызды енгізіңіз" required>
|
||
<label>Телефон</label>
|
||
<input name="phone" placeholder="+7 ___ ___ __ __" type="tel" required>
|
||
<label>Букет таңдау</label>
|
||
<select name="bouquet">
|
||
<option value="">Таңдаңыз...</option>
|
||
<option>«Махаббат хабары» — 18 000 ₸</option>
|
||
<option>«Көктем самалы» — 12 500 ₸</option>
|
||
<option>«Той шаңырағы» — 35 000 ₸</option>
|
||
<option>«Күн сәулесі» — 8 900 ₸</option>
|
||
<option>«Ақ серенада» — 15 000 ₸</option>
|
||
<option>«Сіздің арнауыңыз» — жеке</option>
|
||
</select>
|
||
<label>Қосымша тілдеңіз</label>
|
||
<textarea name="message" rows="3" placeholder="Жеткізу уақыты, қалауыңыз..."></textarea>
|
||
<button type="submit">🌸 Тапсырысты жіберу</button>
|
||
</form>
|
||
</div>
|
||
</div></section>
|
||
|
||
<footer>
|
||
<p>© 2025 Гүл Дүкені · Барлық құқықтар қорғалған · Жасалған ❤️</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>
|