126 lines
4.8 KiB
HTML
126 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>GENTLEMAN — магазин мужской одежды</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+Pro:wght@400;600&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>">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="container header-inner">
|
||
<div class="logo">GENTLEMAN</div>
|
||
<nav class="nav">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#about">О нас</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<h1>Классический стиль<br>современного мужчины</h1>
|
||
<p>Изысканные костюмы, рубашки и аксессуары для тех, кто ценит безупречный вкус и качество</p>
|
||
<a href="#catalog" class="btn">Смотреть каталог</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="catalog" class="section">
|
||
<div class="container">
|
||
<h2>Каталог</h2>
|
||
|
||
<div class="filter-tabs">
|
||
<button class="filter-btn active" data-filter="all">Все</button>
|
||
<button class="filter-btn" data-filter="suits">Костюмы</button>
|
||
<button class="filter-btn" data-filter="shirts">Рубашки</button>
|
||
<button class="filter-btn" data-filter="shoes">Обувь</button>
|
||
<button class="filter-btn" data-filter="accessories">Аксессуары</button>
|
||
</div>
|
||
|
||
<div class="products-grid" id="products"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="section about">
|
||
<div class="container">
|
||
<h2>Почему выбирают нас</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🎯</div>
|
||
<h3>Премиум качество</h3>
|
||
<p>Итальянские ткани и безупречный пошив</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">📏</div>
|
||
<h3>Индивидуальный пошив</h3>
|
||
<p>Подгонка по фигуре за 2 визита</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🚚</div>
|
||
<h3>Бесплатная доставка</h3>
|
||
<p>При заказе от 50 000 ₸</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">💎</div>
|
||
<h3>Классика вне времени</h3>
|
||
<p>Модели, которые не выйдут из моды</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="section contacts">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<div class="contacts-grid">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<strong>Адрес:</strong>
|
||
<p>г. Алматы, пр. Абая 123</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>Телефон:</strong>
|
||
<p><a href="tel:+77271234567">+7 (727) 123-45-67</a></p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>Время работы:</strong>
|
||
<p>Пн-Вс: 10:00 — 21:00</p>
|
||
</div>
|
||
<a href="https://wa.me/77271234567?text=Здравствуйте!%20Хочу%20заказать%20одежду" class="btn btn-whatsapp">Написать в WhatsApp</a>
|
||
</div>
|
||
<div class="map">
|
||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2906.6!2d76.9!3d43.25!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDPCsDE1JzAwLjAiTiA3NsKwNTQnMDAuMCJF!5e0!3m2!1sru!2skz!4v1600000000000" width="100%" height="320" style="border:0;border-radius:12px" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>© 2026 GENTLEMAN. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="modal" id="modal">
|
||
<div class="modal-overlay"></div>
|
||
<div class="modal-window">
|
||
<button class="modal-close">×</button>
|
||
<h3 id="modal-title">Заявка</h3>
|
||
<p id="modal-desc"></p>
|
||
<form id="order-form">
|
||
<input type="text" name="name" placeholder="Ваше имя" required>
|
||
<input type="tel" name="phone" placeholder="Телефон" required>
|
||
<button type="submit" class="btn">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|