Следите за новостями GitVerse в нашем телеграм-канале

Pizza-Go

0
/
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
    <link
10
      rel="preload"
11
      href="./fonts/nunito-v26-cyrillic_latin-regular.woff2"
12
      as="font"
13
      crossorigin
14
    />
15
    <link
16
      rel="preload"
17
      href="./fonts/nunito-v26-cyrillic_latin-600.woff2"
18
      as="font"
19
      crossorigin
20
    />
21
    <link
22
      rel="preload"
23
      href="./fonts/nunito-v26-cyrillic_latin-900.woff2"
24
      as="font"
25
      crossorigin
26
    />
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
        <img
34
          class="header__logo"
35
          src="./images/logo.svg"
36
          alt="Логотип компании Go-Go"
37
          width="164"
38
          height="23"
39
        />
40

41
        <button class="header__cart" aria-label="Открыть корзину">
42
          <svg
43
            class="header__cart-icon"
44
            width="20"
45
            height="20"
46
            viewBox="0 0 20 20"
47
            fill="none"
48
            xmlns="http://www.w3.org/2000/svg"
49
          >
50
            <path
51
              d="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"
52
              fill="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">Лучшая пицца в&nbsp;городе</h1>
64
            <p class="hero__tagline">Доставим менее чем за&nbsp;час</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
            <svg
77
              class="toppings__btn-arrow"
78
              viewBox="0 0 20 21"
79
              fill="none"
80
              xmlns="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
        <img
104
          class="footer__logo"
105
          src="./images/logo-footer.svg"
106
          alt="Логотип компании Go-Go Pizza"
107
        />
108
        <p class="footer__copyright">&copy; go go pizza, 2024</p>
109
        <ul class="footer__developers">
110
          <li class="footer__developer">
111
            Designer:
112
            <a
113
              class="footer__link"
114
              href="https://t.me/Mrshmallowww"
115
              target="_blank"
116
              rel="noopener"
117
              >Anastasia Ilina</a
118
            >
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
              <input
148
                class="modal-cart__input"
149
                type="text"
150
                placeholder="Имя"
151
                name="name"
152
              />
153
              <input
154
                class="modal-cart__input"
155
                type="text"
156
                placeholder="Телефон"
157
                name="phone"
158
              />
159
              <input
160
                class="modal-cart__input modal-cart__input_address"
161
                type="text"
162
                placeholder="Адрес"
163
                name="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
                  <input
173
                    class="modal-cart__input-radio"
174
                    type="radio"
175
                    name="paymentMethod"
176
                    value="cash"
177
                    checked
178
                  />
179
                  Наличными
180
                </label>
181

182
                <label class="modal-cart__payment-label">
183
                  <input
184
                    class="modal-cart__input-radio"
185
                    type="radio"
186
                    name="paymentMethod"
187
                    value="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
              <button
201
                class="modal-cart__btn modal-cart__send-order"
202
                type="submit"
203
                form="cart"
204
              >
205
                Заказать
206
              </button>
207
            </div>
208
          </div>
209
        </div>
210

211
        <button class="modal__close">
212
          <svg
213
            width="20"
214
            height="20"
215
            viewBox="0 0 20 20"
216
            fill="none"
217
            xmlns="http://www.w3.org/2000/svg"
218
          >
219
            <rect
220
              x="14.8333"
221
              y="4"
222
              width="0.851136"
223
              height="15.3204"
224
              transform="rotate(45 14.8333 4)"
225
              fill="#C1AB91"
226
            />
227
            <rect
228
              x="4"
229
              y="4.60181"
230
              width="0.851136"
231
              height="15.3204"
232
              transform="rotate(-45 4 4.60181)"
233
              fill="#C1AB91"
234
            />
235
          </svg>
236
        </button>
237
      </div>
238
    </div>
239
  </body>
240
</html>
241

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.