| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Кожевная Мастерская — Изделия из кожи ручной работы | Москва</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| leather: { |
| 50: '#fdf8f0', |
| 100: '#f5ead8', |
| 200: '#e8d3b0', |
| 300: '#d4b07a', |
| 400: '#c49450', |
| 500: '#a87532', |
| 600: '#8c5e28', |
| 700: '#6e4720', |
| 800: '#4d3118', |
| 900: '#2d1c0e', |
| }, |
| cream: '#faf6ef', |
| }, |
| fontFamily: { |
| display: ['Playfair Display', 'serif'], |
| body: ['Inter', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| html { scroll-behavior: smooth; } |
| body { font-family: 'Inter', sans-serif; } |
| .font-display { font-family: 'Playfair Display', serif; } |
| |
| .hero-bg { |
| background: linear-gradient(135deg, rgba(45,28,14,0.88) 0%, rgba(78,49,24,0.75) 50%, rgba(45,28,14,0.85) 100%), |
| url('http://static.photos/craft/1200x630/7') center/cover no-repeat; |
| } |
| |
| .product-card:hover .product-img { |
| transform: scale(1.07); |
| } |
| .product-card:hover .product-overlay { |
| opacity: 1; |
| } |
| |
| .step-line::after { |
| content: ''; |
| position: absolute; |
| top: 40px; |
| left: 50%; |
| width: 2px; |
| height: calc(100% - 40px); |
| background: linear-gradient(to bottom, #c49450, transparent); |
| } |
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(30px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .animate-fade-in-up { |
| animation: fadeInUp 0.8s ease-out forwards; |
| opacity: 0; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| .animate-float { |
| animation: float 4s ease-in-out infinite; |
| } |
| |
| .gallery-item:hover img { |
| transform: scale(1.1); |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: #c49450; |
| transition: width 0.3s; |
| } |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #a87532, #c49450); |
| transition: all 0.3s; |
| } |
| .btn-primary:hover { |
| background: linear-gradient(135deg, #8c5e28, #a87532); |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(168,117,50,0.35); |
| } |
| |
| .leather-texture { |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c49450' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
| } |
| |
| |
| .mobile-menu { |
| transform: translateX(100%); |
| transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .mobile-menu.open { |
| transform: translateX(0); |
| } |
| |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(40px); |
| transition: opacity 0.7s ease, transform 0.7s ease; |
| } |
| .reveal.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body class="bg-cream text-leather-900 overflow-x-hidden"> |
|
|
| |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16 md:h-20"> |
| |
| <a href="#" class="flex items-center gap-2 group"> |
| <div class="w-10 h-10 rounded-full bg-leather-500 flex items-center justify-center group-hover:bg-leather-600 transition-colors"> |
| <i data-lucide="scissors" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-display text-xl md:text-2xl font-bold text-white drop-shadow-lg">КожМастер</span> |
| </a> |
|
|
| |
| <div class="hidden md:flex items-center gap-8"> |
| <a href="#about" class="nav-link text-white/90 hover:text-white text-sm font-medium tracking-wide transition-colors">О нас</a> |
| <a href="#products" class="nav-link text-white/90 hover:text-white text-sm font-medium tracking-wide transition-colors">Изделия</a> |
| <a href="#process" class="nav-link text-white/90 hover:text-white text-sm font-medium tracking-wide transition-colors">Процесс</a> |
| <a href="#gallery" class="nav-link text-white/90 hover:text-white text-sm font-medium tracking-wide transition-colors">Галерея</a> |
| <a href="#reviews" class="nav-link text-white/90 hover:text-white text-sm font-medium tracking-wide transition-colors">Отзывы</a> |
| <a href="#contact" class="btn-primary px-6 py-2.5 rounded-full text-white text-sm font-semibold shadow-lg">Связаться</a> |
| </div> |
|
|
| |
| <button id="menuBtn" class="md:hidden text-white p-2 hover:bg-white/10 rounded-lg transition-colors"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="mobileMenu" class="mobile-menu fixed inset-0 z-[60] bg-leather-900/98 backdrop-blur-sm flex flex-col"> |
| <div class="flex items-center justify-between px-4 h-16"> |
| <span class="font-display text-2xl font-bold text-white">КожМастер</span> |
| <button id="closeMenu" class="text-white p-2 hover:bg-white/10 rounded-lg transition-colors"> |
| <i data-lucide="x" class="w-6 h-6"></i> |
| </button> |
| </div> |
| <div class="flex flex-col items-center justify-center flex-1 gap-8"> |
| <a href="#about" class="mobile-link text-white text-2xl font-display font-medium hover:text-leather-400 transition-colors">О нас</a> |
| <a href="#products" class="mobile-link text-white text-2xl font-display font-medium hover:text-leather-400 transition-colors">Изделия</a> |
| <a href="#process" class="mobile-link text-white text-2xl font-display font-medium hover:text-leather-400 transition-colors">Процесс</a> |
| <a href="#gallery" class="mobile-link text-white text-2xl font-display font-medium hover:text-leather-400 transition-colors">Галерея</a> |
| <a href="#reviews" class="mobile-link text-white text-2xl font-display font-medium hover:text-leather-400 transition-colors">Отзывы</a> |
| <a href="#contact" class="mobile-link btn-primary px-8 py-3 rounded-full text-white text-lg font-semibold shadow-lg mt-4">Связаться</a> |
| </div> |
| </div> |
|
|
| |
| <section class="hero-bg min-h-screen flex items-center relative overflow-hidden"> |
| |
| <div class="absolute top-20 right-10 w-64 h-64 rounded-full bg-leather-400/10 blur-3xl animate-float"></div> |
| <div class="absolute bottom-20 left-10 w-48 h-48 rounded-full bg-leather-300/10 blur-2xl animate-float" style="animation-delay: 2s;"></div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 md:py-0 w-full"> |
| <div class="max-w-3xl"> |
| <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2 mb-8 animate-fade-in-up"> |
| <i data-lucide="award" class="w-4 h-4 text-leather-300"></i> |
| <span class="text-leather-200 text-sm font-medium">Ручная работа с 2015 года</span> |
| </div> |
|
|
| <h1 class="font-display text-4xl sm:text-5xl md:text-7xl font-bold text-white leading-tight mb-6 animate-fade-in-up" style="animation-delay: 0.2s;"> |
| Изделия из кожи<br> |
| <span class="text-leather-400">ручной работы</span> |
| </h1> |
|
|
| <p class="text-lg md:text-xl text-white/80 leading-relaxed mb-10 max-w-2xl animate-fade-in-up" style="animation-delay: 0.4s;"> |
| Создаём уникальные бумажники, портмоне и ремни из натуральной кожи. Каждый экземпляр — произведение искусства, созданное с любовью и вниманием к деталям. |
| </p> |
|
|
| <div class="flex flex-col sm:flex-row gap-4 animate-fade-in-up" style="animation-delay: 0.6s;"> |
| <a href="#products" class="btn-primary px-8 py-4 rounded-full text-white font-semibold text-lg shadow-xl text-center"> |
| Смотреть каталог |
| </a> |
| <a href="#contact" class="px-8 py-4 rounded-full border-2 border-white/30 text-white font-semibold text-lg hover:bg-white/10 transition-all text-center backdrop-blur-sm"> |
| Заказать изделие |
| </a> |
| </div> |
|
|
| |
| <div class="grid grid-cols-3 gap-6 mt-16 pt-10 border-t border-white/15 animate-fade-in-up" style="animation-delay: 0.8s;"> |
| <div> |
| <div class="font-display text-3xl md:text-4xl font-bold text-leather-400" id="stat1">0</div> |
| <div class="text-white/60 text-sm mt-1">Лет опыта</div> |
| </div> |
| <div> |
| <div class="font-display text-3xl md:text-4xl font-bold text-leather-400" id="stat2">0</div> |
| <div class="text-white/60 text-sm mt-1">Изделий создано</div> |
| </div> |
| <div> |
| <div class="font-display text-3xl md:text-4xl font-bold text-leather-400" id="stat3">0</div> |
| <div class="text-white/60 text-sm mt-1">Довольных клиентов</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce"> |
| <a href="#about" class="text-white/50 hover:text-white/80 transition-colors"> |
| <i data-lucide="chevrons-down" class="w-6 h-6"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 md:py-28 leather-texture"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 md:gap-20 items-center"> |
| <div class="reveal"> |
| <div class="relative"> |
| <img src="http://static.photos/craft/640x360/12" alt="Мастер за работой" class="rounded-2xl shadow-2xl w-full object-cover aspect-[4/3]"> |
| <div class="absolute -bottom-6 -right-6 bg-leather-500 text-white rounded-2xl p-6 shadow-xl hidden md:block"> |
| <div class="font-display text-4xl font-bold">9+</div> |
| <div class="text-sm text-white/80">лет мастерства</div> |
| </div> |
| <div class="absolute -top-4 -left-4 w-24 h-24 border-2 border-leather-300 rounded-2xl hidden md:block"></div> |
| </div> |
| </div> |
| <div class="reveal" style="transition-delay: 0.2s;"> |
| <div class="inline-flex items-center gap-2 bg-leather-100 text-leather-700 rounded-full px-4 py-1.5 mb-6"> |
| <i data-lucide="sparkles" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">О нашей мастерской</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold text-leather-900 mb-6 leading-tight"> |
| Кожа, рассказывающая<br> |
| <span class="text-leather-600">историю</span> |
| </h2> |
| <p class="text-leather-700/80 text-lg leading-relaxed mb-6"> |
| Наша мастерская — это место, где традиции старины встречаются с современным дизайном. Мы работаем только с натуральной кожей высочайшего качества, создавая изделия, которые служат десятилетиями. |
| </p> |
| <p class="text-leather-700/80 text-lg leading-relaxed mb-8"> |
| Каждое изделие проходит через руки опытного мастера, который вкладывает душу в каждый стежок. Мы обслуживаем клиентов в Москве и Подмосковье с персональным подходом к каждому заказу. |
| </p> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center gap-3 p-3 bg-white rounded-xl shadow-sm"> |
| <div class="w-10 h-10 rounded-lg bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="shield-check" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <span class="text-sm font-medium text-leather-800">Гарантия качества</span> |
| </div> |
| <div class="flex items-center gap-3 p-3 bg-white rounded-xl shadow-sm"> |
| <div class="w-10 h-10 rounded-lg bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="hand-metal" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <span class="text-sm font-medium text-leather-800">Ручная работа</span> |
| </div> |
| <div class="flex items-center gap-3 p-3 bg-white rounded-xl shadow-sm"> |
| <div class="w-10 h-10 rounded-lg bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="truck" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <span class="text-sm font-medium text-leather-800">Доставка по МО</span> |
| </div> |
| <div class="flex items-center gap-3 p-3 bg-white rounded-xl shadow-sm"> |
| <div class="w-10 h-10 rounded-lg bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="palette" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <span class="text-sm font-medium text-leather-800">Индивидуальный дизайн</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-20 md:py-28 bg-leather-900 relative overflow-hidden"> |
| <div class="absolute inset-0 opacity-5"> |
| <div class="leather-texture w-full h-full"></div> |
| </div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
| <div class="text-center mb-16 reveal"> |
| <div class="inline-flex items-center gap-2 bg-leather-800 text-leather-300 rounded-full px-4 py-1.5 mb-6"> |
| <i data-lucide="briefcase" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">Каталог изделий</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-5xl font-bold text-white mb-4">Наши <span class="text-leather-400">изделия</span></h2> |
| <p class="text-white/60 text-lg max-w-2xl mx-auto">Каждое изделие создано вручную из натуральной кожи с вниманием к каждому стежку</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="product-card group bg-leather-800/50 backdrop-blur-sm border border-leather-700/50 rounded-3xl overflow-hidden hover:shadow-2xl hover:shadow-leather-500/20 transition-all duration-500 reveal"> |
| <div class="relative overflow-hidden aspect-[4/3]"> |
| <img src="http://static.photos/craft/640x360/22" alt="Бумажник" class="product-img w-full h-full object-cover transition-transform duration-700"> |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-leather-900/80 to-transparent opacity-0 transition-opacity duration-500 flex items-end p-6"> |
| <a href="#contact" class="btn-primary px-6 py-2.5 rounded-full text-white text-sm font-semibold">Заказать</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="wallet" class="w-5 h-5 text-leather-400"></i> |
| <h3 class="font-display text-xl font-bold text-white">Бумажники</h3> |
| </div> |
| <p class="text-white/60 text-sm leading-relaxed mb-4">Компактные и изящные бумажники из натуральной кожи. Вместительные, стильные и надёжные — для тех, кто ценит порядок и эстетику.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-leather-400 font-display text-2xl font-bold">от 3 500 ₽</span> |
| <span class="text-white/40 text-xs">Срок: 5–7 дней</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card group bg-leather-800/50 backdrop-blur-sm border border-leather-700/50 rounded-3xl overflow-hidden hover:shadow-2xl hover:shadow-leather-500/20 transition-all duration-500 reveal" style="transition-delay: 0.15s;"> |
| <div class="relative overflow-hidden aspect-[4/3]"> |
| <img src="http://static.photos/craft/640x360/35" alt="Портмоне" class="product-img w-full h-full object-cover transition-transform duration-700"> |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-leather-900/80 to-transparent opacity-0 transition-opacity duration-500 flex items-end p-6"> |
| <a href="#contact" class="btn-primary px-6 py-2.5 rounded-full text-white text-sm font-semibold">Заказать</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="credit-card" class="w-5 h-5 text-leather-400"></i> |
| <h3 class="font-display text-xl font-bold text-white">Портмоне</h3> |
| </div> |
| <p class="text-white/60 text-sm leading-relaxed mb-4">Элегантные портмоне с отделениями для карт и купюр. Идеальный аксессуар для деловых людей, подчеркнёт ваш статус.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-leather-400 font-display text-2xl font-bold">от 5 000 ₽</span> |
| <span class="text-white/40 text-xs">Срок: 7–10 дней</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card group bg-leather-800/50 backdrop-blur-sm border border-leather-700/50 rounded-3xl overflow-hidden hover:shadow-2xl hover:shadow-leather-500/20 transition-all duration-500 reveal" style="transition-delay: 0.3s;"> |
| <div class="relative overflow-hidden aspect-[4/3]"> |
| <img src="http://static.photos/craft/640x360/48" alt="Ремень" class="product-img w-full h-full object-cover transition-transform duration-700"> |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-leather-900/80 to-transparent opacity-0 transition-opacity duration-500 flex items-end p-6"> |
| <a href="#contact" class="btn-primary px-6 py-2.5 rounded-full text-white text-sm font-semibold">Заказать</a> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center gap-2 mb-3"> |
| <i data-lucide="rotate-ccw" class="w-5 h-5 text-leather-400"></i> |
| <h3 class="font-display text-xl font-bold text-white">Ремни</h3> |
| </div> |
| <p class="text-white/60 text-sm leading-relaxed mb-4">Прочные и стильные ремни из толстой натуральной кожи. Классическая пряжка, ручная прошивка — созданы служить годами.</p> |
| <div class="flex items-center justify-between"> |
| <span class="text-leather-400 font-display text-2xl font-bold">от 4 500 ₽</span> |
| <span class="text-white/40 text-xs">Срок: 5–7 дней</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-4 reveal"> |
| <div class="bg-leather-800/40 border border-leather-700/30 rounded-2xl p-5 text-center hover:bg-leather-800/70 transition-colors"> |
| <i data-lucide="pen-tool" class="w-6 h-6 text-leather-400 mx-auto mb-3"></i> |
| <span class="text-white/80 text-sm font-medium">Монограмма</span> |
| </div> |
| <div class="bg-leather-800/40 border border-leather-700/30 rounded-2xl p-5 text-center hover:bg-leather-800/70 transition-colors"> |
| <i data-lucide="palette" class="w-6 h-6 text-leather-400 mx-auto mb-3"></i> |
| <span class="text-white/80 text-sm font-medium">Выбор цвета</span> |
| </div> |
| <div class="bg-leather-800/40 border border-leather-700/30 rounded-2xl p-5 text-center hover:bg-leather-800/70 transition-colors"> |
| <i data-lucide="ruler" class="w-6 h-6 text-leather-400 mx-auto mb-3"></i> |
| <span class="text-white/80 text-sm font-medium">Индивидуальный размер</span> |
| </div> |
| <div class="bg-leather-800/40 border border-leather-700/30 rounded-2xl p-5 text-center hover:bg-leather-800/70 transition-colors"> |
| <i data-lucide="gift" class="w-6 h-6 text-leather-400 mx-auto mb-3"></i> |
| <span class="text-white/80 text-sm font-medium">Подарочная упаковка</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="process" class="py-20 md:py-28 leather-texture"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16 reveal"> |
| <div class="inline-flex items-center gap-2 bg-leather-100 text-leather-700 rounded-full px-4 py-1.5 mb-6"> |
| <i data-lucide="settings" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">Как мы работаем</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-5xl font-bold text-leather-900 mb-4">Путь от идеи до <span class="text-leather-600">шедевра</span></h2> |
| <p class="text-leather-700/70 text-lg max-w-2xl mx-auto">Каждое изделие проходит строгий контроль качества на всех этапах производства</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-4 gap-8"> |
| <div class="reveal text-center group"> |
| <div class="relative mx-auto w-20 h-20 bg-leather-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-leather-500 transition-colors duration-300"> |
| <i data-lucide="message-circle" class="w-8 h-8 text-leather-600 group-hover:text-white transition-colors duration-300"></i> |
| <div class="absolute -top-2 -right-2 w-8 h-8 bg-leather-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:bg-leather-600 transition-colors">1</div> |
| </div> |
| <h3 class="font-display text-xl font-bold text-leather-900 mb-3">Консультация</h3> |
| <p class="text-leather-700/70 text-sm leading-relaxed">Обсуждаем ваши пожелания, подбираем материалы и фурнитуру, создаём эскиз</p> |
| </div> |
|
|
| <div class="reveal text-center group" style="transition-delay:0.15s;"> |
| <div class="relative mx-auto w-20 h-20 bg-leather-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-leather-500 transition-colors duration-300"> |
| <i data-lucide="pen-tool" class="w-8 h-8 text-leather-600 group-hover:text-white transition-colors duration-300"></i> |
| <div class="absolute -top-2 -right-2 w-8 h-8 bg-leather-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:bg-leather-600 transition-colors">2</div> |
| </div> |
| <h3 class="font-display text-xl font-bold text-leather-900 mb-3">Разработка</h3> |
| <p class="text-leather-700/70 text-sm leading-relaxed">Мастер создаёт лекала и подбирает тип кожи, нитки и фурнитуру под ваш заказ</p> |
| </div> |
|
|
| <div class="reveal text-center group" style="transition-delay:0.3s;"> |
| <div class="relative mx-auto w-20 h-20 bg-leather-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-leather-500 transition-colors duration-300"> |
| <i data-lucide="scissors" class="w-8 h-8 text-leather-600 group-hover:text-white transition-colors duration-300"></i> |
| <div class="absolute -top-2 -right-2 w-8 h-8 bg-leather-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:bg-leather-600 transition-colors">3</div> |
| </div> |
| <h3 class="font-display text-xl font-bold text-leather-900 mb-3">Изготовление</h3> |
| <p class="text-leather-700/70 text-sm leading-relaxed">Ручная раскрой, сшивание седельным швом, установка фурнитуры и обработка краев</p> |
| </div> |
|
|
| <div class="reveal text-center group" style="transition-delay:0.45s;"> |
| <div class="relative mx-auto w-20 h-20 bg-leather-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-leather-500 transition-colors duration-300"> |
| <i data-lucide="package-check" class="w-8 h-8 text-leather-600 group-hover:text-white transition-colors duration-300"></i> |
| <div class="absolute -top-2 -right-2 w-8 h-8 bg-leather-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:bg-leather-600 transition-colors">4</div> |
| </div> |
| <h3 class="font-display text-xl font-bold text-leather-900 mb-3">Передача</h3> |
| <p class="text-leather-700/70 text-sm leading-relaxed">Финальная проверка, красивая упаковка и доставка по Москве и Подмосковью</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="gallery" class="py-20 md:py-28 bg-leather-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16 reveal"> |
| <div class="inline-flex items-center gap-2 bg-white text-leather-700 rounded-full px-4 py-1.5 mb-6 shadow-sm"> |
| <i data-lucide="image" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">Наши работы</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-5xl font-bold text-leather-900 mb-4">Галерея <span class="text-leather-600">работ</span></h2> |
| <p class="text-leather-700/70 text-lg max-w-2xl mx-auto">Результаты, которые говорят сами за себя</p> |
| </div> |
|
|
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6"> |
| <div class="gallery-item rounded-2xl overflow-hidden shadow-lg cursor-pointer reveal row-span-1 md:row-span-2 aspect-[1/1] md:aspect-auto"> |
| <img src="http://static.photos/craft/640x360/55" alt="Работа 1" class="w-full h-full object-cover transition-transform duration-700"> |
| </div> |
| <div class="gallery-item rounded-2xl overflow-hidden shadow-lg cursor-pointer reveal aspect-square" style="transition-delay:0.1s;"> |
| <img src="http://static.photos/craft/320x240/60" alt="Работа 2" class="w-full h-full object-cover transition-transform duration-700"> |
| </div> |
| <div class="gallery-item rounded-2xl overflow-hidden shadow-lg cursor-pointer reveal aspect-square" style="transition-delay:0.15s;"> |
| <img src="http://static.photos/craft/320x240/65" alt="Работа 3" class="w-full h-full object-cover transition-transform duration-700"> |
| </div> |
| <div class="gallery-item rounded-2xl overflow-hidden shadow-lg cursor-pointer reveal aspect-square" style="transition-delay:0.2s;"> |
| <img src="http://static.photos/craft/320x240/70" alt="Работа 4" class="w-full h-full object-cover transition-transform duration-700"> |
| </div> |
| <div class="gallery-item rounded-2xl overflow-hidden shadow-lg cursor-pointer reveal aspect-square" style="transition-delay:0.25s;"> |
| <img src="http://static.photos/craft/320x240/75" alt="Работа 5" class="w-full h-full object-cover transition-transform duration-700"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="reviews" class="py-20 md:py-28 leather-texture"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16 reveal"> |
| <div class="inline-flex items-center gap-2 bg-leather-100 text-leather-700 rounded-full px-4 py-1.5 mb-6"> |
| <i data-lucide="star" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">Отзывы клиентов</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-5xl font-bold text-leather-900 mb-4">Что говорят наши <span class="text-leather-600">клиенты</span></h2> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow reveal"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| </div> |
| <p class="text-leather-700/80 leading-relaxed mb-6">"Заказывал портмоне в подарок мужу на годовщину. Качество просто потрясающее! Кожа мягкая, но прочная, шов идеальный. Мастер помог с выбором цвета и добавил инициалы. Муж в восторге!"</p> |
| <div class="flex items-center gap-3"> |
| <div class="w-12 h-12 rounded-full bg-leather-200 flex items-center justify-center"> |
| <span class="font-display font-bold text-leather-700">АП</span> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Анна Петрова</div> |
| <div class="text-sm text-leather-500">Москва</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow reveal" style="transition-delay:0.15s;"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| </div> |
| <p class="text-leather-700/80 leading-relaxed mb-6">"Уже третий ремень заказываю здесь — себе и друзьям в подарок. Кожа со временем становится только красивее, патина придаёт особый шарм. Рекомендую всем, кто ценит настоящие вещи!"</p> |
| <div class="flex items-center gap-3"> |
| <div class="w-12 h-12 rounded-full bg-leather-200 flex items-center justify-center"> |
| <span class="font-display font-bold text-leather-700">ДС</span> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Дмитрий Соколов</div> |
| <div class="text-sm text-leather-500">Подольск</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow reveal" style="transition-delay:0.3s;"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| <i data-lucide="star" class="w-4 h-4 text-leather-500 fill-leather-500"></i> |
| </div> |
| <p class="text-leather-700/80 leading-relaxed mb-6">"Бумажник получился идеальным — компактный, но вмещает всё необходимое. Мастер проявил невероятное внимание к деталям. Видно, что человек любит своё дело. Обязательно вернусь!"</p> |
| <div class="flex items-center gap-3"> |
| <div class="w-12 h-12 rounded-full bg-leather-200 flex items-center justify-center"> |
| <span class="font-display font-bold text-leather-700">ЕК</span> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Елена Козлова</div> |
| <div class="text-sm text-leather-500">Красногорск</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 md:py-28 bg-leather-900 relative overflow-hidden"> |
| <div class="absolute inset-0"> |
| <div class="absolute top-0 left-0 w-96 h-96 rounded-full bg-leather-500/10 blur-3xl"></div> |
| <div class="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-leather-400/10 blur-3xl"></div> |
| </div> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative reveal"> |
| <i data-lucide="heart" class="w-12 h-12 text-leather-400 mx-auto mb-6"></i> |
| <h2 class="font-display text-3xl md:text-5xl font-bold text-white mb-6">Хотите изделие <span class="text-leather-400">мечты?</span></h2> |
| <p class="text-white/70 text-lg mb-10 max-w-2xl mx-auto">Мы создаём уникальные кожаные изделия по вашим эскизам. Расскажите о своей идее, и мы воплотим её в жизнь!</p> |
| <a href="#contact" class="btn-primary inline-block px-10 py-4 rounded-full text-white font-semibold text-lg shadow-xl"> |
| Обсудить заказ |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 md:py-28 leather-texture"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 md:gap-20"> |
| <div class="reveal"> |
| <div class="inline-flex items-center gap-2 bg-leather-100 text-leather-700 rounded-full px-4 py-1.5 mb-6"> |
| <i data-lucide="mail" class="w-4 h-4"></i> |
| <span class="text-sm font-medium">Свяжитесь с нами</span> |
| </div> |
| <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold text-leather-900 mb-6">Сделайте <span class="text-leather-600">заказ</span></h2> |
| <p class="text-leather-700/80 text-lg leading-relaxed mb-10">Заполните форму, и мы свяжемся с вами в течение часа для обсуждения деталей вашего заказа.</p> |
|
|
| <div class="space-y-6"> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="map-pin" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Адрес</div> |
| <div class="text-leather-600/80 text-sm">Москва, ул. Ремесленная, 15</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="phone" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Телефон</div> |
| <div class="text-leather-600/80 text-sm">+7 (495) 123-45-67</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="clock" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Режим работы</div> |
| <div class="text-leather-600/80 text-sm">Пн–Сб: 10:00 – 20:00</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-leather-100 flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="truck" class="w-5 h-5 text-leather-600"></i> |
| </div> |
| <div> |
| <div class="font-semibold text-leather-900">Доставка</div> |
| <div class="text-leather-600/80 text-sm">Москва и Подмосковье</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex gap-3 mt-8"> |
| <a href="#" class="w-11 h-11 rounded-xl bg-leather-100 flex items-center justify-center hover:bg-leather-500 hover:text-white text-leather-600 transition-all"> |
| <i data-lucide="instagram" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-11 h-11 rounded-xl bg-leather-100 flex items-center justify-center hover:bg-leather-500 hover:text-white text-leather-600 transition-all"> |
| <i data-lucide="send" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-11 h-11 rounded-xl bg-leather-100 flex items-center justify-center hover:bg-leather-500 hover:text-white text-leather-600 transition-all"> |
| <i data-lucide="message-circle" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="reveal" style="transition-delay: 0.2s;"> |
| <form id="contactForm" class="bg-white rounded-3xl p-8 shadow-xl"> |
| <h3 class="font-display text-2xl font-bold text-leather-900 mb-6">Оставить заявку</h3> |
| <div class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-leather-700 mb-1.5">Ваше имя</label> |
| <input type="text" id="name" placeholder="Иван Иванов" class="w-full px-4 py-3 rounded-xl border border-leather-200 focus:border-leather-500 focus:ring-2 focus:ring-leather-500/20 outline-none transition-all text-leather-900 placeholder:text-leather-300 bg-leather-50/50" required> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium text-leather-700 mb-1.5">Телефон</label> |
| <input type="tel" id="phone" placeholder="+7 (___) ___-__-__" class="w-full px-4 py-3 rounded-xl border border-leather-200 focus:border-leather-500 focus:ring-2 focus:ring-leather-500/20 outline-none transition-all text-leather-900 placeholder:text-leather-300 bg-leather-50/50" required> |
| </div> |
| <div> |
| <label for="product" class="block text-sm font-medium text-leather-700 mb-1.5">Что хотите заказать?</label> |
| <select id="product" class="w-full px-4 py-3 rounded-xl border border-leather-200 focus:border-leather-500 focus:ring-2 focus:ring-leather-500/20 outline-none transition-all text-leather-900 bg-leather-50/50 appearance-none" style="background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23a87532%22 stroke-width=%222%22><polyline points=%226 9 12 15 18 9%22/></svg>'); background-repeat: no-repeat; background-position: right 12px center;"> |
| <option value="">Выберите изделие</option> |
| <option value="wallet">Бумажник</option> |
| <option value="cardholder">Портмоне</option> |
| <option value="belt">Ремень</option> |
| <option value="custom">Другое (индивидуальный заказ)</option> |
| </select> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-leather-700 mb-1.5">Комментарий</label> |
| <textarea id="message" rows="4" placeholder="Опишите пожелания к изделию..." class="w-full px-4 py-3 rounded-xl border border-leather-200 focus:border-leather-500 focus:ring-2 focus:ring-leather-500/20 outline-none transition-all text-leather-900 placeholder:text-leather-300 bg-leather-50/50 resize-none"></textarea> |
| </div> |
| <button type="submit" class="btn-primary w-full py-4 rounded-xl text-white font-semibold text-lg shadow-lg flex items-center justify-center gap-2"> |
| <i data-lucide="send" class="w-5 h-5"></i> |
| <span>Отправить заявку</span> |
| </button> |
| </div> |
| |
| <div id="successMsg" class="hidden mt-4 p-4 bg-green-50 border border-green-200 rounded-xl text-center"> |
| <i data-lucide="check-circle" class="w-8 h-8 text-green-500 mx-auto mb-2"></i> |
| <p class="text-green-700 font-semibold">Заявка отправлена!</p> |
| <p class="text-green-600 text-sm">Мы свяжемся с вами в ближайшее время</p> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-leather-900 text-white/70 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8 mb-10"> |
| <div class="md:col-span-2"> |
| <div class="flex items-center gap-2 mb-4"> |
| <div class="w-10 h-10 rounded-full bg-leather-500 flex items-center justify-center"> |
| <i data-lucide="scissors" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-display text-2xl font-bold text-white">КожМастер</span> |
| </div> |
| <p class="text-white/50 leading-relaxed max-w-sm">Мастерская по изготовлению изделий из натуральной кожи ручной работы. Москва и Подмосковье.</p> |
| <div class="flex gap-3 mt-6"> |
| <a href="#" class="w-10 h-10 rounded-xl bg-leather-800 flex items-center justify-center hover:bg-leather-600 transition-colors"> |
| <i data-lucide="instagram" class="w-4 h-4"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-xl bg-leather-800 flex items-center justify-center hover:bg-leather-600 transition-colors"> |
| <i data-lucide="send" class="w-4 h-4"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-xl bg-leather-800 flex items-center justify-center hover:bg-leather-600 transition-colors"> |
| <i data-lucide="message-circle" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-display font-bold text-white mb-4">Изделия</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#products" class="hover:text-leather-400 transition-colors">Бумажники</a></li> |
| <li><a href="#products" class="hover:text-leather-400 transition-colors">Портмоне</a></li> |
| <li><a href="#products" class="hover:text-leather-400 transition-colors">Ремни</a></li> |
| <li><a href="#products" class="hover:text-leather-400 transition-colors">Индивидуальный заказ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-display font-bold text-white mb-4">Контакты</h4> |
| <ul class="space-y-2 text-sm"> |
| <li class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-leather-400"></i>+7 (495) 123-45-67</li> |
| <li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4 text-leather-400"></i>info@kozhmaster.ru</li> |
| <li class="flex items-center gap-2"><i data-lucide="map-pin" class="w-4 h-4 text-leather-400"></i>Москва, ул. Ремесленная, 15</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-leather-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4"> |
| <p class="text-sm text-white/40">© 2024 КожМастер. Все права защищены.</p> |
| <p class="text-sm text-white/40">Изготовлено с <i data-lucide="heart" class="w-3 h-3 inline text-leather-500"></i> в Москве</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-leather-500 text-white shadow-lg hover:bg-leather-600 transition-all duration-300 opacity-0 pointer-events-none z-50 flex items-center justify-center hover:shadow-xl hover:-translate-y-1"> |
| <i data-lucide="arrow-up" class="w-5 h-5"></i> |
| </button> |
|
|
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| const navbar = document.getElementById('navbar'); |
| let lastScroll = 0; |
| |
| window.addEventListener('scroll', () => { |
| const currentScroll = window.pageYOffset; |
| |
| if (currentScroll > 80) { |
| navbar.style.background = 'rgba(45,28,14,0.95)'; |
| navbar.style.backdropFilter = 'blur(20px)'; |
| navbar.style.boxShadow = '0 4px 30px rgba(0,0,0,0.3)'; |
| } else { |
| navbar.style.background = 'transparent'; |
| navbar.style.backdropFilter = 'none'; |
| navbar.style.boxShadow = 'none'; |
| } |
| |
| lastScroll = currentScroll; |
| }); |
| |
| |
| const menuBtn = document.getElementById('menuBtn'); |
| const closeMenuBtn = document.getElementById('closeMenu'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| const mobileLinks = document.querySelectorAll('.mobile-link'); |
| |
| menuBtn.addEventListener('click', () => { |
| mobileMenu.classList.add('open'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| |
| closeMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.remove('open'); |
| document.body.style.overflow = ''; |
| }); |
| |
| mobileLinks.forEach(link => { |
| link.addEventListener('click', () => { |
| mobileMenu.classList.remove('open'); |
| document.body.style.overflow = ''; |
| }); |
| }); |
| |
| |
| function animateCounter(element, target, suffix = '') { |
| let current = 0; |
| const increment = target / 60; |
| const timer = setInterval(() => { |
| current += increment; |
| if (current >= target) { |
| current = target; |
| clearInterval(timer); |
| } |
| element.textContent = Math.floor(current) + suffix; |
| }, 25); |
| } |
| |
| |
| setTimeout(() => { |
| animateCounter(document.getElementById('stat1'), 9, '+'); |
| animateCounter(document.getElementById('stat2'), 1500, '+'); |
| animateCounter(document.getElementById('stat3'), 800, '+'); |
| }, 800); |
| |
| |
| const revealElements = document.querySelectorAll('.reveal'); |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }); |
| |
| revealElements.forEach(el => observer.observe(el)); |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| const successMsg = document.getElementById('successMsg'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| contactForm.classList.add('hidden'); |
| successMsg.classList.remove('hidden'); |
| |
| |
| lucide.createIcons(); |
| |
| setTimeout(() => { |
| contactForm.classList.remove('hidden'); |
| successMsg.classList.add('hidden'); |
| contactForm.reset(); |
| }, 4000); |
| }); |
| |
| |
| const backToTop = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 600) { |
| backToTop.style.opacity = '1'; |
| backToTop.style.pointerEvents = 'auto'; |
| } else { |
| backToTop.style.opacity = '0'; |
| backToTop.style.pointerEvents = 'none'; |
| } |
| }); |
| |
| backToTop.addEventListener('click', () => { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
