frosthamster / markup-task-7

Задача «Морда»

Задача «Морда»

Перед выполнением задания внимательно прочитайте:

• О всех этапах проверки задания
• Как отправить пулл
• Как пройти тесты
• Правила оформления JavaScript, HTML и CSS кода

Основное задание

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

Ваша задача на сегодня – сверстать главную страницу Яндекса (картинки кликабельны).

Требования:

• Использовать для разметки grid layout
• Как можно более точно соответствовать макету (изображения можно взять другие)
• В виджете «Автомобильные новости» контента много: там есть скролл с затенениями сверху и снизу
• Верстка должна соответствовать методологии BEM

Дополнительное задание (+ 10 * Math.random() к упорству)

Как вы могли заметить, анекдот в виджете «Лучшие анекдоты» не самый смешной, поэтому вам предлагается выбрать свои 5 любимых анекдотов и сделать так, чтобы по нажатию на кнопку «Показать еще», они менялись между собой.

Кроме того, кому-то могут быть вообще неинтересны анекдоты или, например, телепрограмма. Поэтому стоит дать пользователю возможность убирать ненужные виджеты.

При нажатии на «Настройка» появляется окно, в котором можно выбрать отображаемые виджеты:

Если снять галочку, то виджет должен пропасть со страницы:

Если все виджеты из колонки не отображаются, то правые колонки должны съехать левее: