LAB-01

2025-11-15 10:49:38 +03:00 · 2025-11-15 10:49:38 +03:00 · a4454ffcfe
commit a4454ffcfe
parent 39e14f09c0
5 changed files with 376 additions and 0 deletions
--- a/labs/lab-01/index.html
+++ b/labs/lab-01/index.html
@ -0,0 +1,101 @@
+<!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">Меню</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="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-01/main.jpg
+++ b/labs/lab-01/main.jpg
--- a/labs/lab-01/other/Вопросы
+++ b/labs/lab-01/other/Вопросы
@ -0,0 +1,28 @@
+HTML
+1. Что такое HTML?
+2. Что такое тег/атрибут/значение?
+3. Зачем нужен тег <!DOCTYPE html>?
+4. Опишите базовую структуру HTML-документа. Какие обязательные теги должны присутствовать?
+5. Для чего нужны атрибуты alt в теге <img> и title в теге <a>?
+6. Какие существуют способы создания списков? В чем разница между упорядоченным (ol) и неупорядоченным (ul) списком?
+7. Как отличить кнопку от ссылки?
+
+CSS
+1. Что такое CSS?
+2. Что такое каскад?
+3. Как рассчитывается специфичность?
+4. Как специфичность влияет на каскад?
+5. Что такое наследование? Какие свойства наследуются по умолчанию, а какие нет?
+6. Из чего состоят правила?
+7. Какие бывают селекторы?
+8. В чем разница между селектором класса (.class) и селектором идентификатора (#id)? Когда что использовать?
+9. Как обратиться к нескольким классам одновременно? (Например, к элементу с классами btn и btn-large).
+10. Для чего нужны normalize.css или reseter.css?
+11. Какие существуют 3 способа подключения стилей? В чём разница между ними? Какой из них имеет наивысший приоритет?
+12. Как создаются Custom Properties?
+13. Классификация шрифтов.
+14. На что влияет свойство font-weight?
+15. Почему для свойства font-family лучше указывать несколько шрифтов?
+16. Что меняет свойство color?
+17. Как работает rem?
+18. Чем отличается относительный путь от абсолютного?
--- a/labs/lab-01/other/Задание
+++ b/labs/lab-01/other/Задание
@ -0,0 +1,112 @@
+# Лабораторная работа №1. Вёрстка домашней страницы
+
+---
+
+Сверстайте главную страницу сайта компании по доставке бизнес-ланчей и оформите сайт с помощью стилей CSS.
+
+## Порядок выполнения
+
+Ваш заказчик - компания, доставляющая бизнес-ланчи в Москве. Ей необходим сайт, на котором клиенты смогут ознакомиться с доступными для заказа блюдами, сформировать из них свой ланч и сделать заказ.  
+  
+В ходе лабораторной работы 1 нужно сверстать главную страницу компании. Примерный макет страницы представлен ниже.
+
+### HTML
+
+**Обязательные элементы**, которые должны быть на странице  
+(в скобках указано, какой HTML-тэг должен быть использован):
+
+- Шапка сайта с заголовком и блоком навигации (header)
+	- Заголовок (h1)
+	- Блок навигации (nav) с ссылками (a) на другие страницы сайта  (пункт меню "Контакты" должен быть якорной ссылкой, ведущей к футеру)
+- Блок с основным содержимым страницы (main)
+	- Блок с информацией о компании (section)
+		- Заголовок (h2)
+		- Изображение (img)
+		- Текст (p)
+	- Блок с преимуществами компании (section)
+		- Заголовок (h2)
+		- Маркированный список с преимуществами (ul). Описать минимум 3 преимущества
+	- Блок с самыми популярными блюдами (section)
+		- Заголовок (h2)
+		- Таблица (table). Минимум 5 блюд в таблице
+- Футер с контактными данными (footer)
+	- Контактные данные (p, a)
+
+Чтобы проверить валидность кода, воспользуйтесь [validator.w3.org](https://validator.w3.org/).  
+  
+Выберите понравившийся шрифт на [fonts.google.com](https://fonts.google.com/) и подключите к странице (он должен быть применен ко всему размещенному тексту).  
+  
+После того, как вы сверстали страницу, необходимо оформить ее стилями CSS.
+
+### CSS
+
+В данном разделе перечислены обязательные CSS-свойства, которые должны быть использованы. Необязательно использовать все свойства из перечня для каждого указанного тега. Например, вы можете использовать для тегов p только свойство font-family, но тогда нужно применить font-size и color для других текстовых элементов.
+
+#### Для блоков (div, header, footer, main, nav)
+- margin
+- padding
+- box-sizing: border-box (примените к [универсальному селектору](https://htmlacademy.ru/blog/css/universal) )
+#### Для текста
+- font-family (к странице должен быть подключен Google-шрифт)
+- font-size
+- color
+#### Для изображений
+- width
+- height
+#### Для таблиц
+- padding
+- border
+- border-collapse: collapse;
+- text-align
+#### Для ссылок
+- text-decoration: none
+- font-family
+- font-size
+- color (цвет ссылок должен изменяться при наведении, используйте :hover)
+#### Для футера
+- background-color: black
+- color: white
+
+Для всех свойств, у которых не указаны значения, вы должны выбрать их самостоятельно.  
+Вы можете использовать дополнительные HTML-тэги и CSS-свойства на свое усмотрение.
+
+### Контент-сайта
+[Ссылка](https://lms.mospolytech.ru/mod/assign/images/lunch.jpg) на изображение из макета.
+
+### Защита
+Чтобы сдать лабораторную, необходимо выполнить все [требования](https://lms.mospolytech.ru/mod/assign/requirements.html).
+
+### Материалы для изучения
+
+#### HTML
+[Структура HTML-документа [WebReference]](https://webref.ru/course/html-basics/valid-document) 
+[Заголовки [Doka]](https://doka.guide/html/h1-h6/)
+[Абзац текста [Doka]](https://doka.guide/html/p/)
+[Маркированный список [Doka]](https://doka.guide/html/ul/)
+[Ссылки [Doka]](https://doka.guide/html/a/)
+[Изображения [Doka]](https://doka.guide/html/img/)
+[Тег div [Doka]](https://doka.guide/html/div/)
+[Таблицы [Doka]](https://doka.guide/html/tables/)
+[Атрибут класс [Doka]](https://doka.guide/html/class/)
+[Поток документа [Doka]](https://doka.guide/html/flow/)
+[Семантическая вёрстка [Doka]](https://doka.guide/html/semantics/)
+[Как проверить валидность HTML-разметки [HTML Academy]](https://htmlacademy.ru/blog/html/html-validation)
+[Элементы, теги и атрибуты [Hexlet]](https://ru.hexlet.io/courses/html/lessons/html_terms/theory_unit)
+#### CSS
+[Подключение стилей [Doka]](https://doka.guide/css/adding-styles/)
+[Селектор по тегу [Doka]](https://doka.guide/css/tag-selector/)
+[Селекторы по классу [Doka]](https://doka.guide/css/class-selector/)
+[Селектор потомков (пробел) [HTML Academy]](https://htmlacademy.ru/blog/css/descendant)
+[Универсальный селектор * [HTML Academy]](https://htmlacademy.ru/blog/css/universal)
+[border [Doka]](https://doka.guide/css/border/)
+[Стили для таблиц (border) [W3Schools]](https://www.w3schools.com/css/css_table.asp)
+[Принцип каскада [Doka]](https://doka.guide/css/cascade/)
+[Блочная модель [Doka]](https://doka.guide/css/box-model/)
+[Специфичность [Doka]](https://doka.guide/css/specificity/)
+[:hover [Doka]](https://doka.guide/css/hover/)
+[background-color [Doka]](https://doka.guide/css/background-color/)
+#### Другое
+[Работа с файлами [MDN]](https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+[Якорные ссылки [Doka]](https://doka.guide/html/a/#vadim-makeev-sovetuet)
+[Как сделать кликабельный номер телефона [HTML Academy]](https://htmlacademy.ru/blog/html/mailto)
+[Как подключать шрифты [HTML Academy]](https://htmlacademy.ru/blog/html/fonts-loading)
--- a/labs/lab-01/styles.css
+++ b/labs/lab-01/styles.css
@ -0,0 +1,135 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+}
+
+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;
+}
+
+nav a {
+    text-decoration: none;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    margin: 0 20px 0 0;
+}
+
+nav a:hover {
+    color: #a8d08d;
+}
+
+main {
+    margin: 0 auto;
+    padding: 40px 60px;
+    max-width: 1200px;
+}
+
+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;
+}
+
+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;
+}