-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
385 lines (385 loc) · 15.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
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
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!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" />
<link rel="stylesheet" href="css/normalyze.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/media.css" />
<script defer src="./js/script.js"></script>
<title>Portfolio</title>
</head>
<body>
<header class="header">
<div class="container header__container">
<a class="logo">Company</a>
<div class="header__right">
<button class="button-reset header__search" arial-label="Search">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11.7666"
cy="11.7666"
r="8.98856"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M18.0183 18.4851L21.5423 22"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<nav class="header__nav nav">
<ul class="list-reset nav__list">
<li class="nav__item">
<a href="#" class="nav__link">Portfolio</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Team</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Blog</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1 class="hero__title">We produce the best products</h1>
<p class="hero__description">
Mattis quam, lectus et justo amet, tortor, lectus dapibus est.
Habitasse efficitur sodales vel est.
</p>
<button class="button-reset button button--light">Button</button>
</div>
</section>
<section class="about">
<div class="container">
<div class="about__top">
<div class="about__col">
<ul class="list-reset about__list">
<li class="about__item">
<div class="complited">
<div class="complited__value">20,000</div>
<div class="complited__description">complited projects</div>
</div>
</li>
<li class="about__item">
<div class="complited">
<div class="complited__value">10,000</div>
<div class="complited__description">prototypes</div>
</div>
</li>
<li class="about__item">
<div class="complited">
<div class="complited__value">347</div>
<div class="complited__description">
Lorem ipsum dolor sit.
</div>
</div>
</li>
</ul>
</div>
<div class="about__col">
<h2 class="about__title">
Amet, mattis dapibus malesuada arcu dapibus nec efficitur
et dictum. In sit odio. Tempus leo, dictum.
</h2>
<div class="about__text">
<p class="about__description">
Amet, mattis dapibus malesuada arcu dapibus nec efficitur
et dictum. In sit odio. Tempus leo, dictum. Sit
mattis mattis lorem cursus velit sit sed et vitae quam,
sed nulla dapibus venenatis odio.
</p>
<p class="about__description">
Venenatis sapien aenean adipiscing lacinia nec lacinia lacinia
et quam, ultricies. Dictum. Ipsum sodales sit id nec
sed sodales mattis mollis quis, pellentesque
habitasse ex.
</p>
</div>
</div>
</div>
<div class="about__video">
<video
src="./img/video.mp4"
poster="./img/poster.jpg"
muted
preload="metadata"
playsinline
></video>
<button class="button-reset about__play" arial-label="Play video">
<svg
width="100"
height="100"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="50" cy="50" r="50" />
<path
d="M63 50L44.25 62.9904L44.25 37.0096L63 50Z"
fill="#1D1D1F"
/>
</svg>
</button>
</div>
</div>
</section>
<section class="portfolio">
<h2 class="visually-hidden">portfolio</h2>
<div class="container">
<ul class="list-reset portfolio__list">
<li class="portfolio-item grid">
<div class="portfolio-item__col">
<h3 class="portfolio-item__title">Et odio</h3>
<p class="portfolio-item__description">
Mauris eget nec nulla dolor ex. Sodales luctus
pellentesque cras ornare lorem luctus lectus sed consectetur
quam, est. Libero, odi
</p>
<button class="button-reset button button--dark">Button</button>
</div>
<div class="portfolio-item__col">
<img
src="./img/port1.jpg"
alt="Portfolio Et odio"
class="portfolio-item__image"
/>
</div>
</li>
<li class="portfolio-item portfolio-item-reverse grid">
<div class="portfolio-item__col">
<h3 class="portfolio-item__title">Integer dapibus dictum</h3>
<p class="portfolio-item__description">
it pulvinar tempus amet dolor dui vulputate tortor,
luctus lorem in nunc eleifend ipsum justo
et venenatis dictumst.
</p>
<button class="button-reset button button--dark">Button</button>
</div>
<div class="portfolio-item__col">
<img
src="./img/port2.jpg"
alt="Portfolio Integer dapibus dictum"
class="portfolio-item__image"
/>
</div>
</li>
</ul>
</div>
</section>
<section class="quote">
<div class="container">
<h2 class="quote__title">Quoute</h2>
<blockquote class="quote__content">
<p class="quote__text">
Accumsan vulputate efficitur in amet, vestibulum ornare morbi
accumsan leo, est. Consectetur ultricies. Sapien est. Dictumst.
Sapien habitasse interdum in amet, lectus molestie
vel ut. Malesuada efficitur mattis id mattis aenean
interdum lectus quam, dapibus nec augue vulputate leo, ornare
elit.
</p>
<cite class="quote__author">
Alex Lee / <span>Co-founder & SEO</span>
</cite>
</blockquote>
</div>
</section>
<section class="services">
<h2 class="visually-hidden">Services</h2>
<img
src="./img/services.jpg"
alt="services image"
class="services__image"
aria-hidden="true"
/>
<div class="container">
<ul class="list-reset services__list">
<li class="services-item grid">
<div class="services-item__col">
<h3 class="services-item__title">Branding</h3>
</div>
<div class="services-item__col">
<p class="services-item__description">
Quam, tortor, interdum consectetur eleifend integer et.
Accumsan vulputate efficitur in amet, vestibulum ornare
morbi accumsan leo, est. Consectetur ultricies.
</p>
</div>
</li>
<li class="services-item grid">
<div class="services-item__col">
<h3 class="services-item__title">Web-apps</h3>
</div>
<div class="services-item__col">
<p class="services-item__description">
Malesuada efficitur mattis id mattis aenean interdum
lectus quam, dapibus nec augue vulputate leo, ornare elit.
Pulvinar sed quam, arcu pulvinar nisi ipsum quis, sodales
molestie ex.
</p>
</div>
</li>
<li class="services-item grid">
<div class="services-item__col">
<h3 class="services-item__title">Design</h3>
</div>
<div class="services-item__col">
<p class="services-item__description">
Cras amet, sed sapien orci, leo, sit ornare risus tortor, ex.
Mauris non orci, sed elit. Cursus ex. Aenean ipsum dolor augue
tempus et molestie ipsum adipiscing leo, sit interdum
venenatis odio.
</p>
</div>
</li>
<li class="services-item grid">
<div class="services-item__col">
<h3 class="services-item__title">Strategy</h3>
</div>
<div class="services-item__col">
<p class="services-item__description">
Quam, tortor, interdum consectetur eleifend integer et.
Accumsan vulputate efficitur in amet, vestibulum ornare
morbi accumsan leo, est. Consectetur ultricies.
</p>
</div>
</li>
</ul>
</div>
</section>
</main>
<footer>
<div class="container grid">
<div class="footer__col">
<a class="logo footer__logo">Company</a>
<address class="footer__address">
Dorivit BV, Monitorweg 1, Almere 1322BJ, Netherlands
</address>
<ul class="list-reset footer__social social">
<li class="social__item">
<a
href="#"
class="social__link"
target="_blank"
aria-label="Facebook"
><svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 0.000488281C8.95431 0.000488281 0 8.95479 0 20.0005C0 31.0462 8.95431 40.0005 20 40.0005C31.0457 40.0005 40 31.0462 40 20.0005C40 8.95479 31.0457 0.000488281 20 0.000488281ZM22.0846 20.879V31.7601H17.5826V20.8794H15.3333V17.1297H17.5826V14.8785C17.5826 11.8195 18.8526 10.0005 22.461 10.0005H25.4651V13.7506H23.5873C22.1827 13.7506 22.0897 14.2746 22.0897 15.2526L22.0846 17.1293H25.4863L25.0883 20.879H22.0846Z"
fill="white"
/>
</svg>
</a>
</li>
<li class="social__item">
<a
href="#"
class="social__link"
target="_blank"
aria-label="Telegram"
><svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 40.0005C31.0457 40.0005 40 31.0462 40 20.0005C40 8.95479 31.0457 0.000488281 20 0.000488281C8.95431 0.000488281 0 8.95479 0 20.0005C0 31.0462 8.95431 40.0005 20 40.0005ZM16.3333 29.1672C16.8198 29.1672 17.0421 28.9507 17.3107 28.6892L17.3333 28.6672L19.7356 26.3313L24.7333 30.0237C25.6531 30.5311 26.3169 30.2684 26.546 29.1697L29.8268 13.7092C30.1627 12.3625 29.3135 11.7517 28.4336 12.1512L9.1686 19.5797C7.85358 20.1072 7.86125 20.8408 8.9289 21.1677L13.8727 22.7108L25.3182 15.4899C25.8585 15.1623 26.3544 15.3384 25.9474 15.6997L16.6738 24.0684L16.6737 24.0683L16.6737 24.0685L16.6733 24.0688L16.6736 24.069L16.3333 29.1672Z"
fill="white"
/></svg
></a>
</li>
<li class="social__item">
<a
href="#"
class="social__link"
target="_blank"
aria-label="Google"
><svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 20.0005C0 8.95479 8.95431 0.000488281 20 0.000488281C31.0457 0.000488281 40 8.95479 40 20.0005C40 31.0462 31.0457 40.0005 20 40.0005C8.95431 40.0005 0 31.0462 0 20.0005ZM16.34 19.4291V21.6005H19.9439C19.7987 22.5324 18.8546 24.3329 16.34 24.3329C14.1704 24.3329 12.4003 22.5414 12.4003 20.3338C12.4003 18.1262 14.1704 16.3348 16.34 16.3348C17.5746 16.3348 18.4007 16.8595 18.8727 17.3119L20.5975 15.6562C19.49 14.6248 18.0557 14.0005 16.34 14.0005C12.8269 14.0005 9.98557 16.8324 9.98557 20.3338C9.98557 23.8353 12.8269 26.6672 16.34 26.6672C20.0075 26.6672 22.4403 24.0976 22.4403 20.4786C22.4403 20.0624 22.3949 19.7457 22.3404 19.4291H16.34ZM28.1412 19.4291H29.9567V21.2386H28.1412V23.0481H26.3256V21.2386H24.51V19.4291H26.3256V17.6195H28.1412V19.4291Z"
fill="white"
/>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__col">
<h2 class="footer__title">
Id sodales interdum dui mollis non in odio
</h2>
<form action="#" class="footer__form">
<input
type="email"
name="email"
class="footer__input"
placeholder="E-mail"
/>
<button
class="button-reset footer__button"
aria-label="Send E-mail"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 5L15 12L8 19"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</form>
</div>
</div>
</footer>
</body>
</html>