| | <!DOCTYPE html> |
| | <html lang="ru" dir="ltr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>LumiOptica - Оптика премиум класса</title> |
| | <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> |
| | <style> |
| | :root { |
| | --gold: #c5a47e; |
| | --navy: #1a365d; |
| | --cream: #f4f0e8; |
| | } |
| | |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: 'Lato', sans-serif; |
| | background: var(--cream); |
| | color: #333; |
| | overflow-x: hidden; |
| | } |
| | |
| | |
| | .navbar { |
| | position: fixed; |
| | top: 0; |
| | width: 100%; |
| | background: rgba(255,255,255,0.95); |
| | z-index: 1000; |
| | padding: 1rem 5%; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| | } |
| | |
| | .logo { |
| | font-family: 'Playfair Display', serif; |
| | font-size: 1.5rem; |
| | color: var(--navy); |
| | text-decoration: none; |
| | } |
| | |
| | .nav-links { |
| | display: flex; |
| | gap: 2rem; |
| | } |
| | |
| | .nav-links a { |
| | text-decoration: none; |
| | color: var(--navy); |
| | font-weight: 500; |
| | transition: color 0.3s; |
| | } |
| | |
| | .nav-links a:hover { |
| | color: var(--gold); |
| | } |
| | |
| | .menu-toggle { |
| | display: none; |
| | cursor: pointer; |
| | } |
| | |
| | |
| | .parallax-section { |
| | height: 60vh; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .parallax-bg { |
| | position: absolute; |
| | width: 100%; |
| | height: 120%; |
| | background: url('https://images.unsplash.com/photo-1612817288484-6f916006741a') center/cover; |
| | will-change: transform; |
| | } |
| | |
| | |
| | .animate-on-scroll { |
| | opacity: 0; |
| | transform: translateY(50px); |
| | } |
| | |
| | |
| | .contact-form { |
| | max-width: 600px; |
| | margin: 2rem auto; |
| | padding: 2rem; |
| | background: white; |
| | border-radius: 10px; |
| | box-shadow: 0 5px 25px rgba(0,0,0,0.1); |
| | } |
| | |
| | .form-group { |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | input, textarea { |
| | width: 100%; |
| | padding: 0.8rem; |
| | border: 1px solid #ddd; |
| | border-radius: 4px; |
| | font-family: 'Lato', sans-serif; |
| | } |
| | |
| | button[type="submit"] { |
| | background: var(--navy); |
| | color: white; |
| | padding: 1rem 2rem; |
| | border: none; |
| | border-radius: 30px; |
| | cursor: pointer; |
| | transition: background 0.3s; |
| | } |
| | |
| | button[type="submit"]:hover { |
| | background: var(--gold); |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | .nav-links { |
| | position: fixed; |
| | right: -100%; |
| | top: 70px; |
| | flex-direction: column; |
| | background: white; |
| | width: 100%; |
| | text-align: center; |
| | padding: 2rem; |
| | transition: 0.3s; |
| | } |
| | |
| | .nav-links.active { |
| | right: 0; |
| | } |
| | |
| | .menu-toggle { |
| | display: block; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <nav class="navbar"> |
| | <a href="#" class="logo">LumiOptica</a> |
| | <ul class="nav-links"> |
| | <li><a href="#about">О нас</a></li> |
| | <li><a href="#services">Услуги</a></li> |
| | <li><a href="#blog">Блог</a></li> |
| | <li><a href="#contact">Контакты</a></li> |
| | </ul> |
| | <div class="menu-toggle"> |
| | <i class="fas fa-bars"></i> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="parallax-section"> |
| | <div class="parallax-bg"></div> |
| | </section> |
| |
|
| | |
| | <section class="contact"> |
| | <form class="contact-form" id="contactForm"> |
| | <div class="form-group"> |
| | <input type="text" placeholder="Ваше имя" required> |
| | </div> |
| | <div class="form-group"> |
| | <input type="email" placeholder="Email" required> |
| | </div> |
| | <div class="form-group"> |
| | <textarea rows="5" placeholder="Сообщение"></textarea> |
| | </div> |
| | <button type="submit">Отправить</button> |
| | </form> |
| | </section> |
| |
|
| | <script> |
| | |
| | document.querySelector('.menu-toggle').addEventListener('click', () => { |
| | document.querySelector('.nav-links').classList.toggle('active'); |
| | }); |
| | |
| | |
| | document.addEventListener('scroll', () => { |
| | const scrolled = window.pageYOffset; |
| | const parallaxBg = document.querySelector('.parallax-bg'); |
| | parallaxBg.style.transform = `translateY(${scrolled * 0.5}px)`; |
| | }); |
| | |
| | |
| | gsap.registerPlugin(ScrollTrigger); |
| | |
| | gsap.utils.toArray('.animate-on-scroll').forEach(element => { |
| | gsap.from(element, { |
| | scrollTrigger: { |
| | trigger: element, |
| | start: "top 80%", |
| | }, |
| | opacity: 0, |
| | y: 50, |
| | duration: 1 |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('contactForm').addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | |
| | }); |
| | </script> |
| |
|
| | |
| | <script type="application/ld+json"> |
| | { |
| | "@context": "https://schema.org", |
| | "@type": "Optician", |
| | "name": "LumiOptica", |
| | "image": "URL_ЛОГОТИПА", |
| | "priceRange": "$$$", |
| | "address": { |
| | "@type": "PostalAddress", |
| | "streetAddress": "ул. Примерная, 123", |
| | "addressLocality": "Москва", |
| | "postalCode": "123456" |
| | } |
| | } |
| | </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/87yt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
