| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Optie.ru - Современная оптика с безупречным стилем</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=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Raleway', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| h1, h2, h3, h4 { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .hero { |
| background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80'); |
| background-size: cover; |
| background-position: center; |
| min-height: 100vh; |
| } |
| |
| .frame-card { |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| perspective: 1000px; |
| } |
| |
| .frame-card:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); |
| } |
| |
| .frame-img { |
| transition: transform 0.6s; |
| transform-style: preserve-3d; |
| } |
| |
| .frame-card:hover .frame-img { |
| transform: rotateY(10deg); |
| } |
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| |
| .fade-in { |
| opacity: 0; |
| transition: opacity 0.8s ease-in; |
| } |
| |
| .fade-in.visible { |
| opacity: 1; |
| } |
| |
| .brand-logo { |
| filter: grayscale(100%) brightness(0.5); |
| transition: all 0.3s ease; |
| } |
| |
| .brand-logo:hover { |
| filter: grayscale(0%) brightness(1); |
| } |
| |
| .eye-test-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: #000; |
| transition: width 0.3s; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <nav class="fixed w-full bg-white/90 backdrop-blur-md z-50 shadow-sm"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold flex items-center"> |
| <i class="fas fa-glasses mr-2 text-blue-600"></i> |
| <span>Optie.ru</span> |
| </a> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#about" class="nav-link">О салоне</a> |
| <a href="#frames" class="nav-link">Оправы</a> |
| <a href="#lenses" class="nav-link">Линзы</a> |
| <a href="#services" class="nav-link">Услуги</a> |
| <a href="#contact" class="nav-link">Контакты</a> |
| </div> |
| <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 transition"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>+7 (495) 123-45-67</span> |
| </a> |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero flex items-center justify-center text-center text-white pt-20"> |
| <div class="container mx-auto px-6"> |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">Ясный взгляд на мир с <span class="text-blue-400">Optie.ru</span></h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Эксклюзивные оправы, премиальные линзы и индивидуальный подход к каждому клиенту</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#contact" class="bg-blue-600 text-white px-8 py-3 rounded-full font-medium hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> Записаться на прием |
| </a> |
| <a href="#frames" class="border-2 border-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-gray-900 transition flex items-center justify-center"> |
| <i class="fas fa-glasses mr-2"></i> Наши коллекции |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1581093196278-1a43aefb8a93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Салон Optie.ru" class="rounded-lg shadow-xl w-full"> |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg"> |
| <div class="text-4xl text-blue-600 font-bold">12+</div> |
| <div class="text-gray-600">лет на рынке</div> |
| </div> |
| </div> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Optie.ru — это стиль и комфорт вашего зрения</h2> |
| <p class="text-gray-600 mb-6">Наш салон оптики — это место, где встречаются мода, технологии и забота о здоровье ваших глаз. Мы предлагаем эксклюзивные коллекции оправ от ведущих мировых брендов и инновационные линзы с максимальным комфортом.</p> |
| <p class="text-gray-600 mb-8">Наши специалисты с многолетним опытом помогут подобрать идеальное решение для коррекции зрения, учитывая ваш образ жизни, профессию и индивидуальные особенности.</p> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-glasses text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">500+</h4> |
| <p class="text-sm text-gray-600">моделей оправ</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-eye text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">10 000+</h4> |
| <p class="text-sm text-gray-600">довольных клиентов</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-certificate text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">25+</h4> |
| <p class="text-sm text-gray-600">ведущих брендов</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">30 мин</h4> |
| <p class="text-sm text-gray-600">среднее время приема</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="frames" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Эксклюзивные коллекции оправ</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Мы тщательно отбираем каждую модель, чтобы предложить вам только лучшее</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="frame-card bg-white rounded-xl overflow-hidden shadow-md"> |
| <div class="frame-img"> |
| <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Женские оправы" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Женские оправы</h3> |
| <p class="text-gray-600 mb-4">Элегантные и стильные модели для современных женщин</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-blue-600 font-medium">От 8 900 ₽</span> |
| <a href="#contact" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition flex items-center"> |
| Подробнее <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="frame-card bg-white rounded-xl overflow-hidden shadow-md"> |
| <div class="frame-img"> |
| <img src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1742&q=80" alt="Мужские оправы" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Мужские оправы</h3> |
| <p class="text-gray-600 mb-4">Сдержанные и статусные модели для деловых мужчин</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-blue-600 font-medium">От 10 500 ₽</span> |
| <a href="#contact" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition flex items-center"> |
| Подробнее <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="frame-card bg-white rounded-xl overflow-hidden shadow-md"> |
| <div class="frame-img"> |
| <img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Детские оправы" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Детские оправы</h3> |
| <p class="text-gray-600 mb-4">Прочные, безопасные и стильные модели для детей</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-blue-600 font-medium">От 5 900 ₽</span> |
| <a href="#contact" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition flex items-center"> |
| Подробнее <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16"> |
| <h3 class="text-2xl font-bold mb-8 text-center">Нам доверяют мировые бренды</h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"> |
| <img src="https://via.placeholder.com/150x80?text=Ray-Ban" alt="Ray-Ban" class="brand-logo h-16 object-contain mx-auto"> |
| <img src="https://via.placeholder.com/150x80?text=Oakley" alt="Oakley" class="brand-logo h-16 object-contain mx-auto"> |
| <img src="https://via.placeholder.com/150x80?text=Prada" alt="Prada" class="brand-logo h-16 object-contain mx-auto"> |
| <img src="https://via.placeholder.com/150x80?text=Gucci" alt="Gucci" class="brand-logo h-16 object-contain mx-auto"> |
| <img src="https://via.placeholder.com/150x80?text=Dior" alt="Dior" class="brand-logo h-16 object-contain mx-auto"> |
| <img src="https://via.placeholder.com/150x80?text=Tom+Ford" alt="Tom Ford" class="brand-logo h-16 object-contain mx-auto"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="lenses" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Инновационные линзы</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Современные технологии для максимального комфорта вашего зрения</p> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-8 mb-16"> |
| <div class="lg:w-1/2 bg-gray-50 rounded-xl p-8"> |
| <div class="flex items-start mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-sun text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Фотохромные линзы</h3> |
| <p class="text-gray-600">Автоматически затемняются на солнце и светлеют в помещении. Защищают от УФ-излучения и уменьшают нагрузку на глаза.</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-car text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Поляризационные линзы</h3> |
| <p class="text-gray-600">Устраняют блики от мокрых поверхностей и снега, идеальны для вождения и активного отдыха.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-laptop text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Blue-blocker</h3> |
| <p class="text-gray-600">Специальное покрытие блокирует вредный синий свет от экранов, снижая усталость глаз.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 bg-gray-50 rounded-xl p-8"> |
| <div class="flex items-start mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-layer-group text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Прогрессивные линзы</h3> |
| <p class="text-gray-600">Корректируют зрение на всех расстояниях без видимых переходов, заменяют несколько пар очков.</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-feather text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Ультратонкие линзы</h3> |
| <p class="text-gray-600">Высокий индекс преломления делает линзы тоньше и легче даже при сильных диоптриях.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-shield-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Защитные покрытия</h3> |
| <p class="text-gray-600">Антибликовое, антистатическое, водо- и грязеотталкивающее покрытия продлевают срок службы.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-blue-600 text-white rounded-xl p-8 md:p-12 text-center"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Бесплатная диагностика зрения</h3> |
| <p class="text-blue-100 mb-6 max-w-2xl mx-auto">Запишитесь на комплексное обследование с использованием современного оборудования</p> |
| <a href="#contact" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition eye-test-animation"> |
| <i class="fas fa-eye mr-2"></i> Записаться на проверку зрения |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Полный спектр услуг для здоровья ваших глаз и комфортного зрения</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-eye"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Проверка зрения</h3> |
| <p class="text-gray-600 mb-4">Комплексная диагностика на современном оборудовании с консультацией специалиста.</p> |
| <p class="font-bold text-lg">1 500 ₽</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-glasses"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Подбор очков</h3> |
| <p class="text-gray-600 mb-4">Индивидуальный подбор оправы и линз с учетом ваших потребностей и образа жизни.</p> |
| <p class="font-bold text-lg">Бесплатно</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-tools"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Ремонт очков</h3> |
| <p class="text-gray-600 mb-4">Профессиональный ремонт оправ, замена носоупоров, дужек и других элементов.</p> |
| <p class="font-bold text-lg">От 500 ₽</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-snowflake"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Затемненные линзы</h3> |
| <p class="text-gray-600 mb-4">Изготовление солнцезащитных очков с диоптриями по вашему рецепту.</p> |
| <p class="font-bold text-lg">От 4 500 ₽</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-swimming-pool"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Очки для плавания</h3> |
| <p class="text-gray-600 mb-4">Специальные очки с диоптриями для занятий водными видами спорта.</p> |
| <p class="font-bold text-lg">От 3 200 ₽</p> |
| </div> |
| |
| <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-md transition"> |
| <div class="text-4xl mb-4 text-blue-600"> |
| <i class="fas fa-running"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-4">Спортивные очки</h3> |
| <p class="text-gray-600 mb-4">Прочные и удобные очки для активного отдыха и занятий спортом.</p> |
| <p class="font-bold text-lg">От 5 800 ₽</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Записаться на прием</h2> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <h3 class="text-xl font-bold mb-6">Наши контакты</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold mb-1">Адрес</h4> |
| <p class="text-gray-600">г. Москва, ул. Оптическая, 15</p> |
| <p class="text-gray-600">БЦ "Зрение", 3 этаж</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold mb-1">Часы работы</h4> |
| <p class="text-gray-600">Пн-Пт: 10:00 - 20:00</p> |
| <p class="text-gray-600">Сб-Вс: 11:00 - 18:00</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold mb-1">Телефон</h4> |
| <p class="text-gray-600">+7 (495) 123-45-67</p> |
| <a href="tel:+74951234567" class="text-blue-600 hover:text-blue-800 transition">Позвонить</a> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold mb-1">Email</h4> |
| <p class="text-gray-600">info@optie.ru</p> |
| <a href="mailto:info@optie.ru" class="text-blue-600 hover:text-blue-800 transition">Написать</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-10"> |
| <h4 class="font-bold mb-4">Мы в социальных сетях:</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> |
| <i class="fab fa-vk"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <form class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-gray-700 mb-2">Ваше имя</label> |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> |
| </div> |
| <div> |
| <label for="phone" class="block text-gray-700 mb-2">Телефон</label> |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <label for="service" class="block text-gray-700 mb-2">Услуга</label> |
| <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> |
| <option value="">Выберите услугу</option> |
| <option value="eye-test">Проверка зрения</option> |
| <option value="glasses">Подбор очков</option> |
| <option value="repair">Ремонт очков</option> |
| <option value="consult">Консультация специалиста</option> |
| </select> |
| </div> |
| <div class="mt-6"> |
| <label for="date" class="block text-gray-700 mb-2">Желаемая дата</label> |
| <input type="date" id="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> |
| </div> |
| <div class="mt-6"> |
| <label for="message" class="block text-gray-700 mb-2">Комментарий</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea> |
| </div> |
| <button type="submit" class="w-full mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition font-medium"> |
| Отправить заявку |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="h-96 w-full"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.3737899197454!2d37.61531071593095!3d55.75202398055309!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a50b315e573%3A0xa886bf5a3d00b2a!2z0JzQvtGB0LrQvtCy0YHQutC40Lkg0JrRgNC10LzQu9GM!5e0!3m2!1sru!2sru!4v1620000000000!5m2!1sru!2sru" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between"> |
| <div class="mb-8 md:mb-0"> |
| <a href="#" class="text-2xl font-bold flex items-center mb-4"> |
| <i class="fas fa-glasses mr-2 text-blue-400"></i> |
| <span>Optie.ru</span> |
| </a> |
| <p class="text-gray-400 max-w-md">Современная оптика с безупречным стилем и заботой о вашем зрении.</p> |
| </div> |
| <div class="mb-8 md:mb-0"> |
| <h4 class="text-lg font-bold mb-4">Меню</h4> |
| <ul class="space-y-2"> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">О салоне</a></li> |
| <li><a href="#frames" class="text-gray-400 hover:text-white transition">Оправы</a></li> |
| <li><a href="#lenses" class="text-gray-400 hover:text-white transition">Линзы</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Услуги</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Контакты</a></li> |
| </ul> |
| </div> |
| <div class="mb-8 md:mb-0"> |
| <h4 class="text-lg font-bold mb-4">Контакты</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-blue-400"></i> |
| г. Москва, ул. ,Берзарина, 34 стр 12 |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-2 text-blue-400"></i> |
| +7 (495) 123-45-67 |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-blue-400"></i> |
| info@optie.ru |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Подписаться</h4> |
| <p class="text-gray-400 mb-4">Узнавайте первыми о новых коллекциях и акциях</p> |
| <div class="flex"> |
| <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> |
| <button class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400"> |
| <p>© 2023 Optie.ru. Все права защищены.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| const fadeInOnScroll = function() { |
| fadeElements.forEach(element => { |
| const elementTop = element.getBoundingClientRect().top; |
| const windowHeight = window.innerHeight; |
| |
| if (elementTop < windowHeight - 100) { |
| element.classList.add('visible'); |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', fadeInOnScroll); |
| fadeInOnScroll(); |
| |
| |
| 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' |
| }); |
| } |
| }); |
| }); |
| }); |
| </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=BED6MA/optie" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
