|
|
<!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> |
