15 KiB
Заголовок раздела (section>h2)
Лабораторная работа №2. Вёрстка сеток (flexbox, grid, media-запросы)
Сверстайте страницу «Собрать ланч», где будет размещено меню компании. Сделайте страницу адаптивной для планшетов и мобильных устройств. Затем сделайте адаптивной главную страницу сайта.
Порядок выполнения
Примерный макет страницы «Собрать ланч» представлен ниже.
HTML
Обязательные элементы, которые должны быть на странице
(в скобках HTML-тэг, который нужно использовать):
- Шапка сайта с заголовком и блоком навигации (header)
- Блок с основным содержимым страницы (main)
- Блок с супами (section)
- Заголовок (h2)
- Блок с блюдами (div)
- Блок каждого блюда (div)
- Изображение (img)
- Текст с ценой (p)
- Текст с названием (p)
- Текст с весом/объемом (p)
- Кнопка «Добавить» (button)
- Блок каждого блюда (div)
- Блок с главными блюдами (такое же наполнение, как у блока с супами)
- Блок с напитками (такое же наполнение, как у блока с супами)
- Блок с супами (section)
- Футер с контактными данными (footer)
Подключите к текущей странице тот же Google-шрифт, который вы использовали на главной.
Добавьте перекрестные ссылки в навигационное меню обеих страниц.
CSS
Подключите к странице основные стили, которые вы использовали для главной страницы. Создайте дополнительный файл стилей для страницы «Собрать ланч».
Блок с блюдами (section>div)
Создайте сетку с помощью Grid:
- Кол-во колонок: 3
- Размер каждого столбца: 1fr
- Отступ между элементами сетки: 10px
Блок каждого блюда (section>div>div)
Создайте сетку с помощью Flex:
- Направление элементов в контейнере: вертикальное
- Нужно предусмотреть, чтобы в случае, если название одного из блюд длиннее, чем у других (и занимает две строки, например), выравнивание кнопок «Добавить» и значения веса/объёма блюда было на одном уровне для всех элементов строки (см. пример с главными блюдами в макете).
Другие стили:
- Внутренний отступ: 30px - снизу и сверху, 40px - справа и слева
- Радиус закругления: 35px
- Вид курсора: pointer
- Свойство для добавления тени filter: drop-shadow(17px 19px 24px rgba(0, 0, 0, 0.13))
- Цвет фона: белый
Поведение при наведении на блок с блюдом (hover):
- Появление сплошной границы толщиной 2px, цвет tomato вокруг блока
Также, при наведении на блок с блюдом должен изменяться цвет фона кнопки внутри блока (используйте контекстный селектор)._
На изображении ниже представлено как должны работать стили с hover:
Изображение (section>div>div>img)
- Растягивается на всю ширину контейнера
- Радиус закругления: 35px
Цена (section>div>div>p с ценой)
- Увеличить размер шрифта
Название блюда (section>div>div>p с названием)
- Увеличить размер шрифта
Вес/объем (section>div>div>p с весом/объемом)
- Изменить цвет текста на серый
Кнопка (section>div>div>button)
- Цвет фона #f1eee9
- Обязательный отступ сверх
- Внутренние отступы: 10px - снизу и сверху, 30px - справа и слева
- Радиус закругления: 10px
- Вид курсора: pointer
Изменение существующего меню (nav)
Текущее меню сверстано при помощи обычных ссылок. Чтобы было удобнее управлять сеткой меню, сделайте его флексбоксом
Также, добавьте для меню следующие свойства
- Отступ для флексов: 15px
- Разрешите флекс-элементам переноситься на новые строки
Теперь на сайте существует уже 2 страницы. Необходимо выделять активную с помощью стилей. Добавьте активной ссылке идентификатор active на обеих страницах и задайте для активной ссылки цвет текста tomato.
Вот как это должно выглядеть, если текущая страница «Собрать ланч»:
Доработка футера (footer)
Доработайте оформление главной страницы и страницы «Собрать ланч» таким образом, чтобы в случае, если контент страницы не занимает всю высоту области просмотра, положение футера было внизу страницы (области просмотра).
Адаптивность
Страница «Собрать ланч»
Измените стили блоков для ширины экрана ≤800px и ≤600px.
| ≤800px | ≤600px |
|---|---|
| Блок с блюдами (section>div) Кол-во колонок: 2 Навигационное меню (nav) Выравнивание флекс-элементов по основной оси (англ. main axis) таким образом, чтобы между элементами было одинаковое расстояние, а между первым и последним элементами и границей флекс-контейнера не было отступа. |
**Главный заголовок страницы (h1) **Выравнивание текста: по центру Навигационное меню (nav) Направление элементов в контейнере: вертикальное Выравнивание флекс-элементов по центру поперечной оси (англ. cross axis) Увеличить шрифт для ссылок на 4pxЗаголовок раздела (section>h2) Выравнивание текста: по центру Блок с блюдами (section>div) Кол-во колонок: 1 |
Главная страница
Для главной страницы также добавим стили для ширины ≤400px, чтобы таблица помещалась на странице без горизонтальной полосы прокрутки.
| ≤800px | ≤600px | ≤400px |
|---|---|---|
| Изображение в блоке «О нас» Ширина: 500px Навигационное меню (nav) Выравнивание флекс-элементов по основной оси (англ. main axis) таким образом, чтобы между элементами было одинаковое расстояние, а между первым и последним элементами и границей флекс-контейнера не было отступа. |
Главный заголовок страницы (h1) Выравнивание текста: по центру Навигационное меню (nav) Направление элементов в контейнере: вертикальное Выравнивание флекс-элементов по центру дополнительной/поперечной оси Увеличить шрифт для ссылок на 4px Изображение в блоке «О нас» Ширина: 100% Текст таблицы Уменьшить шрифт на 2px |
Текст таблицы Уменьшить шрифт еще на 2px |
Вы можете использовать дополнительные HTML-теги и CSS-свойства на свое усмотрение.
Требования
- Все HTML-теги из задания должны быть использованы.
- Код должен быть валиден (не должно быть ошибок в валидаторе https://validator.w3.org).
- Добавьте классы элементам (блок со всеми блюдами (section>div) и блок с каждым блюдом (section>div>div)).
- К странице должен быть подключен шрифт из Google Fonts.
- У страницы должно быть указано правильное значение viewpoint.
- С главной страницы можно перейти на страницу «Собрать ланч» с помощью навигационного меню.
- Со страницы «Собрать ланч» можно перейти на главную страницу с помощью навигационного меню.
- Все CSS-свойства из задания должны быть использованы.
- Используйте классы для стилизации элементов.
- Цвет ссылок должен изменяться при наведении (используйте :hover).
- Цвет активного пункта меню должен отличаться.
- Результат должен соответствовать макетам (количество блоков, структура их наполнения).
Цвета
Для выделения активных ссылок в меню, ссылок и секций при наведении используется цвет tomato. Но вы можете выбрать любой другой цвет.
Не используйте больше 1 цвета для оформления страницы (кроме белого, черного, оттенков серого).
Контент-сайта
Текст (название компании, название блюд)
- Вы можете использовать текст из макета или придумать свой. Но текст обязательно должен относиться к теме сайта и быть осмысленным (нельзя использовать Lorem ipsum).
Изображения
- Изображения с блюдами можно скачать по ссылке.
- Все изображения сгенерированы с помощью Mage AI. Вы можете сгенерировать собственные изображения (режим «Fast text to image» доступен бесплатно) или использовать другие изображения по собственному выбору.
- Используйте бесплатные изображения, например, с сайта Unsplash.
Материалы для изучения
HTML
CSS
Единицы измерения [Doka] Селектор по идентификатору [Doka] What is contextual selector in CSS? [GeeksforGeeks] border-radius [Doka] cursor [Doka] text-align [Doka]
Grid | CSS
Как создать сетки на CSS Grid Layout [HTML Academy] grid-template-columns [Doka] CSS Grid Layout [MDN] Шпаргалка по гридам [grid.malven] Гайд по grid [Doka]
Flex | CSS
Как создать сетку на странице. CSS-свойство flex [HTML Academy] flex-wrap [Doka] Flexbox [MDN] Интерактивная шпаргалка 1 [tpverstak] Интерактивная шпаргалка 2 [Codepen] Интерактивная шпаргалка 1 [flexbox.help] Гайд по flexbox [Doka] Полный гайд по flexbox [CSS-TRICKS] Игра для тренировки [flexboxfroggy]
Адаптивность | CSS
@media [Doka] Зачем нужен метатег viewport [HTML Academy] meta [Doka] Responsive Web Design - The Viewport [W3Schools]