LAB-02

2026-06-15 11:01:08 +03:00 · 2025-11-15 10:50:14 +03:00 · 2025-11-15 10:50:14 +03:00 · 076e400670
commit 076e400670
parent a4454ffcfe
24 changed files with 747 additions and 0 deletions
--- a/labs/lab-02/img/drinks/berry-juice.jpg
+++ b/labs/lab-02/img/drinks/berry-juice.jpg
--- a/labs/lab-02/img/drinks/ginger-lemonade.jpg
+++ b/labs/lab-02/img/drinks/ginger-lemonade.jpg
--- a/labs/lab-02/img/drinks/mango-smoothie.jpg
+++ b/labs/lab-02/img/drinks/mango-smoothie.jpg
--- a/labs/lab-02/img/drinks/orange-juice.jpg
+++ b/labs/lab-02/img/drinks/orange-juice.jpg
--- a/labs/lab-02/img/drinks/spinach-smoothie.jpg
+++ b/labs/lab-02/img/drinks/spinach-smoothie.jpg
--- a/labs/lab-02/img/drinks/water.jpg
+++ b/labs/lab-02/img/drinks/water.jpg
--- a/labs/lab-02/img/main-dishes/beef-salad.jpg
+++ b/labs/lab-02/img/main-dishes/beef-salad.jpg
--- a/labs/lab-02/img/main-dishes/grilled-chicken-vegetables.jpg
+++ b/labs/lab-02/img/main-dishes/grilled-chicken-vegetables.jpg
--- a/labs/lab-02/img/main-dishes/salmon-quinoa-avocado.jpg
+++ b/labs/lab-02/img/main-dishes/salmon-quinoa-avocado.jpg
--- a/labs/lab-02/img/main-dishes/seafood-pasta.jpg
+++ b/labs/lab-02/img/main-dishes/seafood-pasta.jpg
--- a/labs/lab-02/img/main-dishes/teriyaki-chicken-noodles.jpg
+++ b/labs/lab-02/img/main-dishes/teriyaki-chicken-noodles.jpg
--- a/labs/lab-02/img/main-dishes/vegan-bowl-chickpeas.jpg
+++ b/labs/lab-02/img/main-dishes/vegan-bowl-chickpeas.jpg
--- a/labs/lab-02/img/main.jpg
+++ b/labs/lab-02/img/main.jpg
--- a/labs/lab-02/img/soup/beet-soup.jpg
+++ b/labs/lab-02/img/soup/beet-soup.jpg
--- a/labs/lab-02/img/soup/chicken-noodle-soup.jpg
+++ b/labs/lab-02/img/soup/chicken-noodle-soup.jpg
--- a/labs/lab-02/img/soup/minestrone-soup.jpg
+++ b/labs/lab-02/img/soup/minestrone-soup.jpg
--- a/labs/lab-02/img/soup/mushroom-soup.jpg
+++ b/labs/lab-02/img/soup/mushroom-soup.jpg
--- a/labs/lab-02/img/soup/pumpkin-soup.jpg
+++ b/labs/lab-02/img/soup/pumpkin-soup.jpg
--- a/labs/lab-02/img/soup/tomato-soup.jpg
+++ b/labs/lab-02/img/soup/tomato-soup.jpg
--- a/labs/lab-02/index.html
+++ b/labs/lab-02/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="https://deev.space/media/favicon.ico" type="image/x-icon">
+    <title>ЭкоЛанч - Доставка здоровых бизнес-ланчей в Москве</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>ЭкоЛанч</h1>
+        <nav>
+            <a href="index.html" id="active">Главная</a>
+            <a href="menu.html">Собрать ланч</a>
+            <a href="delivery.html">Доставка</a>
+            <a href="about.html">О нас</a>
+            <a href="#contacts">Контакты</a>
+        </nav>
+    </header>
+
+    <main>
+        <section class="about-company">
+            <h2>О компании ЭкоЛанч</h2>
+            <img src="img/main.jpg" alt="Здоровая еда в контейнерах">
+            <p>ЭкоЛанч - это современная компания по доставке здоровых бизнес-ланчей в офисы Москвы. Наша миссия - сделать правильное питание доступным для занятых людей, которые ценят свое время и здоровье.</p>
+            <p>Мы используем только свежие продукты от проверенных поставщиков, а наши повара готовят блюда каждое утро. Все ланчи упакованы в экологичную биоразлагаемую упаковку, потому что мы заботимся не только о вашем здоровье, но и о здоровье нашей планеты.</p>
+        </section>
+
+        <section class="advantages">
+            <h2>Наши преимущества</h2>
+            <ul>
+                <li>Быстрая доставка в течение 60 минут по всей Москве в пределах МКАД</li>
+                <li>Свежие блюда, приготовленные утром из качественных продуктов</li>
+                <li>Сбалансированное меню, разработанное профессиональными диетологами</li>
+                <li>Экологичная упаковка, безопасная для окружающей среды</li>
+                <li>Гибкая система скидок для корпоративных клиентов и постоянных заказчиков</li>
+            </ul>
+        </section>
+
+        <section class="popular-dishes">
+            <h2>Самые популярные блюда</h2>
+            <table>
+                <tr>
+                    <th>Название блюда</th>
+                    <th>Описание</th>
+                    <th>Калорийность</th>
+                    <th>Цена</th>
+                </tr>
+                <tr>
+                    <td>Куриная грудка с овощами гриль</td>
+                    <td>Нежная куриная грудка с цукини, баклажанами и болгарским перцем</td>
+                    <td>420 ккал</td>
+                    <td>450 руб.</td>
+                </tr>
+                <tr>
+                    <td>Лосось с киноа и авокадо</td>
+                    <td>Запеченный лосось с гарниром из киноа и свежим авокадо</td>
+                    <td>520 ккал</td>
+                    <td>620 руб.</td>
+                </tr>
+                <tr>
+                    <td>Теплый салат с говядиной</td>
+                    <td>Сочная говядина с микс-салатом, томатами черри и кедровыми орешками</td>
+                    <td>380 ккал</td>
+                    <td>490 руб.</td>
+                </tr>
+                <tr>
+                    <td>Веганский боул с нутом</td>
+                    <td>Запеченный нут, хумус, овощи и тахини соус</td>
+                    <td>450 ккал</td>
+                    <td>390 руб.</td>
+                </tr>
+                <tr>
+                    <td>Паста с морепродуктами</td>
+                    <td>Паста из твердых сортов пшеницы с креветками, мидиями и томатным соусом</td>
+                    <td>480 ккал</td>
+                    <td>550 руб.</td>
+                </tr>
+                <tr>
+                    <td>Рисовая лапша с курицей терияки</td>
+                    <td>Рисовая лапша wok с куриным филе в соусе терияки и овощами</td>
+                    <td>460 ккал</td>
+                    <td>420 руб.</td>
+                </tr>
+            </table>
+        </section>
+    </main>
+
+    <footer id="contacts">
+        <p><b>Контактная информация</b></p>
+        <p>Телефон: <a href="tel:+79993737737">+7 (999) 373-77-37</a></p>
+        <p>Email: <a href="mailto:egor@deev.space">egor@deev.space</a></p>
+        <p>Адрес: г. Москва, ул. Михалковская, д. 7, к. 1, офис 813А</p>
+        <p>Режим работы: Пн-Пт с 8:00 до 20:00</p>
+    </footer>
+</body>
+
+</html>
--- a/labs/lab-02/menu.html
+++ b/labs/lab-02/menu.html
@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="https://deev.space/media/favicon.ico" type="image/x-icon">
+    <title>Собрать ланч - ЭкоЛанч</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>ЭкоЛанч</h1>
+        <nav>
+            <a href="index.html">Главная</a>
+            <a href="menu.html" id="active">Собрать ланч</a>
+            <a href="delivery.html">Доставка</a>
+            <a href="about.html">О нас</a>
+            <a href="#contacts">Контакты</a>
+        </nav>
+    </header>
+
+    <main>
+        <section>
+            <h2>Супы</h2>
+            <div class="dishes-grid">
+                <div class="dish-card">
+                    <img src="img\soup\tomato-soup.jpg" alt="Томатный суп">
+                    <p class="dish-price">250 руб.</p>
+                    <p class="dish-name">Томатный крем-суп</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\soup\chicken-noodle-soup.jpg" alt="Куриный бульон">
+                    <p class="dish-price">220 руб.</p>
+                    <p class="dish-name">Куриный бульон с лапшой</p>
+                    <p class="dish-weight">350 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\soup\pumpkin-soup.jpg" alt="Тыквенный суп">
+                    <p class="dish-price">270 руб.</p>
+                    <p class="dish-name">Тыквенный суп с имбирем</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\soup\mushroom-soup.jpg" alt="Грибной суп">
+                    <p class="dish-price">280 руб.</p>
+                    <p class="dish-name">Грибной крем-суп</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\soup\minestrone-soup.jpg" alt="Минестроне">
+                    <p class="dish-price">260 руб.</p>
+                    <p class="dish-name">Итальянский суп минестроне</p>
+                    <p class="dish-weight">350 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\soup\beet-soup.jpg" alt="Борщ">
+                    <p class="dish-price">240 руб.</p>
+                    <p class="dish-name">Традиционный борщ</p>
+                    <p class="dish-weight">350 мл</p>
+                    <button>Добавить</button>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Главные блюда</h2>
+            <div class="dishes-grid">
+                <div class="dish-card">
+                    <img src="img\main-dishes\grilled-chicken-vegetables.jpg" alt="Куриная грудка">
+                    <p class="dish-price">450 руб.</p>
+                    <p class="dish-name">Куриная грудка с овощами гриль</p>
+                    <p class="dish-weight">350 г</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\main-dishes\salmon-quinoa-avocado.jpg" alt="Лосось">
+                    <p class="dish-price">620 руб.</p>
+                    <p class="dish-name">Лосось с киноа и авокадо</p>
+                    <p class="dish-weight">380 г</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\main-dishes\beef-salad.jpg" alt="Говядина">
+                    <p class="dish-price">490 руб.</p>
+                    <p class="dish-name">Теплый салат с говядиной</p>
+                    <p class="dish-weight">320 г</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\main-dishes\vegan-bowl-chickpeas.jpg" alt="Веганский боул">
+                    <p class="dish-price">390 руб.</p>
+                    <p class="dish-name">Веганский боул с нутом</p>
+                    <p class="dish-weight">350 г</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\main-dishes\seafood-pasta.jpg" alt="Паста">
+                    <p class="dish-price">550 руб.</p>
+                    <p class="dish-name">Паста с морепродуктами</p>
+                    <p class="dish-weight">330 г</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\main-dishes\teriyaki-chicken-noodles.jpg" alt="Рисовая лапша">
+                    <p class="dish-price">420 руб.</p>
+                    <p class="dish-name">Рисовая лапша с курицей терияки</p>
+                    <p class="dish-weight">340 г</p>
+                    <button>Добавить</button>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Напитки</h2>
+            <div class="dishes-grid">
+                <div class="dish-card">
+                    <img src="img\drinks\orange-juice.jpg" alt="Апельсиновый сок">
+                    <p class="dish-price">150 руб.</p>
+                    <p class="dish-name">Свежевыжатый апельсиновый сок</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\drinks\spinach-smoothie.jpg" alt="Зеленый смузи">
+                    <p class="dish-price">180 руб.</p>
+                    <p class="dish-name">Зеленый смузи с шпинатом</p>
+                    <p class="dish-weight">350 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\drinks\berry-juice.jpg" alt="Ягодный морс">
+                    <p class="dish-price">120 руб.</p>
+                    <p class="dish-name">Ягодный морс</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\drinks\ginger-lemonade.jpg" alt="Имбирный лимонад">
+                    <p class="dish-price">140 руб.</p>
+                    <p class="dish-name">Имбирный лимонад</p>
+                    <p class="dish-weight">300 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\drinks\mango-smoothie.jpg" alt="Манго-маракуйя">
+                    <p class="dish-price">170 руб.</p>
+                    <p class="dish-name">Смузи манго-маракуйя</p>
+                    <p class="dish-weight">350 мл</p>
+                    <button>Добавить</button>
+                </div>
+                <div class="dish-card">
+                    <img src="img\drinks\water.jpg" alt="Минеральная вода">
+                    <p class="dish-price">80 руб.</p>
+                    <p class="dish-name">Минеральная вода</p>
+                    <p class="dish-weight">500 мл</p>
+                    <button>Добавить</button>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="contacts">
+        <p><b>Контактная информация</b></p>
+        <p>Телефон: <a href="tel:+79993737737">+7 (999) 373-77-37</a></p>
+        <p>Email: <a href="mailto:egor@deev.space">egor@deev.space</a></p>
+        <p>Адрес: г. Москва, ул. Михалковская, д. 7, к. 1, офис 813А</p>
+        <p>Режим работы: Пн-Пт с 8:00 до 20:00</p>
+    </footer>
+</body>
+
+</html>
--- a/labs/lab-02/other/Вопросы
+++ b/labs/lab-02/other/Вопросы
@ -0,0 +1,59 @@
+Блочная модель
+1. В чем суть блочной модели?
+
+2. Как рассчитываются размеры элементов?
+
+3. Как свойство box-sizing: border-box меняет стандартную блочную модель? Почему его часто используют?
+
+4. Чем отличаются строчные элементы от блочных?
+
+5. В чем особенности блочных элементов?
+
+6. В чем особенности строчных элементов?
+
+7. Как лучше задавать размеры элементам?
+
+8. Что такое переполнение и как оно возникает?
+
+9. Что такое поток документа?
+
+10. Какие есть особенности поведения margin?
+
+11. Для чего нужно свойство display? Какие у него есть основные значения?
+
+12. Для чего нужно свойство position?
+
+13. Чем отличаются разные варианты позиционирования?
+
+14. Как работают свойства float и clear? Для чего они исторически использовались и какие есть современные альтернативы?
+
+15. Какие есть способы выровнять элемент по центру по горизонтали и по вертикали?
+
+
+
+Flexbox
+1. Что такое флекс-контейнер?
+
+2. Что такое флекс-элемент?
+
+3. Какие свойства применяются на флекс-контейнере?
+
+4. Какие свойства применяются на флекс-элементе?
+
+5. Какие оси есть у флексов и какие свойства меняют их направления?
+
+6. Как выстраиваются флекс-элементы в контейнере?
+
+7. Какие свойства и как они выравнивают флекс-элементы?
+
+8. Что делают свойства flex-grow, flex-shrink и flex-basis?
+
+9. Для чего нужны свойства display: flex, justify-content, align-items?
+
+10. Что такое медиа-запрос? Из чего он состоит?
+
+11. Как работает max-width и min-width в медиа-запросе?
+
+12. Какие есть подходы к выбору точек перехода?
+
+13. Как работает Grid Layout? В чем его ключевое отличие от Flexbox?
--- a/labs/lab-02/other/Задание
+++ b/labs/lab-02/other/Задание
@ -0,0 +1,147 @@
+**Заголовок раздела (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)
--- a/labs/lab-02/styles.css
+++ b/labs/lab-02/styles.css
@ -0,0 +1,259 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+header {
+    background-color: #2d5016;
+    color: white;
+    padding: 20px 40px;
+    margin: 0;
+}
+
+h1 {
+    margin: 0 0 15px 0;
+    font-size: 36px;
+    color: white;
+}
+
+nav {
+    margin: 0;
+    padding: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+nav a {
+    text-decoration: none;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+}
+
+nav a:hover {
+    color: #a8d08d;
+}
+
+nav a#active {
+    color: tomato;
+}
+
+main {
+    margin: 0 auto;
+    padding: 40px 60px;
+    max-width: 1200px;
+    flex: 1;
+}
+
+section {
+    margin: 0 0 50px 0;
+    padding: 30px;
+    background-color: #f9f9f9;
+}
+
+h2 {
+    font-size: 28px;
+    color: #2d5016;
+    margin: 0 0 20px 0;
+}
+
+p {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    color: #333;
+    line-height: 1.6;
+    margin: 0 0 15px 0;
+}
+
+img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+    margin: 0 0 20px 0;
+}
+
+ul {
+    margin: 20px 0;
+    padding: 0 0 0 25px;
+}
+
+ul li {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    color: #333;
+    margin: 0 0 12px 0;
+    line-height: 1.5;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+}
+
+table th {
+    background-color: #2d5016;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    border: 1px solid #2d5016;
+    font-size: 16px;
+}
+
+table td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+    text-align: left;
+    font-size: 15px;
+    color: #333;
+}
+
+table tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+.dishes-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+}
+
+.dish-card {
+    display: flex;
+    flex-direction: column;
+    padding: 30px 40px;
+    border-radius: 35px;
+    cursor: pointer;
+    filter: drop-shadow(17px 19px 24px rgba(0, 0, 0, 0.13));
+    background-color: white;
+}
+
+.dish-card:hover {
+    border: 2px solid tomato;
+}
+
+.dish-card:hover button {
+    background-color: tomato;
+    color: white;
+}
+
+.dish-card img {
+    width: 100%;
+    height: auto;
+    border-radius: 35px;
+    margin: 0 0 15px 0;
+}
+
+.dish-price {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.dish-name {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.dish-weight {
+    color: #888;
+    margin: 0 0 10px 0;
+    margin-top: auto;
+}
+
+.dish-card button {
+    background-color: #f1eee9;
+    border: none;
+    padding: 10px 30px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+footer {
+    background-color: black;
+    color: white;
+    padding: 30px 60px;
+    margin: 0;
+}
+
+footer p {
+    color: white;
+    margin: 0 0 10px 0;
+}
+
+footer a {
+    text-decoration: none;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+}
+
+footer a:hover {
+    color: #a8d08d;
+}
+
+@media (max-width: 800px) {
+    .dishes-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    nav {
+        justify-content: space-between;
+    }
+
+    .about-company img {
+        width: 500px;
+    }
+}
+
+@media (max-width: 600px) {
+    h1 {
+        text-align: center;
+    }
+
+    nav {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav a {
+        font-size: 20px;
+    }
+
+    section h2 {
+        text-align: center;
+    }
+
+    .dishes-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .about-company img {
+        width: 100%;
+    }
+
+    table th,
+    table td {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 400px) {
+    table th,
+    table td {
+        font-size: 12px;
+    }
+}