160 lines
5.7 KiB
HTML
160 lines
5.7 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>BAGS — Магазин стильных сумок</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="container header-inner">
|
||
<div class="logo">BAGS</div>
|
||
<nav class="nav">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#about">О нас</a>
|
||
<a href="#delivery">Доставка</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
<button class="cart-btn" id="cartBtn">
|
||
🛒 <span class="cart-count" id="cartCount">0</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Стильные сумки для тебя</h1>
|
||
<p class="hero-subtitle">Качественные материалы, уникальный дизайн, доступные цены</p>
|
||
<a href="#catalog" class="btn-primary">Смотреть каталог</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="catalog">
|
||
<div class="container">
|
||
<h2 class="section-title">Каталог</h2>
|
||
<div class="products-grid" id="productsGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<h2 class="section-title">О нас</h2>
|
||
<div class="features-grid">
|
||
<div class="feature">
|
||
<div class="feature-icon">✨</div>
|
||
<h3>Качество</h3>
|
||
<p>Только проверенные материалы и фурнитура</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">🎨</div>
|
||
<h3>Дизайн</h3>
|
||
<p>Уникальные модели в единственном экземпляре</p>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">💰</div>
|
||
<h3>Цена</h3>
|
||
<p>Честная стоимость без наценок магазинов</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="delivery" class="delivery">
|
||
<div class="container">
|
||
<h2 class="section-title">Доставка и оплата</h2>
|
||
<div class="delivery-grid">
|
||
<div class="delivery-item">
|
||
<h3>🚚 По городу</h3>
|
||
<p>1-2 дня • 1500₸</p>
|
||
</div>
|
||
<div class="delivery-item">
|
||
<h3>📦 По стране</h3>
|
||
<p>3-5 дней • 2500₸</p>
|
||
</div>
|
||
<div class="delivery-item">
|
||
<h3>💳 Оплата</h3>
|
||
<p>Карта / Наличные / Kaspi</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="contacts">
|
||
<div class="container">
|
||
<h2 class="section-title">Контакты</h2>
|
||
<div class="contacts-grid">
|
||
<div class="contact-item">
|
||
<strong>📞 Телефон:</strong>
|
||
<a href="tel:+77771234567">+7 (777) 123-45-67</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>💬 WhatsApp:</strong>
|
||
<a href="https://wa.me/77771234567" target="_blank">Написать</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>📷 Instagram:</strong>
|
||
<a href="#" target="_blank">@bags_shop</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>© 2026 BAGS. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="cart-modal" id="cartModal">
|
||
<div class="cart-content">
|
||
<div class="cart-header">
|
||
<h2>Корзина</h2>
|
||
<button class="close-btn" id="closeCart">×</button>
|
||
</div>
|
||
<div class="cart-items" id="cartItems"></div>
|
||
<div class="cart-footer">
|
||
<div class="cart-total">Итого: <span id="cartTotal">0</span> ₸</div>
|
||
<button class="btn-primary btn-full" id="checkoutBtn">Оформить заказ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkout-modal" id="checkoutModal">
|
||
<div class="checkout-content">
|
||
<div class="checkout-header">
|
||
<h2>Оформление заказа</h2>
|
||
<button class="close-btn" id="closeCheckout">×</button>
|
||
</div>
|
||
<form id="checkoutForm" class="checkout-form">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" id="customerName" required placeholder="Иван Иванов">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон</label>
|
||
<input type="tel" id="customerPhone" required placeholder="+7 (777) 123-45-67">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Адрес доставки</label>
|
||
<textarea id="customerAddress" required placeholder="Город, улица, дом, квартира"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Комментарий</label>
|
||
<textarea id="customerComment" placeholder="Пожелания к заказу"></textarea>
|
||
</div>
|
||
<div class="order-summary" id="orderSummary"></div>
|
||
<button type="submit" class="btn-primary btn-full">Заказать в WhatsApp</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|