Pizza-Go
/
index.html
240 строк · 8.2 Кб
1<!DOCTYPE html>2<html lang="ru">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0" />6<title>Go-Go Pizza - сервис доставки лучшей пиццы в городе</title>7<link rel="stylesheet" href="./css/index.css" />8
9<link10rel="preload"11href="./fonts/nunito-v26-cyrillic_latin-regular.woff2"12as="font"13crossorigin14/>15<link16rel="preload"17href="./fonts/nunito-v26-cyrillic_latin-600.woff2"18as="font"19crossorigin20/>21<link22rel="preload"23href="./fonts/nunito-v26-cyrillic_latin-900.woff2"24as="font"25crossorigin26/>27<script src="./js/main.js" type="module"></script>28</head>29
30<body>31<header class="header">32<div class="container header__container">33<img34class="header__logo"35src="./images/logo.svg"36alt="Логотип компании Go-Go"37width="164"38height="23"39/>40
41<button class="header__cart" aria-label="Открыть корзину">42<svg43class="header__cart-icon"44width="20"45height="20"46viewBox="0 0 20 20"47fill="none"48xmlns="http://www.w3.org/2000/svg"49>50<path51d="M10.2447 19.9998L4.10025 20C3.52015 19.9993 3.02891 19.607 3.00305 18.9351L3.00023 5.9415C3.00035 5.86538 2.99612 5.78464 3.01939 5.71195L3.02658 5.69123C3.17289 5.25439 3.43005 5.20004 3.79803 5.19899L6.58683 5.20079C6.68626 5.20099 6.74251 5.24705 6.74251 5.11779L6.7427 4.08922C6.74285 3.80394 6.72952 3.50765 6.75378 3.22354C6.90462 1.4575 8.17638 0.161078 9.76094 0.0108937L9.78405 0.00632522C9.98756 0.00499552 10.2033 -0.010719 10.4053 0.0130279C11.8031 0.177318 12.9029 1.39793 13.1751 2.87932C13.2436 3.25201 13.2423 3.59681 13.2426 3.97767L13.2444 5.19603C13.3085 5.20825 13.3829 5.20066 13.4482 5.20062L16.1349 5.19741C16.5033 5.19745 16.8656 5.22863 16.9758 5.71161L16.9798 5.73033C17.0103 5.86651 16.9972 6.02474 16.9973 6.16475L16.9928 18.9908C16.9793 19.3738 16.7199 19.7355 16.4114 19.8936C16.2072 19.9983 16.0154 19.9979 15.7934 19.999L10.2447 19.9998ZM9.86623 1.83416C9.13321 1.92478 8.56466 2.50309 8.43925 3.29586C8.40765 3.49548 8.42722 3.72812 8.42722 3.9312L8.42794 5.19937L10.1602 5.19908L11.5594 5.19929L11.5591 3.5658C11.5564 2.53906 10.8239 1.76759 9.86623 1.83416ZM7.38448 7.52671C6.04227 7.64434 6.15332 9.73801 7.49949 9.70933C8.8618 9.52717 8.61172 7.4295 7.38448 7.52671ZM12.5264 7.53972C11.1809 7.69444 11.3167 9.74163 12.6578 9.70762C13.9735 9.53388 13.8602 7.45702 12.5264 7.53972Z"52fill="currentColor"53/>54</svg>55</button>56</div>57</header>58
59<main>60<section class="hero">61<div class="container hero__container">62<div class="hero__content">63<h1 class="hero__title">Лучшая пицца в городе</h1>64<p class="hero__tagline">Доставим менее чем за час</p>65<a class="hero__order btn" href="#pizza">Заказать</a>66</div>67</div>68</section>69
70<section class="toppings">71<div class="container">72<h2 class="toppings__title">Выбрать топпинг:</h2>73
74<button class="toppings__btn">75<span>Выбрать топпинг</span>76<svg77class="toppings__btn-arrow"78viewBox="0 0 20 21"79fill="none"80xmlns="http://www.w3.org/2000/svg"81>82<path d="M10 15.5L15.1962 6.5H4.80385L10 15.5Z" fill="#2C2826" />83</svg>84</button>85
86<form class="toppings__form" id="toppings">87<ul class="toppings__list"></ul>88</form>89</div>90</section>91
92<section class="pizza" id="pizza">93<div class="container">94<h2 class="pizza__title"></h2>95
96<ul class="pizza__list"></ul>97</div>98</section>99</main>100
101<footer class="footer">102<div class="container">103<img104class="footer__logo"105src="./images/logo-footer.svg"106alt="Логотип компании Go-Go Pizza"107/>108<p class="footer__copyright">© go go pizza, 2024</p>109<ul class="footer__developers">110<li class="footer__developer">111Designer:
112<a113class="footer__link"114href="https://t.me/Mrshmallowww"115target="_blank"116rel="noopener"117>Anastasia Ilina</a118>119</li>120</ul>121</div>122</footer>123
124<div class="modal modal-pizza">125<div class="modal__main modal-pizza__main"></div>126</div>127
128<div class="modal modal-cart">129<div class="modal__main modal-cart__main">130<div class="modal-cart__block">131<h2 class="modal-cart__title">Корзина</h2>132
133<ul class="modal-cart__list"></ul>134
135<div class="modal-cart__summary">136<p class="modal-cart__price"></p>137<button class="modal-cart__btn modal-cart__continue" type="button">138Продолжить
139</button>140</div>141</div>142<div class="modal-cart__delivery">143<h2 class="modal-cart__title">Доставка</h2>144
145<form class="modal-cart__form" id="cart">146<fieldset class="modal-cart__fieldset modal-cart__fieldset_text">147<input148class="modal-cart__input"149type="text"150placeholder="Имя"151name="name"152/>153<input154class="modal-cart__input"155type="text"156placeholder="Телефон"157name="phone"158/>159<input160class="modal-cart__input modal-cart__input_address"161type="text"162placeholder="Адрес"163name="address"164/>165</fieldset>166
167<fieldset class="modal-cart__fieldset">168<legend class="modal-cart__legend">Оплата:</legend>169
170<div class="modal-cart__payment">171<label class="modal-cart__payment-label">172<input173class="modal-cart__input-radio"174type="radio"175name="paymentMethod"176value="cash"177checked178/>179Наличными
180</label>181
182<label class="modal-cart__payment-label">183<input184class="modal-cart__input-radio"185type="radio"186name="paymentMethod"187value="credit card"188/>189Картой
190</label>191</div>192</fieldset>193</form>194<div class="modal-cart__summary">195<p class="modal-cart__price"></p>196<div class="modal-cart__btns">197<button class="modal-cart__btn modal-cart__prev" type="button">198Назад
199</button>200<button201class="modal-cart__btn modal-cart__send-order"202type="submit"203form="cart"204>205Заказать
206</button>207</div>208</div>209</div>210
211<button class="modal__close">212<svg213width="20"214height="20"215viewBox="0 0 20 20"216fill="none"217xmlns="http://www.w3.org/2000/svg"218>219<rect220x="14.8333"221y="4"222width="0.851136"223height="15.3204"224transform="rotate(45 14.8333 4)"225fill="#C1AB91"226/>227<rect228x="4"229y="4.60181"230width="0.851136"231height="15.3204"232transform="rotate(-45 4 4.60181)"233fill="#C1AB91"234/>235</svg>236</button>237</div>238</div>239</body>240</html>241