web-tech/labs/lab-02/other/Задание - Лабораторная работа 2.md

**Заголовок раздела (section>h2)**
# Лабораторная работа №2. Вёрстка сеток (flexbox, grid, media-запросы)

---
Сверстайте страницу «Собрать ланч», где будет размещено меню компании. Сделайте страницу адаптивной для планшетов и мобильных устройств. Затем сделайте адаптивной главную страницу сайта.

## Порядок выполнения
Примерный макет страницы «Собрать ланч» представлен ниже.
### HTML

**Обязательные элементы**, которые должны быть на странице  
(в скобках HTML-тэг, который нужно использовать):
- Шапка сайта с заголовком и блоком навигации (header)
- Блок с основным содержимым страницы (main)
	- Блок с супами (section)
		- Заголовок (h2)
		- Блок с блюдами (div)
			- Блок каждого блюда (div)
				- Изображение (img)
				* Текст с ценой (p)
				- Текст с названием (p)
				- Текст с весом/объемом (p)
				- Кнопка «Добавить» (button)
		- Блок с главными блюдами (такое же наполнение, как у блока с супами)
		- Блок с напитками (такое же наполнение, как у блока с супами)
- Футер с контактными данными (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 вокруг блока

Также, при наведении на блок с блюдом должен изменяться цвет фона кнопки внутри блока (используйте [контекстный селектор](https://www.geeksforgeeks.org/what-is-contextual-selector-in-css/))._  
На изображении ниже представлено как должны работать стили с 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)**  <br>Кол-во колонок: 2  <br>**Навигационное меню (nav)**  <br>Выравнивание флекс-элементов по основной оси (англ. main axis) таким образом, чтобы между элементами было одинаковое расстояние, а между первым и последним элементами и границей флекс-контейнера не было отступа.|**Главный заголовок страницы (h1)  <br>**Выравнивание текста: по центру  <br>**Навигационное меню (nav)  <br>**Направление элементов в контейнере: вертикальное  <br>Выравнивание флекс-элементов по центру поперечной оси (англ. cross axis)  <br>Увеличить шрифт для ссылок на 4px**Заголовок раздела (section>h2)**  <br>Выравнивание текста: по центру  <br>**Блок с блюдами (section>div)**  <br>Кол-во колонок: 1|

**Главная страница**  
Для главной страницы также добавим стили для ширины ≤400px, чтобы таблица помещалась на странице без горизонтальной полосы прокрутки.

|≤800px|≤600px|≤400px|
|---|---|---|
|**Изображение в блоке «О нас»**  <br>Ширина: 500px  <br>**Навигационное меню (nav)**  <br>Выравнивание флекс-элементов по основной оси (англ. main axis) таким образом, чтобы между элементами было одинаковое расстояние, а между первым и последним элементами и границей флекс-контейнера не было отступа.|**Главный заголовок страницы (h1)**  <br>Выравнивание текста: по центру  <br>**Навигационное меню (nav)**  <br>Направление элементов в контейнере: вертикальное  <br>Выравнивание флекс-элементов по центру дополнительной/поперечной оси  <br>Увеличить шрифт для ссылок на 4px  <br>**Изображение в блоке «О нас»**  <br>Ширина: 100%  <br>**Текст таблицы**  <br>Уменьшить шрифт на 2px|**Текст таблицы**  <br>Уменьшить шрифт еще на 2px|

Вы можете использовать дополнительные HTML-теги и CSS-свойства на свое усмотрение.

### Требования

- Все HTML-теги из задания должны быть использованы.
- Код должен быть валиден (не должно быть ошибок в валидаторе [https://validator.w3.org](https://validator.w3.org/)).
- Добавьте классы элементам (блок со всеми блюдами (section>div) и блок с каждым блюдом (section>div>div)).
- К странице должен быть подключен шрифт из Google Fonts.
- У страницы должно быть указано правильное значение viewpoint.
- С главной страницы можно перейти на страницу «Собрать ланч» с помощью навигационного меню.
- Со страницы «Собрать ланч» можно перейти на главную страницу с помощью навигационного меню.
- Все CSS-свойства из задания должны быть использованы.
- Используйте классы для стилизации элементов.
- Цвет ссылок должен изменяться при наведении (используйте :hover).
- Цвет активного пункта меню должен отличаться.
- Результат должен соответствовать макетам (количество блоков, структура их наполнения).

#### Цвета
Для выделения активных ссылок в меню, ссылок и секций при наведении используется цвет tomato. Но вы можете выбрать любой другой цвет.  
Не используйте больше 1 цвета для оформления страницы (кроме белого, черного, оттенков серого).

#### Контент-сайта

**Текст (название компании, название блюд)**
- Вы можете использовать текст из макета или придумать свой. Но текст обязательно должен относиться к теме сайта и быть осмысленным (нельзя использовать Lorem ipsum).

**Изображения**
- Изображения с блюдами можно скачать по [ссылке](https://lms.mospolytech.ru/pluginfile.php/1314114/mod_assign/intro/menu.zip).
- Все изображения сгенерированы с помощью [Mage AI](https://www.mage.space/build). Вы можете сгенерировать собственные изображения (режим «Fast text to image» доступен бесплатно) или использовать другие изображения по собственному выбору.
- Используйте бесплатные изображения, например, с сайта [Unsplash](https://unsplash.com/).

### Материалы для изучения

#### HTML
[section [Doka]](https://doka.guide/html/section/) [button [Doka]](https://doka.guide/html/button/)
#### CSS
[Единицы измерения [Doka]](https://doka.guide/css/numeric-types/) [Селектор по идентификатору [Doka]](https://doka.guide/css/id-selector/) [What is contextual selector in CSS? [GeeksforGeeks]](https://www.geeksforgeeks.org/what-is-contextual-selector-in-css/) [border-radius [Doka]](https://doka.guide/css/border-radius/) [cursor [Doka]](https://doka.guide/css/cursor/) [text-align [Doka]](https://doka.guide/css/text-align/)
#### Grid | CSS
[Как создать сетки на CSS Grid Layout [HTML Academy]](https://htmlacademy.ru/blog/css/display-grid) [grid-template-columns [Doka]](https://doka.guide/css/grid-template-columns/) [CSS Grid Layout [MDN]](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout) [Шпаргалка по гридам [grid.malven]](https://grid.malven.co/) [Гайд по grid [Doka]](https://doka.guide/css/grid-guide/)
#### Flex | CSS
[Как создать сетку на странице. CSS-свойство flex [HTML Academy]](https://htmlacademy.ru/blog/css/css-flex) [flex-wrap [Doka]](https://doka.guide/css/flex-wrap/) [Flexbox [MDN]](https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox) [Интерактивная шпаргалка 1 [tpverstak]](https://tpverstak.ru/flex-cheatsheet/) [Интерактивная шпаргалка 2 [Codepen]](https://codepen.io/enxaneta/full/adLPwv) [Интерактивная шпаргалка 1 [flexbox.help]](https://flexbox.help/) [Гайд по flexbox [Doka]](https://doka.guide/css/flexbox-guide/) [Полный гайд по flexbox [CSS-TRICKS]](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [Игра для тренировки [flexboxfroggy]](https://flexboxfroggy.com/#ru)
#### Адаптивность | CSS
[@media [Doka]](https://doka.guide/css/media/) [Зачем нужен метатег viewport [HTML Academy]](https://htmlacademy.ru/blog/html/viewport) [meta [Doka]](https://doka.guide/css/media/) [Responsive Web Design - The Viewport [W3Schools]](https://www.w3schools.com/css/css_rwd_viewport.asp)