frontend/about.html - master - varsl/HTML-CSS

frontend/about.html
514 строк20 KB
varsl
Добавление файлов фронтеда
21 дек 2025, 23:11
21 дек 2025, 23:117b4bf01
<!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">
    <style>
        .about-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/zoo-entrance.jpg');
            background-size: cover;
            background-position: center;
            color: var(--white);
            padding: 6rem 0;
            text-align: center;
        }

        .about-hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .about-hero p {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }

        .mission-section {
            padding: 5rem 0;
            background-color: var(--white);
        }

        .mission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            margin-top: 3rem;
        }

        .mission-card {
            text-align: center;
            padding: 2rem;
        }

        .mission-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: var(--white);
            font-size: 2rem;
        }

        .history-section {
            padding: 5rem 0;
            background-color: var(--bg-color);
        }

        .history-timeline {
            max-width: 800px;
            margin: 3rem auto 0;
            position: relative;
        }

        .history-timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: var(--primary-color);
        }

        .timeline-item {
            margin-bottom: 3rem;
            position: relative;
            width: 45%;
        }

        .timeline-item:nth-child(odd) {
            left: 0;
        }

        .timeline-item:nth-child(even) {
            left: 55%;
        }

        .timeline-year {
            position: absolute;
            top: 0;
            background: var(--primary-color);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            font-weight: bold;
        }

        .timeline-item:nth-child(odd) .timeline-year {
            right: -70px;
        }

        .timeline-item:nth-child(even) .timeline-year {
            left: -70px;
        }

        .timeline-content {
            background: var(--white);
            padding: 1.5rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            margin-top: 2.5rem;
        }

        .team-section {
            padding: 5rem 0;
            background-color: var(--white);
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .team-card {
            background: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .team-card:hover {
            transform: translateY(-10px);
        }

        .team-image {
            height: 250px;
            overflow: hidden;
        }

        .team-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .team-card:hover .team-image img {
            transform: scale(1.1);
        }

        .team-info {
            padding: 1.5rem;
            text-align: center;
        }

        .team-name {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .team-role {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .stats-section {
            padding: 5rem 0;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: var(--white);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .values-section {
            padding: 5rem 0;
            background-color: var(--bg-color);
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .value-card {
            background: var(--white);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            text-align: center;
        }

        .value-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 2.5rem;
            }

            .timeline-item {
                width: 90%;
                left: 5% !important;
                margin-bottom: 2rem;
            }

            .timeline-item:nth-child(odd) .timeline-year,
            .timeline-item:nth-child(even) .timeline-year {
                position: relative;
                left: 0 !important;
                right: auto !important;
                display: inline-block;
                margin-bottom: 0.5rem;
            }

            .history-timeline::before {
                left: 20px;
            }

            .stat-number {
                font-size: 2.5rem;
            }
        }
    </style>
</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"><i class="fas fa-home"></i> Главная</a></li>
                <li><a href="about.html" class="active"><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="about-hero">
            <div class="container">
                <h1>Зоопарк Дикий Мир</h1>
                <p>Более 100 лет сохраняем природу, изучаем животных и дарим радость встречи с дикой природой</p>
            </div>
        </section>

        <section class="mission-section">
            <div class="container">
                <h2 class="section-title">Наша миссия</h2>
                <p class="section-subtitle" style="text-align: center; max-width: 800px; margin: 0 auto 3rem;">
                    Мы стремимся сохранить биоразнообразие нашей планеты, создать комфортные условия для животных и вдохновить людей на заботу о природе через образование и непосредственный контакт с миром дикой природы.
                </p>

                <div class="mission-grid">
                    <div class="mission-card">
                        <div class="mission-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3>Сохранение видов</h3>
                        <p>Участвуем в международных программах по сохранению редких и исчезающих видов животных</p>
                    </div>

                    <div class="mission-card">
                        <div class="mission-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3>Образование</h3>
                        <p>Проводим образовательные программы для детей и взрослых, популяризируем зоологические знания</p>
                    </div>

                    <div class="mission-card">
                        <div class="mission-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3>Забота о животных</h3>
                        <p>Обеспечиваем высочайший уровень ветеринарной помощи и комфортные условия содержания</p>
                    </div>

                    <div class="mission-card">
                        <div class="mission-icon">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <h3>Экологичность</h3>
                        <p>Внедряем экологичные технологии и практики для минимизации воздействия на окружающую среду</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="history-section">
            <div class="container">
                <h2 class="section-title">Наша история</h2>

                <div class="history-timeline">
                    <div class="timeline-item">
                        <div class="timeline-year">1923</div>
                        <div class="timeline-content">
                            <h3>Основание зоопарка</h3>
                            <p>Зоопарк "Дикий Мир" был основан как небольшой зоосад при научно-исследовательском институте</p>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">1950</div>
                        <div class="timeline-content">
                            <h3>Расширение коллекции</h3>
                            <p>Коллекция животных превысила 100 видов, построены первые специализированные павильоны</p>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">1978</div>
                        <div class="timeline-content">
                            <h3>Новая территория</h3>
                            <p>Зоопарк переехал на новую, более просторную территорию площадью 50 гектаров</p>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2005</div>
                        <div class="timeline-content">
                            <h3>Современная реконструкция</h3>
                            <p>Завершена масштабная реконструкция с созданием природных ландшафтных вольеров</p>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2015</div>
                        <div class="timeline-content">
                            <h3>Международное признание</h3>
                            <p>Зоопарк получил аккредитацию Всемирной ассоциации зоопарков и аквариумов (WAZA)</p>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2023</div>
                        <div class="timeline-content">
                            <h3>100-летний юбилей</h3>
                            <p>Отпраздновали столетие зоопарка, открыли новый образовательный центр</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="stats-section">
            <div class="container">
                <h2 class="section-title" style="color: var(--white);">Зоопарк в цифрах</h2>

                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">Видов животных</div>
                    </div>

                    <div class="stat-item">
                        <div class="stat-number">50</div>
                        <div class="stat-label">Гектаров территории</div>
                    </div>

                    <div class="stat-item">
                        <div class="stat-number">15</div>
                        <div class="stat-label">Программ сохранения</div>
                    </div>

                    <div class="stat-item">
                        <div class="stat-number">300+</div>
                        <div class="stat-label">Сотрудников</div>
                    </div>

                    <div class="stat-item">
                        <div class="stat-number">1,000,000+</div>
                        <div class="stat-label">Посетителей в год</div>
                    </div>

                    <div class="stat-item">
                        <div class="stat-number">100+</div>
                        <div class="stat-label">Родившихся животных ежегодно</div>
                    </div>
                </div>
            </div>
        </section>


        <section class="values-section">
            <div class="container">
                <h2 class="section-title">Наши ценности</h2>

                <div class="values-grid">
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <h3>Уважение к природе</h3>
                        <p>Мы относимся к природе и животным с глубоким уважением и ответственностью</p>
                    </div>

                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <h3>Научный подход</h3>
                        <p>Все решения принимаются на основе научных исследований и лучших мировых практик</p>
                    </div>

                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3>Командная работа</h3>
                        <p>Мы верим в силу команды и совместной работы для достижения общих целей</p>
                    </div>

                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <h3>Высокое качество</h3>
                        <p>Стремимся к высочайшим стандартам во всех аспектах нашей деятельности</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="cta-section">
            <div class="container">
                <h2 class="section-title">Присоединяйтесь к нам</h2>
                <p class="cta-text">Посетите зоопарк и станьте частью нашего сообщества, заботящегося о природе</p>
                <div class="cta-buttons">
                    <a href="ticket.html" class="btn btn-primary btn-large">
                        <i class="fas fa-ticket-alt"></i> Купить билет
                    </a>
                    <a href="excursion.html" class="btn btn-outline btn-large">
                        <i class="fas fa-calendar-alt"></i> Записаться на экскурсию
                    </a>
                </div>
            </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>&copy; 2025 Зоопарк Дикий Мир. Все права защищены.</p>
            </div>
        </div>
    </footer>
</div>

<script src="js/main.js"></script>
<script src="js/auth-manager.js"></script>
</body>
</html>