starbuzz/index.html at main · daridar/starbuzz · GitHub

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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="en">
<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">
    <title> Starbuzz | Головна сторінка</title>
    <link rel = "stylesheet"  href="mainfile.css">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Noto+Serif&display=swap" rel="stylesheet">
    <link rel="icon" type="img/png" sizes="32x32" href="img/favicon-32x32.png">
    <style>
    </style>
</head>
<body>
<header class="header">
    <div class="header_container">
        <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt="logo"></a><h1 id="logo-name">Starbuzz</h1></div>
        <div class="header_menu menu">
            <div class="menu_icon">
                <img src="img/menu.png"></im>
            </div>
            <nav class="navbar nav_container">
                <ol class="center_row">
                    <li><a href="../index.html" class="menu__item current" target="_blank">Головна</a></li>
                    <li>
                        <a href="./pages/about.html" class="menu__item">About</a>
                        <span class="menu_arrow"></span>
                        <ul class="menu_sub-list">
                            <li><a href="#" class="menu_sub-link" target="_blank">Філософія</a></li>
                            <li><a href="#" class="menu_sub-link" target="_blank">Партнери</a></li>
                            <li><a href="#" class="menu_sub-link" target="_blank">Контакти</a></li>
                        </ul>
                    </li>
                <li><a href="./pages/сaffeine.html" class="menu__item" target="_blank">Про кофеїн</a></li>
                <li><a href="./pages/table.html" id="table" class="menu__item" target="_blank">Афіша</a></li>
                </ol>
                <div class="icons">
                    <div class="search" id="search-btn"><img src="./img/search.png" alt="search"></div>
                    <div class="shopping" id="card-btn"><a href="#popup"><img src="./img/shopping-cart.png" alt="yourcart"></a><span>0</span></div>
                </div>
            </nav>
    </div>
    </div>
</header>
<section class="container cafebg">
    <div class="content">
        <h1>Starbuzz</h1>
        <p><i>"Наша кава  - вишуканість,  яку слід спробувати кожному"</i></p>
        <p class="menu_item"><a href="./pages/about.html" target="_blank" class="name">Більше про нас</a></p>
    </div>
</section>
<section class="intro">
    <div class="intro-coffee active-block">
        <h1 class="heading">Starbuzz</h1>
        <p class="title_p">Ми зібрали найкращі смаки кави з усього світу!</p>
        <p><i class="down"></i></p>
    </div>
</div>
</section>
<section class="buy-pr container">
    <h2 class="heading">Premium coffee blends for everyone</h2>
        <h3 class="heading2">Бронюйте та купуйте якісну та смачну каву саме у нас!</h3>
        <div class="grid">
            <div class="buy-coffee">
            <img class="starpic" src="./img/blonde.png" alt="">
                <h4 class="heading3">Starbucks Blonde Espresso Roast</h4>
                <h3><span>₴ 155</span></h3>
                <div class="roast">
            <img class="typeroast" src="./img/orange-point.svg" alt="">
                <h4 class="heading3">Світле обсмажування</h4>
                </div>
            <p class="p">Отримуйте задоволення від нашого еспресо найсвітлішого ступеня обсмажування.</p>
            <p class="menu_item1 add-cart"><a href="#" class="name">Додати</a></p>
        </div>
        <div class="buy-coffee">
            <img class="starpic" src="./img/holiday.png" alt="">
                <h4 class="heading3">Starbucks Holiday Blend</h4>
                <h3><span>₴ 144</span></h3>
                    <div class="roast">
                    <img class="typeroast" src="./img/brown-point.svg" alt="">
                <h4 class="heading3">Середнє обсмажування</h4>
                    </div>
            <p class="p">Насолодіться особливим блендом солодких смаків з трав’яними та кленовими нотками.</p>
            <p class="menu_item1 add-cart"><a href="#" class="name">Додати</a></p>
        </div>
    <div class="buy-coffee">
        <img class="starpic" src="./img/house.png" alt="">
            <h4 class="heading3">Starbucks House Blend</h4>
            <h3><span>₴ 160</span></h3>
            <div class="roast">
                <img class="typeroast" src="./img/brown-point.svg" alt="">
            <h4 class="heading3">Середнє обсмажування</h4>
            </div>
            <p class="p">Збалансований смак горіхів і какао, який розкривається завдяки обсмажуванню.</p>
            <p class="menu_item1 add-cart"><a href="#" class="name">Додати</a></p>
    </div>
    <div class="buy-coffee special">
        <img class="starpic" src="./img/roast blend.png" alt="">
            <h4 class="heading3">Dark Espresso Roast</h4>
            <h3><span>₴ 175</span></h3>
            <div class="roast">
                <img class="typeroast" src="./img/purple-point.svg" alt="">
            <h4 class="heading3">Темне обсмажування</h4>
            </div>
            <p class="p">Для цього вишуканого еспресо характерний розкішний карамельний присмак.</p>
            <p class="menu_item1 add-cart"><a href="#" class="name">Додати</a></p>
    </div>
        </div>
        <div id="popup" class="popup">
            <div class="popup_body">
                <div class="popup_content">
                    <div class="popup_header">
                        <a href="#close" title="Close" class="popup_close">×</a>
                        <h5 class="product_title">ТОВАР</h5>
                        <h5 class="price">ЦІНА</h5>
                        <h5 class="quantity">КІЛЬКІСТЬ</h5>
                        <h5 class="total">РАЗОМ</h5>
                    </div>
                    <div class="products">

                    </div>
<div class="container-form">
    <form class="main_form main_form_1" action="#">
        <div class="title"><h2>Оформлення online замовлення</h2></div>
<fieldset class="forms">
            <legend>Контактна інформація</legend>
            <div class="columns">
            <div class="part">
            <label for="surname">Прізвище<span>*</span></label>
            <input class="input_det" type="text" id="surname" name="name" title="Введіть ваше прізвище (з великої літери)" placeholder="Ваше прізвище" required>
            </div>
            <div class="part">
            <label for="myname">Ім'я<span>*</span></label>
            <input class="input_det" type="text" id="myname" name="name" title="Введіть ваше ім'я (з великої літери)" placeholder="Ваше ім'я" required>
            </div>
            <div class="part">
            <label for="myemail">Email</label>
            <input class="input_det" type="email" id="myemail" name="email" title="Введіть ваш email" placeholder="Ваш email">
            </div>
            <div class="part">
            <label for="phone">Телефон<span>*</span></label>
            <input class="input_det" type="tel" id="phone" name="phone" title="Введіть ваш номер телефону" placeholder="333-33-33" pattern="[0-9]{3}-[0-9]{2}-[0-9]{2}" required>
        </div>
        </div>
        </fieldset>
<div class="buttons">
        <button type="submit" class="btn-sub">Оформити замовлення</button>
        <button type="submit" class="btn-sub">Очистити</button>
</div>
    </form>
</div>
    </div>

                </div>
            </div>
        </div>
</section>
<section class="menu_coffee">
    <div class="coffe-img container">
        <h2 class="heading" id="menu">Напої кафе Starbuzz</h2>
        <div class="row">
         <div class="col">
                <div class="drink">
                    <img src="img/milk-mix.jpg" alt="milk-mix">
                 <div class="title_coffee">
                 <h3>HOME MIXTURE<span>$1,49</span></h3>
                 <p>М'яка, нетерпка суміш різних сортів кави з Мексики, Болівії і Гватемали.</p>
                 <p>Вже куштували? Оцініть напій</p>
                 <div class="rating" data-total-value="0">
                     <div class="rating_item" data-item-value="5" ="Чудово!">★</div>
                     <div class="rating_item" data-item-value="4">★</div>
                     <div class="rating_item" data-item-value="3">★</div>
                     <div class="rating_item" data-item-value="2">★</div>
                     <div class="rating_item" data-item-value="1">★</div>
                 </div>
             </div>
             </div>
             </div>
         <div class="col">
                <div class="drink">
                 <img src="img/cappuccino.jpg" alt="cappuccino">
              <div class="title_coffee">
                 <h3>КАПУЧИНО<span>$ 1,89</span></h3>
                 <p>Суміш запашного еспрессо та кип'яченого молока з додаванням білосніжної піни.</p>
                 <p>Вже куштували? Оцініть напій</p>
                 <div class="rating" data-total-value="0">
                     <div class="rating_item" data-item-value="5">★</div>
                     <div class="rating_item" data-item-value="4">★</div>
                     <div class="rating_item" data-item-value="3">★</div>
                     <div class="rating_item" data-item-value="2">★</div>
                     <div class="rating_item" data-item-value="1">★</div>
                 </div>
             </div>
             </div>
          </div>
          <div class="col">
             <div class="drink">
                 <img src="img/moco.jpg" alt="moco">
              <div class="title_coffee">
              <h3>МОККО<span>$2,3</span></h3>
              <p>М'яка, нетерпка суміш різних сортів кави з Мексики, Болівії та Гватемали.</p>
              <p>Вже куштували? Оцініть напій</p>
                 <div class="rating" data-total-value="0">
                     <div class="rating_item" data-item-value="5">★</div>
                     <div class="rating_item" data-item-value="4">★</div>
                     <div class="rating_item" data-item-value="3">★</div>
                     <div class="rating_item" data-item-value="2">★</div>
                     <div class="rating_item" data-item-value="1">★</div>
                 </div>
             </div>
         </div>
         </div>
         <div class="col">
          <div class="drink">
              <img src="img/iced-coffee.jpg" alt="iced-coffee">
           <div class="title_coffee">
              <h3>АЙС-КАВА<span>$ 1,7</span></h3>
              <p>Ароматний напій зі свіжого еспресо, яскравих спецій, молока та з додаванням льоду.</p>
              <p>Вже куштували? Оцініть напій</p>
                 <div class="rating" data-total-value="0">
                     <div class="rating_item" data-item-value="5">★</div>
                     <div class="rating_item" data-item-value="4">★</div>
                     <div class="rating_item" data-item-value="3">★</div>
                     <div class="rating_item" data-item-value="2">★</div>
                     <div class="rating_item" data-item-value="1">★</div>
                 </div>
          </div>
         </div>
         </div>
       </div>
      <a class="menu_item menu_item_1" href="#" title="Забронювати">Наше меню!</a>
</div>
</section>
<section class="order-coffee">
    <div class="row1">
        <div class="content-coffee">
            <h1 class="heading head_take_away">Кава takeaway!</h1>
            <h3 class="heading3">Насолоджуйтеся кавою Starbuzz вдома, в офісі чи на відпочинку. Вразьте своїх рідних та близьких нашою кавою!</h3>
            <a class="menu_item menu_item_1 popup_link" href="#popup" title="Замовити">Замовити</a>
        </div>
        <div class="image-coffee">
            <img src="./img/coffee-takeaway.jpg" alt="">
        </div>
    </div>
</section>

<section class="news">
    <div class="columns1">
        <div class="part1">
            <img src="./img/новорічна кава.jpg" alt="coffee">
        </div>
        <div class="part1">
            <div class="container-form">
                <form class="main_form" action="#">
                    <fieldset class="forms">
                        <legend>Підписка на новини</legend>
                            <p class="p">Хочете бути в курсі подій? Підпишіться на кавові новини!</p>
                        <div class="columns1">
                            <div class="part1">
                                <label for="email">Email</label>
                                <input class="input_det" type="email" id="email" title="Вкажіть свій email" placeholder="Введіть Ваш email">
                            </div>
                            <div class="part1 subsc">
                            <div class="buttons">
                                <button type="submit" class="floated button">Підписатися</button>
                            </div>
                            </div>
                        </div>
                        <div class="columns1">
                            <div class="inputfield part1">
                                <label for="pack" class="check">
                                <input type="checkbox" id="pack" class="custom-checkbox" name="number" value="one">
                                <span class="checkmark"></span>
                                </label>
                            <div class="part1">
                                <p class="p">Заповнюючи цю форму, Ви погоджуєтеся з нашою <a href="#" class="p">політикою конфіденціальності</a></p>
                            </div>
                        </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="container-footer">
      <ul class="flex-row flex-links">
        <li><a href="#h">Головна</a></li>
        <li><a href="#about">Про нас</a></li>
        <li><a href="#services">Послуги</a></li>
        <li><a href="#team">Партнери</a></li>
        <li><a href="#contact-us">Контакти</a></li>
      </ul>
      <ul class="flex-row">
        <li>
            <a href="https://www.instagram.com/" title="Instagram" target="_blank">
                <img src="./img/icons/instagram.png" alt="Ми в Instagram!">
            </a>
        </li>
        <li>
            <a href="https://www.facebook.com/" title="Facebook" target="_blank">
                <img src="./img/icons/facebook (1).png" alt="Ми в Facebook!">
            </a>
        </li>
        <li>
            <a href="mailto:starbuzzcafe@gmail.com?subject=Important" title="Email">
                <img src="./img/icons/email.png" alt="Напишіть нам!">
            </a>
        </li>
        <li>
            <a href="skype:skypename?chat" title="Skype(chat)">
                <img src="./img/icons/skype.png" alt="Напишіть нам в Skype!">
            </a>
        </li>
        <li>
            <a href="#" title="Twitter">
                <img src="./img/icons/twitter.png" alt="Напишіть нам в Twitter!">
            </a>
        </li>
        <li>
            <a href="callto:+0689584521" title="Phone number">
                <img src="./img/icons/call.png" alt="Зателефонуйте нам!">
            </a>
        </li>
      </ul>
    </div>
  </footer>
</body>
<script src="script.js"></script>
</html>