Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.
Задание необходимо решить без использования JS
Ваша задача на сегодня – сверстать главную страницу Яндекса (картинки кликабельны).
Требования:
- Использовать для разметки grid layout
- Как можно более точно соответствовать макету (изображения можно взять другие)
- В виджете «Автомобильные новости» контента много: там есть скролл с затенениями сверху и снизу
- Верстка должна соответствовать методологии BEM
Как вы могли заметить, анекдот в виджете «Лучшие анекдоты» не самый смешной, поэтому вам предлагается выбрать свои 5 любимых анекдотов и сделать так, чтобы по нажатию на кнопку «Показать еще», они менялись между собой.
Кроме того, кому-то могут быть вообще неинтересны анекдоты или, например, телепрограмма. Поэтому стоит дать пользователю возможность убирать ненужные виджеты.
При нажатии на «Настройка» появляется окно, в котором можно выбрать отображаемые виджеты:
Если снять галочку, то виджет должен пропасть со страницы:
Если все виджеты из колонки не отображаются, то правые колонки должны съехать левее:
Перед тем, как запускать приведенные ниже команды, необходимо установить зависимости с помощью команды
npm install
Запускаются так: npm run <command>
| Команда | Действие |
|---|---|
| lint | Проверка кода линтером |
| lint:html | Линтинг HTML |
| lint:css | Линтинг CSS |
| format | Форматирование кода |