Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Fly Emirates - Бронирование</title>
    <style>
        body { margin: 0; font-family: 'Arial', sans-serif; background-color: #f4f4f4; }
        
        /* Шапка в стиле Emirates */
        header { 
            background-color: #D71921; /* Фирменный красный */
            height: 70px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            color: white;
            position: relative;
        }

        .logo { position: absolute; left: 20px; font-weight: bold; font-size: 24px; }

        /* Навигация */
        nav { margin: 0 auto; display: flex; gap: 30px; }
        nav a { color: white; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 14px; }
        nav a:hover { color: #FFCC70; } /* Золотистый при наведении */

        /* Слайдер / Главный баннер */
        .hero { 
            background-image: url('assets/img/hero-plane.jpg'); /* Сюда фото самолета */
            background-color: #333;
            height: 400px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
        }

        .hero h1 { font-size: 48px; text-transform: uppercase; }

        /* Контейнер для услуг/направлений */
        .container { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
        .section-title { text-align: center; color: #333; font-size: 28px; margin-bottom: 30px; }

        /* Сетка направлений */
        .destinations { display: flex; justify-content: space-between; gap: 20px; }
        .card { 
            background: white; 
            flex: 1; 
            border-bottom: 4px solid #D71921; 
            padding-bottom: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .card img { width: 100%; height: 150px; object-fit: cover; }
        .card h3 { padding: 10px; margin: 0; font-size: 18px; text-align: center; }
        .card p { padding: 0 10px; font-size: 14px; color: #666; }
        .btn-book { 
            display: block; 
            width: 80%; 
            margin: 10px auto; 
            background: #D71921; 
            color: white; 
            text-align: center; 
            padding: 10px; 
            text-decoration: none;
            font-weight: bold;
        }
        .btn-book:hover { background: #b0141a; }

        footer { background: #333; color: #ccc; text-align: center; padding: 20px; margin-top: 40px; font-size: 12px; }
    </style>
</head>
<body>

    <header>
        <div class="logo">Emirates</div>
        <nav>
            <a href="#">Бронирование</a>
            <a href="#">Услуги</a>
            <a href="#">Направления</a>
            <a href="#">Помощь</a>
        </nav>
    </header>

    <div class="hero">
        <h1>Летайте лучше</h1>
    </div>

    <div class="container">
        <h2 class="section-title">Популярные направления</h2>
        
        <div class="destinations">
            <div class="card">
                <img src="assets/img/dubai.jpg" alt="Дубай">
                <h3>Дубай</h3>
                <p>Откройте для себя город будущего с комфортом Emirates.</p>
                <a href="#" class="btn-book">Бронировать</a>
            </div>

            <div class="card">
                <img src="assets/img/london.jpg" alt="Лондон">
                <h3>Лондон</h3>
                <p>Ежедневные рейсы в самое сердце Великобритании.</p>
                <a href="#" class="btn-book">Бронировать</a>
            </div>

            <div class="card">
                <img src="assets/img/tokyo.jpg" alt="Токио">
                <h3>Токио</h3>
                <p>Погрузитесь в культуру Японии с нашим лучшим сервисом.</p>
                <a href="#" class="btn-book">Бронировать</a>
            </div>
        </div>
    </div>

    <footer>
        &copy; 2026 Группа компаний Emirates. Все права защищены.
    </footer>

</body>
</html>