Skip to content

Mokoshka/verstka-tasks-3

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

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

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

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

Если всё хорошо:
2015-10-08_1845

Если всё плохо:
2015-10-08_1841

Проверить 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; /* Обратно отобразить строку таблицы */
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 88.6%
  • CSS 11.4%