макет

Страница должна быть разделена на такие части:

• header - заголовок. Расположен вверху страницы.
• main - основной контент. Расположен под header и слева от aside.
• aside - боковая панель. Расположена под header и справа от main.
• footer - подвал страницы. Расположен внизу под header и aside.

При небольших - элементы должны выстраиваться друг за другом и сверху вниз в таком порядке: header, aside, main, aside, footer. Почему aside указан дважды - смотри в разделе aside.

Ширина контента всей страницы должна быть максимум 1200px. Это значит, что контент header, контент footer, контент main, контент aside (либо main+aside, т.е. когда они рядом) не должны выходить за рамки 1200px.

Header

Header содержит:

• Логотип высотой минимум 100px и прижатый к левому краю.
• Основное меню (home, about, contact us), прижатое к правому краю.
• Блок социальных иконок (facebook, instagram, twitter, etc.) и иконка поиска. Данный блок находится выше основного меню и также прижат к правому краю. Между иконкой поиска и социальными иконками должен быть небольшой отступ. Иконка поиска находится слева от социальных иконок.

Header должен быть отзывчивым к различным разрешениям экрана. На небольших разрешениях основное меню должно переходить в состояние гамбургер меню (google search: hamburger menu css). При открытии меню, оно должно появляться слева шторкой поверх всего контента и во всю его высоту.

Также, на небольших разрешениях элементы должны менять размещение и порядок, а именно:

1. Гамбургер меню, прижатое к левому краю, и на том же уровне иконка поиска, но прижатая к правому краю.
2. Логотип в центре, под гамбургер меню и иконкой поиска.
3. Социальные иконки скрыть.

Main

Main содержит список статей в виде карточек с краткой информацией (фото, заголовок, время публикации, краткое описание, рейтинг, количество комментариев).

Карточки должны располагаться слева направо и сверху вниз. Количество карточек в одном ряду не фиксировано и зависит от свободного пространства. Ширина карточки должна быть резиновой, но в пределах минимальных/максимальных значений, чтобы они могли переноситься с одного ряда на другой при изменении ширины окна браузера. Ширина карточек должна быть одинаковой. Расположение карточек должно быть растянуто по ширине контейнера, т.е. крайние карточки слева и справа должны прижиматься к левому и правому краям контейнера соответственно. Расстояние между карточками обязательно должно быть статическим (фиксированным). При наведении на карточку (на всю карточку) необходимо, чтобы у фото был эффект приближения (зумирование), но так, чтобы ширина и высота фото оставались неизменными.

Aside

Aside содержит следующие блоки, расположенные друг за другом:

• Блок информации об авторе (фото, имя, краткое описание).
• Блок социальных иконок (как в header, только без иконки поиска).
• Блок subscribe (Поле для ввода имени, поле для ввода email, кнопка subscribe). Элементы должны быть друг под другом во всю ширину блока.
• Блок поиска (Поле для ввода слева и кнопка Search справа). Элементы должны быть в один ряд.
• Блок тегов/облако тегов - популярные или частые слова в статьях или при поиске. Теги следуют слева направо и сверху вниз, контент блока тегов отцентрирован. Не нужно ставить символ решетки (#) перед каждым тегом.
• Блок последних комментариев. Комментарий состоит из фото автора, его имени и самого комментария (текста). Фото должно находиться слева, а имя и текст - справа, друг под другом. Текст комментария должен быть в одну строку без переносов. А если он не помещается, то он должен обрезаться и заканчиваться тремя точками.

Важно: на небольших разрешениях блоки aside должны быть распределены. В данном случае необходимо отобразить блок информации об авторе выше main. А все остальные блоки переместить под main.

Footer

Здесь необходимо разместить логотип, дополнительные контактные данные, copyrights. Расположение на твое усмотрение.

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

1. Запрещено использовать любые библиотеки и фреймворки. (Исключение: библиотеки для иконок).
2. По желанию можно использовать любой препроцессор.
3. Страница должна быть отзывчивой/адаптивной.
4. Страница должна быть user-friendly. Её необходимо оживить - добавить эффекты, анимацию, подобрать приятные и сочетающиеся цвета. Но в пределах разумного, главное не переусердствовать.
5. Палитра цветов на твое усмотрение, конечно же. Но, пожалуйста, без ядовитости и грязи. Спасибо!
6. Можно использовать любые последние поддерживаемые возможности CSS. Поддержка IE не нужна.
7. Запрещено использовать любой язык программирования. Только чистый HTML/CSS.

Что учитывается при оценивании

• Разметка: структура, чистота, валидность.
• Стили: использование селекторов (типы, вложенность, именование классов), чистота, организация в файле/файлах.
• Оформление страницы: выравнивание, отзывчивость/адаптивность, общее впечатление.

Куда выкладывать

GitHub + GitHub page.

Полезные ссылки

• A Complete Guide to Grid
• A Complete Guide to Flexbox
• Hamburgers
• Hamburger menu example
• The Difference Between Responsive and Adaptive Design
• Сolor schemes generator
• Color Palettes
• Lecture presentation

p.s. По любым вопросам не стесняйся писать в slack в личку. Также можешь маякнуть, когда выполнишь домашку.