-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
316 lines (297 loc) · 12 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mercedes Benz</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="loader">
<div class="lds-hourglass"></div>
</div>
<header class="header">
<div class="header__right-block">
<button class="btn btn_white" data-modal="">Feedback</button>
</div>
</header>
<div class="sidepanel">
<div class="sidepanel__text"><span>Social Network</span></div>
<div class="sidepanel__divider"></div>
<a href="#" class="sidepanel__icon">
<img src="icons/instagram.svg" alt="instagram" />
</a>
<a href="#" class="sidepanel__icon">
<img src="icons/facebook.svg" alt="facebook" />
</a>
</div>
<div class="preview">
<div class="bgc_blue"></div>
<div class="container">
<div class="tabcontainer">
<div class="tabcontent">
<img src="img/tabs/1.jpg" />
<div class="tabcontent__descr">
The German luxury car-manufacturer has been around for more than a
century, having elegantly drifted the both smooth and rough curves
of automobile history. Responsible for the modern internal
combustion engine's genesis, the 'fathers' of the Mercedes-Benz
brand practically invented the automobile.
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/2.jpg" />
<div class="tabcontent__descr">
Despite the equal share of the two engineer's contribution to the
development of the four-stroke petrol engine, it was Gottlieb
Daimler who garnered more attention that would eventually lead to
world-spread fame
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/3.jpg" />
<div class="tabcontent__descr">
Many years ago when mahogany canes and high-top hats were the
ultimate fashion and social prominence statements, two men by the
names of Karl Benz and Gottlieb Daimler were busy freeing the
world from horse-powered transportation.
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/4.jpg" />
<div class="tabcontent__descr">
The 1886 archetype of the modern engine, their device was not a
result of team-work but of independent and synchronous research
and development. Although both lived in Southern Germany, they
never actually met if historical accounts are to be believed.
</div>
</div>
<div class="tabheader">
<h3>Choose Your Favourite Bogs</h3>
<div class="tabheader__items">
<div class="tabheader__item tabheader__item_active">
Old model
</div>
<div class="tabheader__item">New Model</div>
<div class="tabheader__item">Created</div>
<div class="tabheader__item">Company</div>
</div>
</div>
</div>
<div class="preview__life">Mersedes Benz is best of the among car</div>
</div>
</div>
<div class="divider"></div>
<div class="offer">
<div class="bgc_y"></div>
<div class="container">
<div class="offer__action">
<button data-modal="" class="btn btn_dark">Feedback</button>
</div>
<div class="offer__text">
<h2 class="title">Best Mercedes Models</h2>
<div class="offer__descr">
Mercedes-Benz is a German luxury car company that produces vehicles
known for their opulence and state-of-the-art technology, some
Mercedes luxury SUVs, such as the GLC and GLE, are available as
coupes.
</div>
</div>
</div>
<div class="container">
<div class="offer__slider">
<div class="offer__slider-counter">
<div class="offer__slider-prev">
<img src="icons/left.svg" alt="prev" />
</div>
<span id="current">03</span>
/
<span id="total">04</span>
<div class="offer__slider-next">
<img src="icons/right.svg" alt="next" />
</div>
</div>
<div class="offer__slider-wrapper">
<div class="offer__slider-inner">
<div class="offer__slide">
<img src="img/slider/1.jpg" alt="pepper" />
</div>
<div class="offer__slide">
<img src="img/slider/2.jpg" alt="food">
</div>
<div class="offer__slide">
<img src="img/slider/3.jpg" alt="oil">
</div>
<div class="offer__slide">
<img src="img/slider/4.jpg" alt="paprika">
</div>
</div>
</div>
</div>
<div class="offer__advantages">
<h2>2021 Mercedes-Benz C-Class</h2>
<div class="offer__advantages-text">
The 2021 Mercedes-Benz C-Class finishes in the top half of our
luxury small car rankings. It's powerful and upscale, but it has
so-so handli...
</div>
<h2>2021 Mercedes-Benz CLA-Class</h2>
<div class="offer__advantages-text">
The 2021 Mercedes-Benz CLA offers punchy powertrains, an elegant
interior, and easy-to-use tech features, but it also has a firm ride
and a ..
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="menu">
<h2 class="title">The Last Car Of Mercedes</h2>
<div class="menu__field">
<div class="container">
<!-- <div class="menu__item">
<img src="img/tabs/1.jpg" alt="vegy" />
<h3 class="menu__item-subtitle">2021 Mercedes-Benz C-Class</h3>
<div class="menu__item-descr">
The 2021 Mercedes-Benz C-Class finishes in the top half of our
luxury small car rankings. It's powerful and upscale, but it has
so-so handli...
</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Price:</div>
<div class="menu__item-total"><span>199.000</span> $</div>
</div>
</div> -->
<!-- <div class="menu__item">
<img src="img/tabs/4.jpg" alt="elite" />
<h3 class="menu__item-subtitle">2021 Mercedes-Benz CLA-Class</h3>
<div class="menu__item-descr">
The 2021 Mercedes-Benz CLA offers punchy powertrains, an elegant
interior, and easy-to-use tech features, but it also has a firm
ride and a ..
</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Price:</div>
<div class="menu__item-total"><span>299.000</span> $</div>
</div>
</div>
<div class="menu__item">
<img src="img/tabs/2.jpg" alt="post" />
<h3 class="menu__item-subtitle">2021 Mercedes-Benz SCLA</h3>
<div class="menu__item-descr">
The German luxury car-manufacturer has been around for more than a
century, having elegantly drifted rough curves of automobile.
</div>
<div class="menu__item-divider"></div>
<div class="menu__item-price">
<div class="menu__item-cost">Price:</div>
<div class="menu__item-total"><span>399.000</span> $</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="order">
<div class="container">
<div class="title">Discount For First Client!</div>
<form action="#" class="order__form">
<input required placeholder="First Name" name="name" type="text" class="order__input" />
<input required placeholder="Last Name" name="phone" type="phone" class="order__input" />
<img src="icons/right.svg" alt="right" />
<button data-modal="" class="btn btn_dark btn_min">Feedback</button>
</form>
</div>
</div>
<div class="divider"></div>
<div class="promotion">
<div class="bgc_y"></div>
<div class="container">
<div class="promotion__text">
<div class="title">Lorem ipsum dolor sit.</div>
<div class="promotion__descr">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam,
adipisci ducimus! In maiores fugiat consectetur labore, obcaecati
aliquam eaque eum explicabo quidem laudantium. Quam vitae odio,
itaque qui dolorem iste maxime aliquid vero error blanditiis enim
iusto dicta rerum ex assumenda soluta magni, ab cupiditate tenetur
laboriosam fugiat exercitationem. Accusantium nihil iure quisquam
reprehenderit incidunt autem quas dignissimos? Perspiciatis
laboriosam porro rerum animi deleniti officia. <span>20%!</span>
<br /><br />
Discount Will Finish 11 August
</div>
</div>
<div class="promotion__timer">
<div class="title">Осталось до конца акции:</div>
<div class="timer">
<div class="timer__block">
<span id="days">90</span>
дней
</div>
<div class="timer__block">
<span id="hours">08</span>
часов
</div>
<div class="timer__block">
<span id="minutes">11</span>
минут
</div>
<div class="timer__block">
<span id="seconds">01</span>
секунд
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="bg_content">
<div class="about_content1 container">
<div class="about_left">
<p>Eum ipsam laborum deleniti <span>velit pariatur architecto aut nihil</span></p>
<p class="text-acc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua. Duis aute irure dolor in reprehenderit</p>
<button class="accordion"><span>01</span>Non consectetur a erat nam at lectus urna duis?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion"><span>02</span>Non consectetur na duis?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion"><span>03</span>Non consectetur a lectus urna duis?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="about_right">
<img src="./img/acc.png" width="100%" alt="">
</div>
</div>
</div>
<footer class="footer"></footer>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div data-close="" class="modal__close">×</div>
<div class="modal__title">We will answer you InshaAllah!</div>
<input required placeholder="Your Name" name="name" type="text" class="modal__input" />
<input required placeholder="Your Mobile Phone" name="phone" type="phone" class="modal__input" />
<button class="btn btn_dark btn_min">Call Me</button>
</form>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>