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

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

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

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

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

Всё хорошо:

Всё плохо:

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

npm install
npm test

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

Задача

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

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

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

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

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

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

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

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

Ваша задача:

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

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

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