https://pastein.ru/t/oVB
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLY Emirates — Сайт-визитка авиакомпании</title>
<style>
/* Базовая оптимизация CSS3 и кастомные переменные */
:root {
--primary-red: #D71921;
--dark-grey: #1f1f1f;
--light-bg: #f4f4f6;
--white: #ffffff;
--transition: all 0.3s ease;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light-bg);
color: var(--dark-grey);
line-height: 1.6;
}
/* Шапка страницы (Header) */
header {
position: sticky;
top: 0;
background-color: var(--white);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
}
.logo {
background-color: var(--primary-red);
color: var(--white);
padding: 10px 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: var(--transition);
}
nav ul {
display: flex;
list-style: none;
gap: 25px;
}
nav ul li a {
text-decoration: none;
color: var(--dark-grey);
font-weight: 600;
transition: var(--transition);
}
nav ul li a:hover {
color: var(--primary-red);
}
/* Главный имиджевый блок (Hero) */
.hero {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1540962351504-03099e0a754b?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--white);
text-align: center;
padding: 0 20px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
}
/* Интерактивный поисковый модуль */
.search-container {
max-width: 900px;
margin: -50px auto 50px auto;
background: var(--white);
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
position: relative;
z-index: 10;
}
.search-tabs {
display: flex;
gap: 15px;
margin-bottom: 20px;
border-bottom: 2px solid var(--light-bg);
padding-bottom: 10px;
}
.tab {
font-weight: bold;
color: var(--dark-grey);
cursor: pointer;
padding: 5px 10px;
border-bottom: 3px solid transparent;
transition: var(--transition);
}
.tab.active {
color: var(--primary-red);
border-bottom-color: var(--primary-red);
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-size: 0.85rem;
font-weight: bold;
margin-bottom: 5px;
color: #666;
}
.form-group input, .form-group select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 1rem;
}
.btn-search {
background-color: var(--primary-red);
color: var(--white);
border: none;
padding: 12px 30px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: var(--transition);
width: 100%;
}
.btn-search:hover {
background-color: #b51218;
}
/* Секция "О нас" */
.about-section {
max-width: 1100px;
margin: 0 auto 60px auto;
padding: 0 20px;
text-align: center;
}
.about-section h2 {
margin-bottom: 20px;
font-size: 2rem;
color: var(--dark-grey);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: var(--white);
padding: 25px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.feature-card h3 {
color: var(--primary-red);
margin-bottom: 10px;
}
/* Подвал (Footer) */
footer {
background-color: var(--dark-grey);
color: #ccc;
padding: 40px 5% 20px 5%;
font-size: 0.9rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
border-bottom: 1px solid #333;
padding-bottom: 30px;
margin-bottom: 20px;
}
.footer-col h4 {
color: var(--white);
margin-bottom: 15px;
text-transform: uppercase;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
color: #aaa;
text-decoration: none;
transition: var(--transition);
}
.footer-col ul li a:hover {
color: var(--white);
}
.footer-bottom {
text-align: center;
color: #666;
}
</style>
</head>
<body>
<!-- Шапка сайта -->
<header>
<a href="#" class="logo">Emirates</a>
<nav>
<ul>
<li><a href="#">Бронирование</a></li>
<li><a href="#">Управление</a></li>
<li><a href="#">Опыт полета</a></li>
<li><a href="#">Карьера</a></li>
</ul>
</nav>
</header>
<!-- Главный баннер -->
<section class="hero">
<h1>Летайте лучше</h1>
<p>Откройте для себя новые стандарты комфорта и безопасности на рейсах FLY Emirates по всему миру.</p>
</section>
<!-- Интерактивный модуль псевдо-бронирования -->
<section class="search-container">
<div class="search-tabs">
<div class="tab active" onclick="alert('Модуль поиска рейсов активен!')">Поиск рейсов</div>
<div class="tab" onclick="alert('Введите 6-значный код PNR для проверки статуса брони.')">Управление бронированием</div>
</div>
<form onsubmit="event.preventDefault(); alert('Поиск рейсов временно недоступен. Ведутся технические работы на сервере.');">
<div class="form-grid">
<div class="form-group">
<label for="from">Пункт отправления</label>
<input type="text" id="from" placeholder="Город или аэропорт" required>
</div>
<div class="form-group">
<label for="to">Пункт назначения</label>
<input type="text" id="to" placeholder="Куда летим?" required>
</div>
<div class="form-group">
<label for="date">Дата вылета</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label for="class">Класс обслуживания</label>
<select id="class">
<option>Эконом-класс</option>
<option>Бизнес-класс</option>
<option>Первый класс</option>
</select>
</div>
</div>
<button type="submit" class="btn-search">Найти рейсы</button>
</form>
</section>
<!-- Описание преимуществ визитки -->
<section class="about-section">
<h2>Премиальный сервис на борту</h2>
<p>Мы превращаем каждый полет в незабываемое путешествие, предлагая непревзойденный уровень обслуживания.</p>
<div class="features-grid">
<div class="feature-card">
<h3>Мировые направления</h3>
<p>Маршрутная сеть FLY Emirates охватывает сотни городов на шести континентах.</p>
</div>
<div class="feature-card">
<h3>Максимальный комфорт</h3>
<p>Эргономичные кресла, персональные экраны мультимедиа и изысканное бортовое меню.</p>
</div>
<div class="feature-card">
<h3>Лучший экипаж</h3>
<p>Высококвалифицированная международная команда бортпроводников готова помочь в любой ситуации.</p>
</div>
</div>
</section>
<!-- Подвал сайта -->
<footer>
<div class="footer-grid">
<div class="footer-col">
<h4>О компании</h4>
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Награды и достижения</a></li>
<li><a href="#">Пресс-центр</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Услуги</h4>
<ul>
<li><a href="#">Классы обслуживания</a></li>
<li><a href="#">Регистрация на рейс</a></li>
<li><a href="#">Багаж</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Контакты</h4>
<ul>
<li><a href="#">Служба поддержки</a></li>
<li><a href="#">Адреса офисов</a></li>
<li><a href="#">Карта сайта</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Разработано в рамках учебной практики по программированию.</p>
</div>
</footer>
</body>
</html>
