init project
This commit is contained in:
206
index.html
Normal file
206
index.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Telmi - умные часы, которые говорят за вас!</title>
|
||||
<meta name="description" content="Умные часы Telmi помогают людям с особенностями речи легко общаться с миром. Решение для детей и взрослых с нарушениями коммуникации.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="nav-logo">
|
||||
<img src="https://i0.wp.com/mytelmi.es/wp-content/uploads/2023/09/cropped-LogoTelmiSmart-W.png"
|
||||
alt="Telmi Logo"
|
||||
class="nav-logo">
|
||||
</a>
|
||||
<button class="mobile-menu-btn">☰</button>
|
||||
<div class="nav-links">
|
||||
<a href="#how-it-works" class="nav-link">Как работает Telmi?</a>
|
||||
<a href="#who-is-it-for" class="nav-link">Кому подойдет Telmi?</a>
|
||||
<a href="#why-telmi" class="nav-link">Почему Telmi?</a>
|
||||
<a href="#reviews" class="nav-link">Отзывы пользователей</a>
|
||||
<a href="#order" class="nav-link">Где купить Telmi?</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header with Background Image -->
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<h1>Умные часы, которые говорят за вас!</h1>
|
||||
<p>Telmi помогает людям с особенностями речи легко общаться с миром, выражать свои желания и получать поддержку.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#order" class="btn btn-primary">Выбрать Telmi</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Who is it for -->
|
||||
<section class="section who-section" id="who-is-it-for">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Кому подойдет Telmi?</h2>
|
||||
<div class="user-types">
|
||||
<div class="user-card">
|
||||
<div class="user-emoji">👶</div>
|
||||
<h3>Детям с нарушениями речи</h3>
|
||||
<p>Помогает выражать основные потребности и эмоции</p>
|
||||
</div>
|
||||
<div class="user-card">
|
||||
<div class="user-emoji">🧩</div>
|
||||
<h3>Людям с аутизмом</h3>
|
||||
<p>Упрощает коммуникацию и снижает тревожность</p>
|
||||
</div>
|
||||
<div class="user-card">
|
||||
<div class="user-emoji">👵</div>
|
||||
<h3>Взрослым с ограниченными возможностями</h3>
|
||||
<p>Дает возможность быть услышанным в любых ситуациях</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Video Background Section -->
|
||||
<section class="video-section" id="how-it-works">
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/7Ell_V8V6es?autoplay=1&mute=1&loop=1&playlist=7Ell_V8V6es&controls=0"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<div class="container">
|
||||
<h2 class="section-title" style="color: white;">Как работает Telmi?</h2>
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👆</div>
|
||||
<h3>Выбираете иконку</h3>
|
||||
<p>Часы мгновенно озвучивают ваш запрос понятным голосом</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👂</div>
|
||||
<h3>Получаете ответ</h3>
|
||||
<p>Родители, учителя или близкие сразу понимают вашу потребность</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎙️</div>
|
||||
<h3>Используете ассистента</h3>
|
||||
<p>Голосовой помощник выполняет команды и напоминает о важном</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Section -->
|
||||
<section class="section why-section" id="why-telmi">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Почему Telmi?</h2>
|
||||
</div>
|
||||
<div class="why-container">
|
||||
<button class="scroll-btn left">←</button>
|
||||
<div class="cards-wrapper">
|
||||
<div class="benefit-card">
|
||||
<h3>📢 Голосовое оповещение</h3>
|
||||
<p>Часы говорят за вас четким и понятным голосом в любой ситуации</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<h3>🎨 Интуитивные иконки</h3>
|
||||
<p>Простой интерфейс с понятными изображениями для мгновенного выбора</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<h3>🔔 Напоминания</h3>
|
||||
<p>Важные события и расписание всегда под контролем</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<h3>❤️ Мониторинг здоровья</h3>
|
||||
<p>Отслеживание пульса, температуры и активности</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<h3>📞 Служба поддержки</h3>
|
||||
<p>Помощь и консультации 24/7 по любым вопросам</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="scroll-btn right">→</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="section reviews-section" id="reviews">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Отзывы пользователей</h2>
|
||||
</div>
|
||||
<div class="reviews-container">
|
||||
<button class="review-scroll-btn left">←</button>
|
||||
<div class="reviews-wrapper">
|
||||
<div class="review-card">
|
||||
<div class="user-avatar-container">
|
||||
<img src="https://randomuser.me/api/portraits/women/43.jpg" class="user-avatar" alt="Марина">
|
||||
</div>
|
||||
<p>"Благодаря Telmi, мой ребенок теперь может сам выражать свои желания. Это изменило нашу жизнь!"</p>
|
||||
<div class="testimonial-author">- Марина, мама 8-летнего Артема</div>
|
||||
</div>
|
||||
<div class="review-card">
|
||||
<div class="user-avatar-container">
|
||||
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="user-avatar" alt="Ольга">
|
||||
</div>
|
||||
<p>"Как педагог, я вижу огромный прогресс у детей с аутизмом, использующих Telmi. Они стали более открытыми и спокойными."</p>
|
||||
<div class="testimonial-author">- Ольга Сергеевна, логопед</div>
|
||||
</div>
|
||||
<div class="review-card">
|
||||
<div class="user-avatar-container">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="user-avatar" alt="Дмитрий">
|
||||
</div>
|
||||
<p>"Моя бабушка после инсульта снова может общаться с нами. Telmi стал для нас настоящим спасением."</p>
|
||||
<div class="testimonial-author">- Дмитрий, внук</div>
|
||||
</div>
|
||||
<div class="review-card">
|
||||
<div class="user-avatar-container">
|
||||
<img src="https://randomuser.me/api/portraits/women/22.jpg" class="user-avatar" alt="Анна">
|
||||
</div>
|
||||
<p>"Простое и эффективное решение для невербальных детей. Рекомендую всем родителям!"</p>
|
||||
<div class="testimonial-author">- Анна, мама 6-летней Софии</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="review-scroll-btn right">→</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section" id="order">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-image">
|
||||
<img src="https://i0.wp.com/mytelmi.es/wp-content/uploads/2023/10/Telmi-Smart-Wach.png" alt="Telmi Smart Watch">
|
||||
</div>
|
||||
<div class="cta-text">
|
||||
<h2>Где купить Telmi?</h2>
|
||||
<div class="discount-badge">Акция: скидка 10% сегодня!</div>
|
||||
<div class="price">14 990 ₽ <span style="text-decoration: line-through; opacity: 0.7; font-size: 1.5rem;">16 990 ₽</span></div>
|
||||
<div class="payment-container">
|
||||
<iframe
|
||||
src="https://yoomoney.ru/quickpay/fundraise/button?billNumber=19ACK72QFDN.250330&"
|
||||
frameborder="0"
|
||||
scrolling="no">
|
||||
</iframe>
|
||||
</div>
|
||||
<p class="urgency">Осталось 15 штук по акции</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2025 Telmi. Все права защищены.</p>
|
||||
<p>support@mytelmi.ru</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user