Skip to content

Latest commit

 

History

History
69 lines (45 loc) · 4.68 KB

README.md

File metadata and controls

69 lines (45 loc) · 4.68 KB

Задача к лекции «Browser» – «Назад в будущее 2»

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

Мы очень хотим, чтобы код вы написали сами на чистом CSS и HTML,
а не пользовались внешними библиотеками или (пост|пре)процессорами.

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

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

Всё хорошо:
2015-10-08_1845

Всё плохо:
2015-10-08_1841

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

npm install
npm test

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

Задача

Благодаря вашим газетам Марти МакФлай из прошлого успешно адаптируется к настоящему. Пора ему открыть всю мощь интернета и безграничные возможности поисковых систем.

Чтобы не шокировать Марти, мы начнём подготавливать его постепенно, с самой первой версии Яндекса

По клику на изображение открывается старая вёрстка, но вам необходимо сверстать макет с использованием самых современных технологий, с которыми вы уже познакомились в предыдущих задачах: flex, анимации, трансформации, нестандартные шрифты

Дополнительные требования:

  • Верстка должна быть кроссбраузерна и работать в: Firefox, Chrome, Яндекс.Браузер, Opera и IE (последняя версия, которая у вас есть).
  • Позаботиться о браузере и обеспечить минимальную вложенность CSS селекторов и неизбыточную структуру в HTML

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

Дополнительное задание

Давайте, пойдём ещё дальше и наглядно покажем Марти как развивался Интернет.
Для этого мы подготовим вторую версию Яндекса.

Ваша задача:

  • Сверстать второй макет
  • Добавить переключатор между первой и второй версией
  • Сделать переключение плавным: первый макет плавно трансформируется во второй. Элемент переставляются, меняют размеры, размеры шрифтов

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

⚠️ При написании этого задания, ни один браузер не пострадал.