/
varsl
/
HTML-CSS
Обзор
Документация
Войти
/
varsl
/
HTML-CSS
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/index.html
178 строк
9 KB
varsl
Добавление главной страницы сайта
21 дек 2025, 23:10
21 дек 2025, 23:10
0398ce4
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Зоопарк Дикий Мир - Главная</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="libs/all.min.css"> <link rel="stylesheet" href="libs/leaflet.css"> </head> <body> <div class="page-wrapper"> <header class="header"> <nav class="navbar container"> <div class="logo"> <i class="fas fa-paw"></i> <span>Зоопарк Дикий Мир</span> </div> <button class="menu-toggle" id="menuToggle"> <i class="fas fa-bars"></i> </button> <ul class="nav-menu" id="navMenu"> <li><a href="index.html" class="active"><i class="fas fa-home"></i> Главная</a></li> <li><a href="about.html"><i class="fas fa-info-circle"></i> О нас</a></li> <li><a href="animals.html"><i class="fas fa-dove"></i> Животные</a></li> <li><a href="catalog.html"><i class="fas fa-th-list"></i> Каталог</a></li> <li><a href="prices.html"><i class="fas fa-tag"></i> Цены</a></li> <li><a href="ticket.html"><i class="fas fa-ticket-alt"></i> Билеты</a></li> <li><a href="excursion.html"><i class="fas fa-calendar-alt"></i> Экскурсии</a></li> <li><a href="contacts.html"><i class="fas fa-address-book"></i> Контакты</a></li> <li><a href="map.html"><i class="fas fa-map-marked-alt"></i> Карта</a></li> <li class="auth-buttons"> <a href="login.html" class="btn btn-outline"><i class="fas fa-sign-in-alt"></i> Вход</a> <a href="register.html" class="btn btn-primary"><i class="fas fa-user-plus"></i> Регистрация</a> </li> </ul> </nav> </header> <main class="main-content"> <section class="hero"> <div class="hero-content container"> <h1 class="hero-title animate-fade-in">Откройте мир дикой природы</h1> <p class="hero-subtitle">Более 500 видов животных в естественной среде обитания</p> <div class="hero-buttons"> <a href="ticket.html" class="btn btn-primary btn-large pulse-animation"> <i class="fas fa-ticket-alt"></i> Купить билет онлайн </a> <a href="animals.html" class="btn btn-outline btn-large"> <i class="fas fa-binoculars"></i> Смотреть животных </a> </div> </div> </section> <section class="features-section"> <div class="container"> <h2 class="section-title">Почему выбирают нас</h2> <div class="features-grid"> <div class="feature-card hover-animation"> <div class="feature-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>Безопасность</h3> <p>Все вольеры соответствуют международным стандартам безопасности для животных и посетителей</p> </div> <div class="feature-card hover-animation"> <div class="feature-icon"> <i class="fas fa-heart"></i> </div> <h3>Забота о животных</h3> <p>Профессиональные ветеринары и зоологи обеспечивают круглосуточный уход</p> </div> <div class="feature-card hover-animation"> <div class="feature-icon"> <i class="fas fa-graduation-cap"></i> </div> <h3>Образовательные программы</h3> <p>Интерактивные экскурсии и мастер-классы для детей и взрослых</p> </div> <div class="feature-card hover-animation"> <div class="feature-icon"> <i class="fas fa-leaf"></i> </div> <h3>Сохранение природы</h3> <p>Участвуем в международных программах по сохранению исчезающих видов</p> </div> </div> </div> </section> <section class="animals-preview"> <div class="container"> <h2 class="section-title">Наши звезды</h2> <div class="slider-container"> <div class="slider" id="animalSlider"> <div class="slider-track"> <div class="slide"> <img src="assets/images/lion.jpg" alt="Лев" class="animal-img"> <div class="slide-content"> <h3>Лев Симба</h3> <p>Царь зверей, возраст 5 лет</p> <button class="btn btn-small play-sound" data-sound="lion"> <i class="fas fa-volume-up"></i> Послушать </button> </div> </div> <div class="slide"> <img src="assets/images/elephant.jpg" alt="Слон" class="animal-img"> <div class="slide-content"> <h3>Слон Джамбо</h3> <p>Вес 5 тонн, возраст 25 лет</p> <button class="btn btn-small play-sound" data-sound="elephant"> <i class="fas fa-volume-up"></i> Послушать </button> </div> </div> <div class="slide"> <img src="assets/images/panda.jpg" alt="Панда" class="animal-img"> <div class="slide-content"> <h3>Панда Бао Бао</h3> <p>Любит бамбук, возраст 3 года</p> <button class="btn btn-small play-sound" data-sound="panda"> <i class="fas fa-volume-up"></i> Послушать </button> </div> </div> </div> <button class="slider-btn prev-btn"> <i class="fas fa-chevron-left"></i> </button> <button class="slider-btn next-btn"> <i class="fas fa-chevron-right"></i> </button> </div> </div> </div> </section> <section class="cta-section"> <div class="container"> <h2 class="section-title">Готовы к приключениям?</h2> <p class="cta-text">Забронируйте посещение прямо сейчас и получите скидку 15% на первую экскурсию</p> <a href="excursion.html" class="btn btn-primary btn-large"> <i class="fas fa-calendar-check"></i> Записаться на экскурсию </a> </div> </section> </main> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>Зоопарк Дикий Мир</h3> <p>г. Москва, ул. Зоологическая, 123</p> <p>Ежедневно с 9:00 до 20:00</p> </div> <div class="footer-section"> <h3>Контакты</h3> <p><i class="fas fa-phone"></i> +7 (495) 123-45-67</p> <p><i class="fas fa-envelope"></i> info@wildzoo.ru</p> </div> </div> <div class="footer-bottom"> <p>© 2025 Зоопарк Дикий Мир. Все права защищены.</p> </div> </div> </footer> </div> <script src="js/main.js"></script> <script src="js/slider.js"></script> <script src="libs/leaflet.js"></script> <script src="js/auth-manager.js"></script> </body> </html>