-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
263 lines (221 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="icon/safari-pinned-tab.svg" color="#ff7020">
<meta name="msapplication-TileColor" content="#FFAB08">
<meta name="theme-color" content="#FFAB08">
<title>YourMeal - Самые сочные бургеры</title>
<link rel="stylesheet" href="css/index.css">
<script type="module" src="js/script.js"></script>
</head>
<body>
<header class="header">
<div class="container header__container">
<svg class="header__logo" role="img" aria-label="Логотип компании YourMeal" viewBox="0 0 199 44">
<use href="img/sprite.svg#logo" />
</svg>
<div class="header__title-container">
<h1 class="header__title">Только самые
<span class="header__title-red">сочные бургеры!</span>
</h1>
<p class="header__appeal">Бесплатная доставка от 599<span class="currency">₴</span></p>
</div>
</div>
</header>
<main>
<nav class="navigation">
<div class="container navigation__container">
<ul class="navigation__list">
<li class="navigation__item">
<button class="navigation__button navigation__button_burger navigation__button_active"
data-category="burger">Бургеры</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_snack" data-category="snack">Закуски</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_sauce" data-category="sauce">Соусы</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_hot-dog" data-category="hot-dog">Хот-доги</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_combo" data-category="combo">Комбо</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_shawarma" data-category="shawarma">Шаурма</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_pizza" data-category="pizza">Пицца</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_wok" data-category="wok">Вок</button>
</li>
<li class="navigation__item">
<button class="navigation__button navigation__button_dessert" data-category="dessert">Десерты</button>
</li>
</ul>
</div>
</nav>
<section class="catalog">
<div class="container catalog__container">
<div class="catalog__order order ">
<aside class="order__wrapper">
<div class="order__wrap-title">
<h2 class="order__title">Корзина</h2>
<span class="order__count">0</span>
</div>
<div class="order__wrap-list">
<ul class="order__list"></ul>
<div class="order__total">
<p>Итого</p>
<p>
<span class="order__total-amount">0</span>
<span class="currency">₴</span>
</p>
</div>
<button class="order__submit">Оформить заказ</button>
<p class="order__appeal">Бесплатная доставка</p>
</div>
</aside>
</div>
<div class="catalog__wrapper">
<h3 class="catalog__title">Бургеры</h3>
<ul class="catalog__list"></ul>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__content">
<svg class="footer__logo" role="img" aria-label="Логотип компании YourMeal" viewBox="0 0 199 44">
<use href="img/sprite.svg#logo" />
</svg>
<div class="footer__contact">
<p class="footer__subtitle">Номер для заказа</p>
<a class="footer__link-phone" href="tel:+3804400000">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.01 15.38C18.78 15.38 17.59 15.18 16.48 14.82C16.13 14.7 15.74 14.79 15.47 15.06L13.9 17.03C11.07 15.68 8.42 13.13 7.01 10.2L8.96 8.54C9.23 8.26 9.31 7.87 9.2 7.52C8.83 6.41 8.64 5.22 8.64 3.99C8.64 3.45 8.19 3 7.65 3H4.19C3.65 3 3 3.24 3 3.99C3 13.28 10.73 21 20.01 21C20.72 21 21 20.37 21 19.82V16.37C21 15.83 20.55 15.38 20.01 15.38Z" />
</svg>
<span>+38(044)0-00-00</span>
</a>
</div>
<div class="footer__contact">
<p class="footer__subtitle">Мы в соцсетях</p>
<ul class="footer__list">
<li class="footer__list-item">
<a class="footer__link-sn" href="https://vk.com" aria-label="ссылка на нашу группу в вконтакте">
<svg width="36" height="36" viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM24.9225 20.3081C24.9225 20.3081 26.5144 21.8794 26.9062 22.6087C26.9175 22.6237 26.9231 22.6387 26.9269 22.6462C27.0862 22.9144 27.1237 23.1225 27.045 23.2781C26.9137 23.5369 26.4637 23.6644 26.31 23.6756H23.4975C23.3025 23.6756 22.8937 23.625 22.3987 23.2837C22.0181 23.0175 21.6431 22.5806 21.2775 22.155C20.7319 21.5212 20.2594 20.9738 19.7831 20.9738C19.7226 20.9736 19.6625 20.9831 19.605 21.0019C19.245 21.1181 18.7838 21.6319 18.7838 23.0006C18.7838 23.4281 18.4462 23.6737 18.2081 23.6737H16.92C16.4812 23.6737 14.1956 23.52 12.1706 21.3844C9.69187 18.7687 7.46062 13.5225 7.44187 13.4737C7.30125 13.1344 7.59187 12.9525 7.90875 12.9525H10.7494C11.1281 12.9525 11.2519 13.1831 11.3381 13.3875C11.4394 13.6256 11.8106 14.5725 12.42 15.6375C13.4081 17.3737 14.0138 18.0787 14.4994 18.0787C14.5904 18.0777 14.6799 18.0545 14.76 18.0112C15.3937 17.6587 15.2756 15.3994 15.2475 14.9306C15.2475 14.8425 15.2456 13.92 14.9212 13.4775C14.6887 13.1569 14.2931 13.035 14.0531 12.99C14.1503 12.856 14.2782 12.7473 14.4262 12.6731C14.8612 12.4556 15.645 12.4237 16.4231 12.4237H16.8563C17.7 12.435 17.9175 12.4894 18.2231 12.5662C18.8419 12.7144 18.855 13.1137 18.8006 14.4806C18.7838 14.8687 18.7669 15.3075 18.7669 15.825C18.7669 15.9375 18.7612 16.0575 18.7612 16.185C18.7425 16.8806 18.72 17.67 19.2112 17.9944C19.2753 18.0346 19.3494 18.056 19.425 18.0562C19.5956 18.0562 20.1094 18.0562 21.5006 15.6694C21.9297 14.9011 22.3025 14.1028 22.6162 13.2806C22.6444 13.2319 22.7269 13.0819 22.8244 13.0237C22.8963 12.9871 22.9761 12.9684 23.0569 12.9694H26.3962C26.76 12.9694 27.0094 13.0237 27.0562 13.1644C27.1387 13.3875 27.0412 14.0681 25.5169 16.1325L24.8362 17.0306C23.4544 18.8419 23.4544 18.9338 24.9225 20.3081Z" />
</svg>
</a>
</li>
<li class="footer__list-item">
<a class="footer__link-sn" href="https://tg.com" aria-label="ссылка на наш канал в телеграм">
<svg width="36" height="36" viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M36 18C36 22.7739 34.1036 27.3523 30.7279 30.7279C27.3523 34.1036 22.7739 36 18 36C13.2261 36 8.64773 34.1036 5.27208 30.7279C1.89642 27.3523 0 22.7739 0 18C0 13.2261 1.89642 8.64773 5.27208 5.27208C8.64773 1.89642 13.2261 0 18 0C22.7739 0 27.3523 1.89642 30.7279 5.27208C34.1036 8.64773 36 13.2261 36 18ZM18.6458 13.2885C16.8952 14.0175 13.3942 15.525 8.14725 17.811C7.29675 18.1485 6.849 18.4815 6.8085 18.8055C6.741 19.3522 7.42725 19.5683 8.361 19.863L8.75475 19.9868C9.67275 20.286 10.9102 20.6348 11.5515 20.6483C12.1365 20.6618 12.7867 20.4233 13.5045 19.9283C18.4072 16.6185 20.9385 14.9467 21.096 14.9107C21.2085 14.8837 21.366 14.8523 21.4695 14.9468C21.5752 15.039 21.564 15.2168 21.5528 15.264C21.4853 15.5542 18.792 18.0562 17.3993 19.3522C16.965 19.7572 16.6567 20.043 16.5938 20.1082C16.455 20.25 16.314 20.3895 16.1707 20.5268C15.3157 21.3503 14.6768 21.9668 16.2045 22.9748C16.9403 23.4608 17.5298 23.859 18.117 24.2595C18.756 24.696 19.395 25.1303 20.223 25.6748C20.4322 25.8098 20.6348 25.956 20.8305 26.0955C21.5753 26.6265 22.248 27.1035 23.0737 27.027C23.5553 26.982 24.0525 26.532 24.3045 25.182C24.9007 21.9938 26.073 15.0885 26.343 12.2423C26.3595 12.0056 26.3497 11.7679 26.3137 11.5335C26.2926 11.3443 26.201 11.17 26.0573 11.0452C25.8525 10.9039 25.6085 10.8307 25.3597 10.836C24.6847 10.8472 23.643 11.2095 18.6458 13.2885Z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="footer__development">
<p class="footer__copyright">© YouMeal, 2022</p>
<a class="footer__contact-dev" href="#">Design: Anastasia Ilina</a>
</div>
</div>
</footer>
<div class="modal modal_product">
<div class="modal__main modal-product">
<div class="modal-product__container">
<h2 class="modal-product__title">Мясная бомба</h2>
<div class="modal-product__content">
<img class="modal-product__image" src="img/burger6.jpg" alt="Мясная бомба">
<p class="modal-product__description">Супер мясное наслаждение! Большая рубленая котлета из свежего говяжего
мяса покорит вас своей сочностью, а хрустящие листья салата добавят свежести.</p>
<div class="modal-product__ingredients ingredients">
<h3 class="ingredients__title">Состав:</h3>
<ul class="ingredients__list">
<li class="ingredients__item">Пшеничная булочка</li>
<li class="ingredients__item">Котлета из говядины</li>
<li class="ingredients__item">Красный лук</li>
<li class="ingredients__item">Листья салата</li>
<li class="ingredients__item">Соус сорчичный</li>
</ul>
<p class="ingredients__calories">520г, ккал 430</p>
</div>
</div>
<div class="modal-product__footer">
<div class="modal-product__add">
<button class="modal-product__btn">Добавить</button>
<div class="count">
<button class="count__minus">-</button>
<p class="count__amount">1</p>
<button class="count__plus">+</button>
</div>
</div>
<p class="modal-product__price">
<span class="modal-product__price-count">689</span>
<span class="currency">₴</span>
</p>
</div>
</div>
<button class="modal__close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<rect x="5.07422" y="5.28247" width="1" height="20" transform="rotate(-45 5.07422 5.28247)" />
<rect x="5.78125" y="19.4246" width="1" height="20" transform="rotate(-135 5.78125 19.4246)" />
</svg>
</button>
</div>
</div>
<div class="modal modal_delivery">
<div class="modal__main modal-delivery">
<div class="modal-delivery__container">
<h2 class="modal-delivery__title">Доставка</h2>
<form class="modal-delivery__form" id="delivery">
<fieldset class="modal-delivery__fieldset-input">
<input class="modal-delivery__input" type="text" name="name" required placeholder="Ваше имя">
<input class="modal-delivery__input" type="tel" name="phone" required placeholder="Телефон">
</fieldset>
<fieldset class="modal-delivery__fieldset-radio">
<label class="modal-delivery__label">
<input class="modal-delivery__radio" type="radio" name="format" value="pickup" checked>
<span>Самовывоз</span>
</label>
<label class="modal-delivery__label">
<input class="modal-delivery__radio" type="radio" name="format" value="delivery">
<span>Доставка</span>
</label>
</fieldset>
<fieldset class="modal-delivery__fieldset-input modal-delivery__fieldset-input_hide" name="address-info">
<input class="modal-delivery__input" type="text" name="address" placeholder="Улица, дом, квартира">
<input class="modal-delivery__input modal-delivery__input_half" type="number" name="floor"
placeholder="Этаж">
<input class="modal-delivery__input modal-delivery__input_half" type="number" name="intercom"
placeholder="Домофон">
</fieldset>
</form>
<button class="modal-delivery__btn" form="delivery">Оформить</button>
<button class="modal__close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<rect x="5.07422" y="5.28247" width="1" height="20" transform="rotate(-45 5.07422 5.28247)" />
<rect x="5.78125" y="19.4246" width="1" height="20" transform="rotate(-135 5.78125 19.4246)" />
</svg>
</button>
</div>
</div>
</div>
</body>
</html>