EDeev/web-tech
1
0
Fork 0
mirror of https://github.com/EDeev/web-tech.git synced 2026-06-15 19:11:07 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

LAB-03

Browse source
This commit is contained in:
Egor Deev 2025-11-15 10:50:45 +03:00 • committed by GitHub
parent 076e400670
commit 5b3b2dfee6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 931 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
labs/lab-03/img/drinks/berry-juice.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
labs/lab-03/img/drinks/ginger-lemonade.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
labs/lab-03/img/drinks/mango-smoothie.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
labs/lab-03/img/drinks/orange-juice.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
labs/lab-03/img/drinks/spinach-smoothie.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
labs/lab-03/img/drinks/water.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
labs/lab-03/img/main-dishes/beef-salad.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
labs/lab-03/img/main-dishes/grilled-chicken-vegetables.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
labs/lab-03/img/main-dishes/salmon-quinoa-avocado.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
labs/lab-03/img/main-dishes/seafood-pasta.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
labs/lab-03/img/main-dishes/teriyaki-chicken-noodles.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
labs/lab-03/img/main-dishes/vegan-bowl-chickpeas.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
labs/lab-03/img/main.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
labs/lab-03/img/soup/beet-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
labs/lab-03/img/soup/chicken-noodle-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
labs/lab-03/img/soup/minestrone-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
labs/lab-03/img/soup/mushroom-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
labs/lab-03/img/soup/pumpkin-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
labs/lab-03/img/soup/tomato-soup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

102
labs/lab-03/index.html Normal file
View file

@ -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>

270
labs/lab-03/menu.html Normal file
View file

@ -0,0 +1,270 @@
<!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>
<section class="order-form">
<h2>Оформить заказ</h2>
<form action="https://httpbin.org/post" method="POST">
<div class="form-container">
<div class="order-section">
<h3>Состав заказа</h3>
<label for="soup">Суп</label>
<select name="soup" id="soup" required>
<option value="">Выберите суп</option>
<option value="tomato-soup">Томатный крем-суп</option>
<option value="chicken-noodle-soup">Куриный бульон с лапшой</option>
<option value="pumpkin-soup">Тыквенный суп с имбирем</option>
<option value="mushroom-soup">Грибной крем-суп</option>
<option value="minestrone-soup">Итальянский суп минестроне</option>
<option value="beet-soup">Традиционный борщ</option>
</select>
<label for="main-dish">Главное блюдо</label>
<select name="main-dish" id="main-dish" required>
<option value="">Выберите главное блюдо</option>
<option value="grilled-chicken-vegetables">Куриная грудка с овощами гриль</option>
<option value="salmon-quinoa-avocado">Лосось с киноа и авокадо</option>
<option value="beef-salad">Теплый салат с говядиной</option>
<option value="vegan-bowl-chickpeas">Веганский боул с нутом</option>
<option value="seafood-pasta">Паста с морепродуктами</option>
<option value="teriyaki-chicken-noodles">Рисовая лапша с курицей терияки</option>
</select>
<label for="drink">Напиток</label>
<select name="drink" id="drink" required>
<option value="">Выберите напиток</option>
<option value="orange-juice">Свежевыжатый апельсиновый сок</option>
<option value="spinach-smoothie">Зеленый смузи с шпинатом</option>
<option value="berry-juice">Ягодный морс</option>
<option value="ginger-lemonade">Имбирный лимонад</option>
<option value="mango-smoothie">Смузи манго-маракуйя</option>
<option value="water">Минеральная вода</option>
</select>
<label for="comment">Комментарий к заказу</label>
<textarea name="comment" id="comment" placeholder="Введите комментарий к заказу"></textarea>
</div>
<div class="customer-section">
<h3>Данные для доставки</h3>
<label for="name">Имя</label>
<input type="text" name="name" id="name" placeholder="Введите ваше имя" required>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Введите ваш email" required>
<div class="checkbox-group">
<input type="checkbox" name="subscribe" id="subscribe" checked>
<label for="subscribe">Подписаться на рассылку</label>
</div>
<label for="phone">Телефон</label>
<input type="tel" name="phone" id="phone" placeholder="Введите ваш телефон" required>
<label for="address">Адрес доставки</label>
<input type="text" name="address" id="address" placeholder="Введите адрес доставки" required>
<small class="form-hint">Доставка осуществляется только по Москве</small>
<div class="radio-group">
<label>Время доставки</label>
<div>
<input type="radio" name="delivery-time-type" id="asap" value="asap" required>
<label for="asap">Как можно скорее</label>
</div>
<div>
<input type="radio" name="delivery-time-type" id="specific-time" value="specific-time" required>
<label for="specific-time">К определенному времени</label>
</div>
</div>
<label for="delivery-time">Указать время</label>
<input type="time" name="delivery-time" id="delivery-time" min="07:00" max="23:00" step="300">
<small class="form-hint">Доступное время доставки с 7:00 до 23:00</small>
<div class="form-buttons">
<button type="reset">Сбросить</button>
<button type="submit">Отправить заказ</button>
</div>
</div>
</div>
</form>
</section>
<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>

26
labs/lab-03/other/Вопросы для подготовки к защите ЛР №3.txt Normal file
View file

@ -0,0 +1,26 @@
Формы
1. Принципы работы HTTP
2. Методы GET и POST
3. Перечислите основные типы полей ввода (input type="...") и их назначение.
4. Что требуется для создания минимальной формы?
5. Зачем нужен label? Как связать label с полем ввода?
6. Чем отличается button type="submit" и input type="submit"
7. Как группируются radio и checkbox
8. Для чего нужны атрибуты name, value, required, disabled?
9. Примеры использования fieldset, legend
10. Какие атрибуты HTML5 используются для базовой валидации форм?
11. Для чего используется атрибут placeholder? Чем он отличается от value?
12. Как создать выпадающий список с помощью <select> и <option>?
13. В чем разница между <textarea> и <input type="text">? Когда что использовать?

107
labs/lab-03/other/Задание - Лабораторная работа 3.md Normal file
View file

@ -0,0 +1,107 @@
# Лабораторная работа №3. Работа с формами, HTTP
---
Создайте форму заказа. Форма должна отправляться на [https://httpbin.org/post](https://httpbin.org/post), на httpbin должны отобразиться все отправленные значения.
## Порядок выполнения
Форма должна располагаться на странице «Собрать ланч» после блока main (блока с информацией обо всех доступных для заказа блюдах). Примерный макет формы:
[Полный макет](https://lms.mospolytech.ru/pluginfile.php/1314120/mod_assign/intro/mockup_full.png)  страницы.
### HTML
**Обязательные элементы**, которые должны быть на странице:
- Блок, состоящий из заголовка блока и формы
- Форма должна делиться на два блока:
- Блок с заказом клиента:
- заголовок блока
- label для каждого селекта
- селект для каждого блюда (суп, главное блюдо, напиток)
- label и многострочное текстовое поле для комментария
- Блок с данными клиента:
- заголовок блока
- label и поле для ввода имени
- label и поле для ввода email
- чекбокс и label для выражения согласия на получение информации (подписка на рассылку)
- label и поле для ввода телефона
- label и поле для ввода адреса
- переключатель для выбора времени доставки и подпись к переключателю
- label и поле для указания времени доставки
- кнопка сбросить
- кнопка отправить
Подробные требования к элементам блока с данными клиента:
|Элемент|Тип|Особенности|
|---|---|---|
|Комментарий (textarea)|-|-|
|Имя (input)|text|обязательное для заполнения|
|Email (input)|email|обязательное для заполнения|
|Чекбокс для подписки на рассылку (input)|checkbox|По умолчанию выбран (стоит галочка)|
|Телефон (input)|tel|обязательное для заполнения|
|Адрес (input)|text|обязательное для заполнения|
|Выбор времени доставки (input)|radio|обязательное для заполнения|
|Указание времени доставки (input)|time|минимальное время - 07:00 <br>максимальное время - 23:00 <br>шаг изменения времени - 5 минут|
|Кнопка сбросить (button)|reset|Кнопка должна полностью очищать форму|
|Кнопка отправить (button)|submit|Кнопка должна отравлять форму|
Форма должна отправляться методом POST на https://httpbin.org/post
На данной странице httpbin.org должны отобразиться все отправленные данные.
**Блок с заказом клиента**
У каждого селекта должна быть указана опция по умолчанию с пустым значением value (например, «Выберите суп»).
У всех остальных опций селектов должно быть указано значение value. Подберите логичное значение, чтобы при отправке данных его можно было верно понять. Например, для супа Гаспачо value может быть «gaspacho».
Все селекты обязательны для заполнения (форма не должна отправиться, пока в каждом селекте не будет выбрана опция с заполненным value).
Все label должны быть связаны с select, к которым они относятся.
**Блок с данными клиента**
Форма не должна отправляться, если хотя бы одно из обязательных полей не заполнено.
Все label должны быть связаны с input/textarea, к которым они относятся.
### CSS
Необходимо как можно точнее повторить [макет](https://lms.mospolytech.ru/mod/assign/view.php?id=539983#mockup_form) формы:
- разделение на колонки
- размер шрифта для разных элементов
- ширина и высота полей ввода, селектов
- стилизация кнопок
Вы можете использовать дополнительные HTML-элементы и CSS-свойства на свое усмотрение.
### Требования
- Все требования из блока HTML должны быть выполнены.
- Все требования из блока CSS должны быть выполнены.
- Код должен быть валиден (не должно быть ошибок в валидаторе [https://validator.w3.org](https://validator.w3.org/)).
- Результат должен соответствовать макетам (количество блоков, структура их наполнения).
### Материалы для изучения
#### HTML
[Формы [Doka]](https://doka.guide/html/form/)
[input [Doka]](https://doka.guide/html/input/)
[input type="checkbox" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
[input type="radio" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
[input type="time" [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
[select [Doka]](https://doka.guide/html/select/)
[option [Doka]](https://doka.guide/html/option/)
[label [Doka]](https://doka.guide/html/label/)
[Атрибут for [Doka]](hhttps://doka.guide/html/for/)
[textarea [Doka]](https://doka.guide/html/textarea/)
[button [Doka]](https://doka.guide/html/button/)
[Атрибут placeholder [Doka]](https://doka.guide/html/placeholder/)
[Атрибут required [Doka]](https://doka.guide/html/required/)
#### CSS
[Стилизация форм [W3Schools]](https://www.w3schools.com/css/css_form.asp)
#### Сеть
[httpbin.org](https://httpbin.org/)
[Что такое URL-адрес? [MDN]](https://developer.mozilla.org/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
[URL [Doka]](https://doka.guide/tools/url/)
[Обзор протокола HTTP [MDN]](https://developer.mozilla.org/ru/docs/Web/HTTP/Overview)
[Протокол HTTP [Doka]](https://doka.guide/tools/http-protocol/)
[Работа с сетью [Doka]](https://doka.guide/tools/network/)

BIN
labs/lab-03/other/Результат запроса.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

426
labs/lab-03/styles.css Normal file
View file

@ -0,0 +1,426 @@
* {
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;
}
.order-form {
margin: 0 auto;
padding: 40px 60px;
max-width: 1200px;
background-color: white;
}
.order-form h2 {
text-align: center;
margin-bottom: 30px;
}
.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.order-section,
.customer-section {
display: flex;
flex-direction: column;
}
.order-section h3,
.customer-section h3 {
font-size: 22px;
color: #2d5016;
margin: 0 0 20px 0;
}
.order-form label {
font-size: 16px;
color: #333;
margin: 0 0 8px 0;
font-weight: 600;
}
.order-form select,
.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="tel"],
.order-form input[type="time"],
.order-form textarea {
width: 100%;
padding: 12px 15px;
margin: 0 0 20px 0;
border: 1px solid #ddd;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
}
.order-form select {
cursor: pointer;
background-color: white;
}
.order-form textarea {
height: 100px;
resize: vertical;
}
.checkbox-group {
display: flex;
align-items: center;
margin: 0 0 20px 0;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
cursor: pointer;
}
.checkbox-group label {
margin: 0;
font-weight: 400;
cursor: pointer;
}
.radio-group {
margin: 0 0 20px 0;
}
.radio-group > label {
display: block;
margin-bottom: 10px;
}
.radio-group > div {
display: flex;
align-items: center;
margin: 0 0 8px 0;
}
.radio-group input[type="radio"] {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
cursor: pointer;
}
.radio-group input[type="radio"] + label {
margin: 0;
font-weight: 400;
cursor: pointer;
}
.form-buttons {
display: flex;
gap: 15px;
margin-top: 10px;
}
.form-buttons button {
flex: 1;
padding: 15px 30px;
border: none;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
.form-buttons button[type="reset"] {
background-color: #f1eee9;
color: #333;
}
.form-buttons button[type="reset"]:hover {
background-color: #e0ddd8;
}
.form-buttons button[type="submit"] {
background-color: #2d5016;
color: white;
}
.form-buttons button[type="submit"]:hover {
background-color: #3d6020;
}
.form-hint {
display: block;
font-size: 13px;
color: #666;
margin: -15px 0 20px 0;
line-height: 1.4;
}
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;
}
.form-container {
grid-template-columns: 1fr;
gap: 20px;
}
}
@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;
}
.form-container {
grid-template-columns: 1fr;
}
.form-buttons {
flex-direction: column;
}
}
@media (max-width: 400px) {
table th,
table td {
font-size: 12px;
}
}