vasiliikuznecov/verstka-tasks-3

Задача к лекции «CSS» – «Лет ми спик фром май харт»

🆘 Как создать Pull Request
⚠️ Codestyle для HTML
⚠️ Codestyle для CSS
⚠️ При создании PullRequest'а не забудьте указать ваши имя и фамилию.

Общие требования

Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.

Прежде чем отправлять решение, проверьте его на соответствие требованиям к HTML коду
и требованиям к CSS.

Когда вы создадите или обновите пулл-реквест, он частично будет проверен автоматически. Результаты вы увидите внизу:

Если всё хорошо:

Если всё плохо:

Проверить HTML можно и вручную:

# Устанавливаем проверяльщик
npm install

# Проверяем
npm test

# В результате выведутся ошибки, если они есть.
# Если какие-либо ошибки будут не понятны – смело спрашиваем у ментора.

В помощь вам мы разместили файл .editorconfig. Этот файл содержит базовые правила оформления кода (codestyle), понятные для большинства редакторов. Прочитайте о нём подробнее.

Задача

Сборная России по футболу вышла в финальную часть Чемпионата Мира по футболу 2050 года. Тренер сборной, Леонид Викторович Слуцкий, собирая чемодан за день до отъезда, не может вспомнить ни во сколько его рейс, ни в какой стране на этот раз проходит чемпионат мира. Поэтому Леонид Викторович идёт на сайт аэропорта Шереметьево.

Разработчики сайта позаботились о том, чтобы пришедший пассажир максимально удобно и быстро находил нужные данные. Для этого в табло аэропорта представлен максимум данных о рейсах:

• тип рейса (вылет/прилёт; например, это может быть и иконка);
• номер рейса;
• авиакомпания;
• логотип авиакомпании;
• тип воздушного судна;
• аэропорт назначения;
• плановое время вылета или прилёта;
• номер терминала;
• статус рейса
  • для вылетающих: регистрация, ожидание посадки, посадка закончена, вылетел;
  • для прилетающих: по расписанию, летит, приземлился;
  • для всех: задерживается до HH:MM, отменён;

Число отображаемых рейсов: 15.

По наведению курсора на определённое место в табло контрастным цветом выделяются соответствующие строка и столбец; Нечётные строки табло темнее чётных;

Под расписанием есть форма, которую и ищет Леонид Викторович в ней два поля для ввода телефона и электронной почты и когда введённые в них значения валидны, то появляется кнопка «Отправить данные о рейсе на телефон».

⚠️ Задание необходимо решить без использования JS

Необязательное задание (+2 к вашей мудрости, +3 к игре сборной России)

Будет здорово, если сверху будут переключатели, позволяющие отфильтровать рейсы по отправлению/прибытию или по номеру терминала;

И совсем замечательно, если вы сделаете поиск по городу отправления, в файле index.html есть специальное поле ввода для этого.

⚠️ Дополнительное задание необходимо решить без использования JS

Подсказки

Вот CSS-свойства, о которых мы не рассказали, но они вам понадобятся для решения данной задачи:

.selector {
    color: <цвет>; /* Цвет текста */
    background: <цвет>; /* Цвет подложки */
    display: none; /* Элемент (например, строка таблицы) не будет отображаться */
    display: table-row; /* Обратно отобразить строку таблицы */
}