/shri-16-css-task1

Primary LanguageHTML

Домашнее задание

Вёрстка журнальной статьи с использованием техник адаптивной верстки.

Совершенно необязательно верстать все секции статьи: техники верстки повторяются, поэтому важнее попробовать все техники, а не охватить весь объем статьи.

Основные техники, которые должны быть реализованы:

  • Каждая новая часть статьи в т.ч. первая начинается с изображения на всю ширину экрана, на 80% от высоты экрана и с текстом поверх картинки
  • Основной контент содержится в двух колонках, расположенных по центру:
    • Левая колонка содержит основной текст
    • Правая колонка содержит вспомогательную информацию: цитаты, некоторые фотографии, небольшие заметки
  • Левая колонка не должна быть шире 600px. При уменьшении ширины страницы колонка тоже уменьшается.
  • Правая колонка не должна быть шире 400px. При уменьшении ширины страницы колонка тоже уменьшается.
  • При уменьшении ширины экрана должны сохраняться отступы по бокам. На широких экранах по 40px, на узких — до 16px.
  • При уменьшении ширины экрана должен сохраняться отступ между колонками до 64px
  • При уменьшении ширины экрана необходимо изменить раскладку с двух колонок до одной колонки, состоящей из основного контента и "вкраплений" элементов из правой колонки. Ширину, при которой происходит такое изменение, предлагается выбрать самостоятельно.
  • Первая буква первого абзаца большая

Также приветствуется реализация дополнительных техник на более высокую оценку:

  • Адаптивные изображения:
    • Разное разрешение изображения в зависимости от DPI экрана
    • Разное обрезание изображений в зависимости от ширины экрана
  • При скролле первое изображение и изображения в начале секций не двигаются (по типу position: fixed).
  • Текст выровнен в колонку (justified), при этом пробелы между словами не меняются за счет переноса слов по слогам.
  • Адаптивная типографика: колонки могут быть шире 600px и 400px, но при этом число слов должно быть примерно таким же как и в базовом дизайне за счет изменения размера шрифта (он будет крупнее). Аналогично при уменьшении ширины: чем меньше экран, тем меньше текст. Естественно, все подгоняется с позиции удобства чтения.

На что можно ориентироваться:

Куда и когда присылать

  • Работы присылать на dndushkin@yandex-team.ru
    • Желательно ссылками на сверстанную страницу (например, разместить на бесплатном GitHub Pages с помощью gh-pages)
    • На крайний случай просто архивом
  • Тема: "ДЗ по CSS (фамилия и имя)"
  • Срок — до 7 июля