В файле psd/ForexEdition.psd дан макет веб-страницы. Требуется воссоздать данную страницу с помощью CSS. Делать разметку не требуется. Задание состоит только в создании стилей к готовой разметке. Макет сохранён в формате для Adobe PhotoShop.
Можно воспользоваться пробной 30 дневной версией Adobe PhotoShop CC
Задание нужно выполнить в файле src/css/style.css. Он пустой. В нём требуется создать все необходимые стили для оформления HTML документа:
- использовать только классы и теги в селекторах из уже имеющихся в документе;
- не менять HTML;
- использовать заранее приготовленные графические ресурсы из папок src/images и src/gallery
- максимально соблюдать отступы и цвета как в макете
width, height, min-heigt, background, display, position, color, font, margin, padding, box-sizing, line-height, cursor, text-decoration, list-style, border-radius, text-align, border, white-space, vertical-align
- CSS селекторы
- Каскадирование и приоритетность стилей CSS
- Схлопывание внешних отступов (margin collapsing)
- Абсолютное позиционирование элементов
- Псевдо-элементы и Псевдо-селекторы
- Множественные фоны (CSS Multiple backgrounds)
- Вендорные префиксы
Правильный код должен получится примерно на 300 строк.
Превью выполненного задание можно посмотреть на скриншоте src/preview.png. Допускается, что получившийся результат может не на 100% соответствовать скриншоту.
В проект включён статический анализ кода. Подробности настройки окружения можно почитать в HELP.md. Но задание можно выполнить и без этого, имея только браузер и редактор кода.
- IE11+
- Chrome latest
- Firefox Latest
- Opera latest
- Safari 5+