/verstka-tasks-10

Задача к лекции «Цвета и графика» – «Письмо из Яндекса»

Primary LanguageHTML

Задача к лекции «Цвета и графика» – «Письмо из Яндекса»

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

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

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

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

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

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

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

npm install
npm test

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

Задача

Сегодня утром я ходил к своей бабуленьке на чаепитие с печенюхами и по пути решил проверить ее почту. Одно из писем было из Яндекса, что меня очень удивило. Внутри находился QR-код, а по ссылке – макет, и я тут же понял что к чему.

Моей радости не было предела, что заметила бабуленька и рассказала мне интереснейшую историю и по совместительству наиприятнейшую новость. Почти месяц назад она рассказала свой старой подруге про то, что ее внучок хорошо справляется с комплюктером. Оказалось, внучок ее подруги работает в Яндексе, и он, крайне возможно, пришлет задание, чтобы узнать, чего я стою на поприще верстальщика. И вот это письмо с заданием пришло спустя почти месяц (спасибо почте).

Необходимо сверстать предоставленный макет, соблюдая следующие условия:

  • Страница находится посередние экрана и имеет фиксированную ширину
  • Персонажей и ссылки на социальные сети нужно реализовать спрайтами, причем, спрайт с иконками социальных сетей придется превратить в base64
  • Фон всей страницы меняется в зависимости от выбранного персонажа. А еще под этим персонажем появляется текст
  • Все картинки должны быть подходящих форматов. Главное – не забыть об оптимизации

Я волнуюсь за результат, очень нужна ваша помощь.

Необязательное задание (+12 к скорости работы почты сами знаете какой страны)

Хотелось бы показать, что мы знаем еще кое-какие технологии. Поэтому будет грандиозно желательно реализовать логотип со стрелочкой вверху страницы, иконку видео и белый круг с буквой «Я» с помощью svg.