diff --git a/labs/lab-01/index.html b/labs/lab-01/index.html new file mode 100644 index 0000000..8d1bd4b --- /dev/null +++ b/labs/lab-01/index.html @@ -0,0 +1,101 @@ + + + + + + + ЭкоЛанч - Доставка здоровых бизнес-ланчей в Москве + + + + + + +
+

ЭкоЛанч

+ +
+ +
+
+

О компании ЭкоЛанч

+ Здоровая еда в контейнерах +

ЭкоЛанч - это современная компания по доставке здоровых бизнес-ланчей в офисы Москвы. Наша миссия - сделать правильное питание доступным для занятых людей, которые ценят свое время и здоровье.

+

Мы используем только свежие продукты от проверенных поставщиков, а наши повара готовят блюда каждое утро. Все ланчи упакованы в экологичную биоразлагаемую упаковку, потому что мы заботимся не только о вашем здоровье, но и о здоровье нашей планеты.

+
+ +
+

Наши преимущества

+ +
+ +
+

Самые популярные блюда

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Название блюдаОписаниеКалорийностьЦена
Куриная грудка с овощами грильНежная куриная грудка с цукини, баклажанами и болгарским перцем420 ккал450 руб.
Лосось с киноа и авокадоЗапеченный лосось с гарниром из киноа и свежим авокадо520 ккал620 руб.
Теплый салат с говядинойСочная говядина с микс-салатом, томатами черри и кедровыми орешками380 ккал490 руб.
Веганский боул с нутомЗапеченный нут, хумус, овощи и тахини соус450 ккал390 руб.
Паста с морепродуктамиПаста из твердых сортов пшеницы с креветками, мидиями и томатным соусом480 ккал550 руб.
Рисовая лапша с курицей териякиРисовая лапша wok с куриным филе в соусе терияки и овощами460 ккал420 руб.
+
+
+ + + + diff --git a/labs/lab-01/main.jpg b/labs/lab-01/main.jpg new file mode 100644 index 0000000..f9f6558 Binary files /dev/null and b/labs/lab-01/main.jpg differ diff --git a/labs/lab-01/other/Вопросы для подготовки к защите ЛР №1.txt b/labs/lab-01/other/Вопросы для подготовки к защите ЛР №1.txt new file mode 100644 index 0000000..a5a8417 --- /dev/null +++ b/labs/lab-01/other/Вопросы для подготовки к защите ЛР №1.txt @@ -0,0 +1,28 @@ +HTML +1. Что такое HTML? +2. Что такое тег/атрибут/значение? +3. Зачем нужен тег ? +4. Опишите базовую структуру HTML-документа. Какие обязательные теги должны присутствовать? +5. Для чего нужны атрибуты alt в теге и title в теге ? +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. Чем отличается относительный путь от абсолютного? \ No newline at end of file diff --git a/labs/lab-01/other/Задание - Лабораторная работа 1.md b/labs/lab-01/other/Задание - Лабораторная работа 1.md new file mode 100644 index 0000000..d156df0 --- /dev/null +++ b/labs/lab-01/other/Задание - Лабораторная работа 1.md @@ -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) diff --git a/labs/lab-01/styles.css b/labs/lab-01/styles.css new file mode 100644 index 0000000..ccd9d70 --- /dev/null +++ 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; +} \ No newline at end of file