mirror of
https://github.com/EDeev/web-tech.git
synced 2026-06-15 19:11:07 +03:00
270 lines
15 KiB
HTML
270 lines
15 KiB
HTML
<!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>
|