193 lines
9.5 KiB
HTML
193 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Оптика Алаколь — Строительство волоконно-оптической сети</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700;800&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📡</text></svg>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#FFFFFF;--gray-500:#5B6573;--gray-100:#F2F4F7;--blue:#0066FF}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);color:var(--white);padding:100px 24px}
|
||
.hero .container{padding:0;max-width:900px}
|
||
.hero h1{font:800 clamp(36px,6vw,56px)/1.05 'Unbounded',sans-serif;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;margin-bottom:32px;max-width:600px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform .2s}
|
||
.btn:hover{transform:translateY(-2px)}
|
||
.btn-outline{background:transparent;border:2px solid var(--cyan);color:var(--cyan);margin-left:12px}
|
||
.section{padding:80px 24px}
|
||
.section h2{font:700 clamp(28px,4vw,36px)/1.15 'Unbounded',sans-serif;margin-bottom:40px;text-align:center}
|
||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;transition:transform .2s}
|
||
.card:hover{transform:translateY(-4px)}
|
||
.card-icon{font-size:48px;margin-bottom:16px}
|
||
.card h3{font:700 22px/1.3 'Unbounded',sans-serif;margin-bottom:12px}
|
||
.card p{color:var(--gray-500)}
|
||
.stats{background:var(--cyan-50);text-align:center}
|
||
.stat-number{font:800 clamp(48px,8vw,72px)/1 'Unbounded',sans-serif;color:var(--blue)}
|
||
.stat-label{font-size:18px;color:var(--gray-500);margin-top:8px}
|
||
.map-section{background:var(--ink);color:var(--white)}
|
||
.map-section h2{color:var(--white)}
|
||
.map-placeholder{background:linear-gradient(45deg,#1a1f2e,#2a3140);border-radius:16px;height:400px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px}
|
||
.map-placeholder p{color:#9aa3b2;font-size:18px}
|
||
.form-section{background:var(--gray-100)}
|
||
.form-container{max-width:500px;margin:0 auto;background:var(--white);padding:40px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08)}
|
||
.form-group{margin-bottom:20px}
|
||
.form-group label{display:block;font-weight:600;margin-bottom:8px}
|
||
.form-group input,.form-group textarea{width:100%;padding:14px;border:1px solid #e0e0e0;border-radius:8px;font-size:16px;font-family:inherit}
|
||
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--blue)}
|
||
.form-group textarea{resize:vertical;min-height:100px}
|
||
.submit-btn{width:100%;background:var(--blue);color:var(--white);border:none;padding:16px;border-radius:8px;font-weight:700;font-size:17px;cursor:pointer;transition:background .2s}
|
||
.submit-btn:hover{background:#0052cc}
|
||
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:40px}
|
||
.contact-item{text-align:center}
|
||
.contact-icon{font-size:32px;margin-bottom:8px}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(max-width:640px){.container{padding:48px 20px}.hero{padding:60px 20px}.section{padding:48px 20px}.btn-outline{margin-left:0;margin-top:12px;display:block;text-align:center}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Оптика Алаколь</h1>
|
||
<p>Строительство современной волоконно-оптической сети на 400 абонентов в Алакольском районе. Высокоскоростной интернет для дома и бизнеса.</p>
|
||
<a class="btn" href="#connect">Подключиться</a>
|
||
<a class="btn btn-outline" href="#project">О проекте</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="project" class="section">
|
||
<h2 class="reveal">О проекте</h2>
|
||
<div class="cards">
|
||
<div class="card reveal">
|
||
<div class="card-icon">📡</div>
|
||
<h3>Современная технология</h3>
|
||
<p>Волоконно-оптическая линия связи (ВОЛС) по технологии GPON — стабильный интернет без помех и обрывов.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">🏘</div>
|
||
<h3>Охват района</h3>
|
||
<p>Подключение частных домов, квартир и объектов бизнеса в населённых пунктах Алакольского района.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">⚡</div>
|
||
<h3>Высокая скорость</h3>
|
||
<p>Доступ к интернету на скоростях до 100 Мбит/с и выше. Подходит для работы, учёбы и развлечений.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section stats">
|
||
<div class="container">
|
||
<div class="cards">
|
||
<div class="card reveal">
|
||
<div class="stat-number">400</div>
|
||
<div class="stat-label">абонентов</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="stat-number">100+</div>
|
||
<div class="stat-label">км оптоволокна</div>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="stat-number">10</div>
|
||
<div class="stat-label">населённых пунктов</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="reveal">Преимущества</h2>
|
||
<div class="cards">
|
||
<div class="card reveal">
|
||
<div class="card-icon">🛡</div>
|
||
<h3>Надёжность</h3>
|
||
<p>Оптоволокно не боится грозы, перепадов температур и электромагнитных помех.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">💰</div>
|
||
<h3>Доступная цена</h3>
|
||
<p>Конкурентные тарифы на подключение и ежемесячное обслуживание.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">🔧</div>
|
||
<h3>Поддержка</h3>
|
||
<p>Техническая поддержка и оперативное устранение неисправностей.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-icon">📺</div>
|
||
<h3>ТВ и телефония</h3>
|
||
<p>Возможность подключения цифрового ТВ и домашней телефонии.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section map-section">
|
||
<h2 class="reveal">Зона покрытия</h2>
|
||
<div class="map-placeholder reveal">
|
||
<div>
|
||
<p style="font-size:48px;margin-bottom:16px">🗺</p>
|
||
<p>Алакольский район<br>Карта зоны покрытия сети</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="connect" class="section form-section">
|
||
<h2 class="reveal">Заявка на подключение</h2>
|
||
<div class="form-container reveal">
|
||
<form action="https://formsubmit.co/optika.alakol@example.com" method="POST">
|
||
<div class="form-group">
|
||
<label for="name">Ваше имя</label>
|
||
<input type="text" id="name" name="name" placeholder="Иванов Иван" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Номер телефона</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+7 (777) 123-45-67" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="address">Адрес подключения</label>
|
||
<input type="text" id="address" name="address" placeholder="с. Ушарал, ул. Абая 15" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="comment">Комментарий (необязательно)</label>
|
||
<textarea id="comment" name="comment" placeholder="Пожелания или вопросы"></textarea>
|
||
</div>
|
||
<button type="submit" class="submit-btn">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="reveal">Контакты</h2>
|
||
<div class="contact-info reveal">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📞</div>
|
||
<p><strong>Телефон</strong><br>+7 (777) 123-45-67</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">✉</div>
|
||
<p><strong>Email</strong><br>info@optika-alakol.kz</p>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">📍</div>
|
||
<p><strong>Адрес</strong><br>Алакольский район, с. Ушарал</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|