| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Optica Opton - Современная оптика в Москве</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #6b82ff 0%, #3a56e8 100%); |
| } |
| |
| .nav-link:hover { |
| color: #3a56e8; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .input-focus:focus { |
| border-color: #3a56e8; |
| box-shadow: 0 0 0 3px rgba(58, 86, 232, 0.2); |
| } |
| |
| .transition-all { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-glasses text-3xl text-blue-600"></i> |
| <span class="text-xl font-bold text-gray-800">Optica Opton</span> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Главная</a> |
| <a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Услуги</a> |
| <a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Товары</a> |
| <a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">О нас</a> |
| <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Контакты</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <a href="tel:+74951234567" class="hidden md:flex items-center text-gray-700 hover:text-blue-600"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>+7 (495) 123-45-67</span> |
| </a> |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Главная</a> |
| <a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Услуги</a> |
| <a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Товары</a> |
| <a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium">О нас</a> |
| <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Контакты</a> |
| <a href="tel:+74951234567" class="flex items-center text-gray-700 hover:text-blue-600 pt-2 border-t"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>+7 (495) 123-45-67</span> |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-gradient text-white py-20"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Современная оптика в Москве</h1> |
| <p class="text-xl mb-8">Качественные очки, линзы и аксессуары с профессиональным подходом к каждому клиенту.</p> |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| <a href="#products" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg text-center hover:bg-gray-100 transition-all"> |
| Каталог товаров |
| </a> |
| <a href="#contacts" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg text-center hover:bg-white hover:text-blue-600 transition-all"> |
| Записаться на прием |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Очки" class="rounded-lg shadow-2xl max-w-full h-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши услуги</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-eye text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Проверка зрения</h3> |
| <p class="text-gray-600">Профессиональная диагностика зрения на современном оборудовании с точной подборкой линз.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-glasses text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Подбор очков</h3> |
| <p class="text-gray-600">Индивидуальный подбор оправ и линз с учетом ваших потребностей и стиля жизни.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-sun text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Солнцезащитные очки</h3> |
| <p class="text-gray-600">Широкий выбор солнцезащитных очков от ведущих мировых брендов с защитой от UV-излучения.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-clock text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Срочное изготовление</h3> |
| <p class="text-gray-600">Изготовление очков в течение 1-2 дней с использованием современных технологий.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-user-md text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Консультация офтальмолога</h3> |
| <p class="text-gray-600">Профессиональные консультации по вопросам здоровья глаз и профилактике заболеваний.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-tools text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Ремонт очков</h3> |
| <p class="text-gray-600">Качественный ремонт и регулировка оправ любой сложности с гарантией на работу.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши товары</h2> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1591073113125-e46713c829ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Очки Ray-Ban" class="w-full h-full object-cover"> |
| <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded"> |
| NEW |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1 text-gray-800">Ray-Ban Aviator</h3> |
| <p class="text-gray-600 text-sm mb-3">Классические авиаторы с поляризационными линзами</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">12,990 ₽</span> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
| <i class="fas fa-shopping-cart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" |
| alt="Очки Oakley" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1 text-gray-800">Oakley Holbrook</h3> |
| <p class="text-gray-600 text-sm mb-3">Спортивные очки с защитой от ультрафиолета</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">14,500 ₽</span> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
| <i class="fas fa-shopping-cart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Очки Prada" class="w-full h-full object-cover"> |
| <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
| SALE |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1 text-gray-800">Prada PR 16ZS</h3> |
| <p class="text-gray-600 text-sm mb-3">Стильные очки с градиентными линзами</p> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="text-red-500 font-bold">18,990 ₽</span> |
| <span class="text-gray-400 text-sm line-through ml-2">22,500 ₽</span> |
| </div> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
| <i class="fas fa-shopping-cart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1572635196234-14e3d0bff39d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Очки Gucci" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1 text-gray-800">Gucci GG0397S</h3> |
| <p class="text-gray-600 text-sm mb-3">Элегантные очки с логотипом Gucci</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">23,700 ₽</span> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
| <i class="fas fa-shopping-cart"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-10"> |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-blue-600 hover:text-white transition-all"> |
| Смотреть все товары |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">О нашей оптике</h2> |
| <p class="text-gray-600 mb-4">Optica Opton - это современный оптический салон, работающий на рынке с 2010 года. Мы предлагаем широкий ассортимент очков, линз и аксессуаров от ведущих мировых производителей.</p> |
| <p class="text-gray-600 mb-6">Наши специалисты имеют многолетний опыт работы и регулярно проходят обучение, чтобы предложить вам самые современные решения для коррекции зрения.</p> |
| |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">Гарантия качества</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">Опытные специалисты</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">Современное оборудование</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <span class="text-gray-700">Индивидуальный подход</span> |
| </div> |
| </div> |
| |
| <a href="#contacts" class="inline-block bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all"> |
| Записаться на прием |
| </a> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1571622840901-92ae1385a6b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Наш салон" class="rounded-lg shadow-lg w-full"> |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg hidden md:block"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold text-blue-600">10+</div> |
| <div class="text-gray-600">лет на рынке</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Отзывы наших клиентов</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"Отличный сервис и профессиональный подход! Подобрали идеальные очки, которые мне очень идут. Спасибо!"</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Анна" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium text-gray-800">Анна К.</h4> |
| <p class="text-sm text-gray-500">Клиент с 2018 года</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"Очень доволен качеством линз и обслуживанием. Очки сделали быстро, все идеально подошло. Рекомендую!"</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Дмитрий" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium text-gray-800">Дмитрий С.</h4> |
| <p class="text-sm text-gray-500">Клиент с 2020 года</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mb-4">"Приятная атмосфера и внимательные специалисты. Подобрали солнцезащитные очки с диоптриями, теперь могу комфортно водить машину."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Елена" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium text-gray-800">Елена В.</h4> |
| <p class="text-sm text-gray-500">Клиент с 2021 года</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contacts" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Контакты</h2> |
| |
| <div class="flex flex-col lg:flex-row"> |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Наши контакты</h3> |
| |
| <div class="space-y-4 mb-8"> |
| <div class="flex items-start"> |
| <div class="text-blue-600 mr-3 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Адрес</h4> |
| <p class="text-gray-600">г. Москва, ул. Оптическая, д. 15</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-600 mr-3 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Телефон</h4> |
| <p class="text-gray-600">+7 (495) 123-45-67</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-600 mr-3 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Email</h4> |
| <p class="text-gray-600">info@optica-opton.ru</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-blue-600 mr-3 mt-1"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Часы работы</h4> |
| <p class="text-gray-600">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p> |
| </div> |
| </div> |
| </div> |
| |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Мы в социальных сетях</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition-all"> |
| <i class="fab fa-vk"></i> |
| </a> |
| <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition-all"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition-all"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-green-600 text-white p-3 rounded-full hover:bg-green-700 transition-all"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Записаться на прием</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-gray-700 mb-1">Ваше имя</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Иван Иванов"> |
| </div> |
| |
| <div> |
| <label for="phone" class="block text-gray-700 mb-1">Телефон</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="+7 (999) 123-45-67"> |
| </div> |
| |
| <div> |
| <label for="service" class="block text-gray-700 mb-1">Услуга</label> |
| <select id="service" class="w-full px-4 py-2 border rounded-lg input-focus transition-all"> |
| <option value="">Выберите услугу</option> |
| <option value="checkup">Проверка зрения</option> |
| <option value="glasses">Подбор очков</option> |
| <option value="sunglasses">Солнцезащитные очки</option> |
| <option value="consult">Консультация офтальмолога</option> |
| <option value="repair">Ремонт очков</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="date" class="block text-gray-700 mb-1">Дата приема</label> |
| <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg input-focus transition-all"> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-gray-700 mb-1">Комментарий</label> |
| <textarea id="message" rows="3" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Ваши пожелания..."></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all"> |
| Отправить заявку |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="h-96 w-full"> |
| <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a&source=constructor" |
| width="100%" height="100%" frameborder="0" class="block"></iframe> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-10"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-glasses text-2xl text-blue-400"></i> |
| <span class="text-xl font-bold">Optica Opton</span> |
| </div> |
| <p class="text-gray-400">Современная оптика в Москве с 2010 года. Качество, стиль и забота о вашем зрении.</p> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Меню</h4> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition-all">Главная</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition-all">Услуги</a></li> |
| <li><a href="#products" class="text-gray-400 hover:text-white transition-all">Товары</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition-all">О нас</a></li> |
| <li><a href="#contacts" class="text-gray-400 hover:text-white transition-all">Контакты</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Контакты</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2 mt-1"></i> |
| <span class="text-gray-400">г. Москва, ул. Оптическая, д. 15</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> |
| <span class="text-gray-400">+7 (495) 123-45-67</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> |
| <span class="text-gray-400">info@optica-opton.ru</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Подписаться</h4> |
| <p class="text-gray-400 mb-4">Будьте в курсе наших акций и новинок</p> |
| <form class="flex"> |
| <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> |
| <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition-all"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| <div class="flex space-x-4 mt-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"> |
| <i class="fab fa-vk"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-all"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Optica Opton. Все права защищены.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Политика конфиденциальности</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Пользовательское соглашение</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| const contactForm = document.querySelector('form'); |
| if (contactForm) { |
| contactForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('Спасибо! Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.'); |
| this.reset(); |
| }); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Greats/optical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
