-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
492 lines (491 loc) · 29.7 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
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!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/style.min.css" type="text/css">
<title>Cuda</title>
</head>
<body>
<div id="arrowTop" hidden></div>
<header class="header">
<div class="header__inner container">
<div class="header__logo">
<a href=".">
<svg width="118px" height="37px">
<path fill="#fff"
d="M117.385,30.0 L117.23,34.386 C114.840,36.106 112.685,36.987 110.568,36.987 C107.433,36.987 105.443,35.548 104.766,33.473 C102.988,35.590 100.743,36.987 97.525,36.987 C95.81,36.987 93.171,35.812 91.888,33.926 C90.84,34.957 86.83,37.52 81.223,36.987 C78.89,36.946 76.99,35.548 75.421,33.473 C73.643,35.548 71.483,36.987 68.180,36.987 C65.777,36.987 63.888,35.854 62.606,34.23 C57.531,36.373 54.412,36.987 52.344,36.987 C49.126,36.987 47.220,35.674 46.500,33.769 C44.171,35.929 41.715,36.987 38.920,36.987 C35.736,36.987 33.454,35.320 32.620,32.766 C27.821,35.310 23.439,36.797 17.762,36.987 C7.724,37.323 0.982,31.396 0.982,21.42 C0.982,8.927 9.309,0.573 21.681,0.709 C27.702,0.775 31.870,2.760 33.723,4.17 L30.371,11.648 C28.869,10.922 26.47,10.412 23.666,10.412 C17.557,10.412 14.574,14.377 14.404,19.500 C14.227,24.793 17.498,28.298 22.343,28.763 C27.132,29.222 30.553,28.120 32.646,27.199 L34.516,13.993 L44.764,13.993 L42.943,26.825 C42.774,27.968 43.494,28.899 44.552,28.899 C45.568,28.899 46.543,27.968 46.712,26.825 L48.533,13.993 L58.780,13.993 L56.790,28.264 C56.548,30.2 57.159,31.99 60.896,29.586 C60.762,28.785 60.685,27.948 60.685,27.78 C60.685,19.329 65.639,13.443 71.822,13.443 C74.278,13.443 75.929,14.502 77.157,16.196 L78.682,5.144 L88.929,5.144 L85.669,28.434 C85.462,30.47 86.188,31.254 90.171,29.170 C90.79,28.496 90.30,27.797 90.30,27.78 C90.30,19.499 94.984,13.443 101.167,13.443 C103.622,13.443 105.274,14.502 106.502,16.196 L106.799,13.993 L117.46,13.993 L115.13,28.434 C114.802,30.85 115.818,30.381 117.385,30.0 ZM74.278,21.404 C72.288,21.404 70.721,23.437 70.721,25.766 C70.721,27.544 71.652,28.942 73.219,28.942 C75.167,28.942 76.776,26.909 76.776,24.580 C76.776,22.802 75.803,21.404 74.278,21.404 ZM103.622,21.404 C101.632,21.404 100.66,23.437 100.66,25.766 C100.66,27.544 100.997,28.942 102.564,28.942 C104.512,28.942 106.121,26.909 106.121,24.580 C106.121,22.802 105.147,21.404 103.622,21.404 Z" />
</svg>
</a>
</div>
<div class="header__menu">
<div class="header__menu-icon">
<span></span>
</div>
<nav class="header__menu-body">
<ul class="header__menu-list">
<li><a data-goto=".welcome" class="header__menu-link" href="#">HOME</a></li>
<li><a data-goto=".team" class="header__menu-link" href="#">ABOUT</a></li>
<li><a data-goto=".portfolio" class="header__menu-link" href="#">WORK</a></li>
<li><a data-goto=".testimonials" class="header__menu-link" href="#">BLOG</a></li>
<li><a data-goto=".git" class="header__menu-link" href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="welcome section">
<div class="welcome__inner container">
<div class="welcome__title">
Hi there! We are the new kids on the block and we build awesome websites and mobile apps.
</div>
<button class="welcome__button button">WORK WITH US!</button>
</div>
</section>
<section class="services section">
<div class="services__inner container">
<div class="services__title title">
SERVICES WE PROVIDE
</div>
<div class="services__subtitle subtitle">
We are working with both individuals and businesses from all over the globe to create awesome
websites and applications.
</div>
<div class="services__row row">
<div class="services__column column">
<div class="services__column-image image">
<img src="img/services/flag.png" alt="flag">
</div>
<div class="services__column-title">
BRANDING
</div>
<div class="services__column-text">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh.
</div>
</div>
<div class="services__column column">
<div class="services__column-image image">
<img src="img/services/crayon.png" alt="crayon">
</div>
<div class="services__column-title">
DESIGN
</div>
<div class="services__column-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
<div class="services__column column">
<div class="services__column-image image">
<img src="img/services/gears.png" alt="gears">
</div>
<div class="services__column-title">
DEVELOPMENT
</div>
<div class="services__column-text">
At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium.
</div>
</div>
<div class="services__column column">
<div class="services__column-image image">
<img src="img/services/rocket.png" alt="rocket">
</div>
<div class="services__column-title">
ROCKET
</div>
<div class="services__column-text">
Et harum quidem rerum est et expedita distinctio. Nam libero tempore.
</div>
</div>
</div>
</div>
</section>
<section class="team section">
<div class="container">
<div class="team__title title">
MEET OUR BEAUTIFUL TEAM
</div>
<div class="team__subtitle subtitle">
We are a small team of designers and developers, who help brands with big ideas.
</div>
<div class="team__row row">
<div class="team__column column">
<div class="team__column-image image">
<img src="img/team/mugshot.png" alt="mugshot">
</div>
<div class="team__column-title">
ANNE HATHAWAY
</div>
<div class="team__column-subtitle">
CEO / Marketing Guru
</div>
<div class="team__column-text">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna.
</div>
<div class="team__column-links">
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M18.978,8.940 L17.328,8.940 C17.328,8.940 14.14,8.692 14.14,12.184 C14.14,12.931 14.14,13.991 14.14,13.991 L12.15,13.991 L12.21,15.997 L14.13,15.997 L13.984,24.11 L17.13,24.11 L17.13,16.29 L18.752,15.997 L19.376,13.991 L16.981,13.991 L16.981,11.926 C16.981,11.926 16.956,11.10 18.30,11.10 L18.968,11.10 L18.978,8.940 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 32.0,7.162 32.0,15.999 C32.0,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M24.984,11.655 C24.359,11.936 23.688,12.126 22.984,12.212 C23.703,11.774 24.255,11.81 24.515,10.256 C23.842,10.661 23.97,10.955 22.304,11.114 C21.669,10.426 20.764,9.998 19.763,9.998 C17.841,9.998 16.282,11.580 16.282,13.532 C16.282,13.810 16.312,14.79 16.372,14.338 C13.479,14.191 10.913,12.783 9.196,10.644 C8.897,11.167 8.725,11.774 8.725,12.422 C8.725,13.648 9.339,14.730 10.273,15.364 C9.703,15.346 9.166,15.187 8.697,14.922 C8.696,14.937 8.696,14.951 8.696,14.966 C8.696,16.679 9.897,18.108 11.489,18.433 C11.197,18.514 10.889,18.557 10.572,18.557 C10.348,18.557 10.130,18.535 9.917,18.493 C10.360,19.898 11.646,20.920 13.169,20.948 C11.977,21.897 10.477,22.462 8.845,22.462 C8.564,22.462 8.287,22.445 8.15,22.411 C9.555,23.415 11.385,24.1 13.352,24.1 C19.755,24.1 23.257,18.614 23.257,13.942 C23.257,13.789 23.254,13.637 23.247,13.485 C23.927,12.987 24.517,12.364 24.984,11.655 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M21.6,22.978 L21.6,16.577 C21.6,15.179 20.40,14.225 18.819,14.225 C17.886,14.225 17.347,14.868 17.103,15.490 C17.14,15.711 16.991,16.22 16.991,16.333 L16.991,22.978 L14.15,22.978 L14.15,11.987 L16.701,11.987 L17.23,13.109 C17.467,12.399 18.429,11.605 20.250,11.605 C22.470,11.605 24.6,12.900 24.6,16.95 L24.6,22.978 L21.6,22.978 ZM10.567,10.608 C9.441,10.608 8.687,9.892 8.687,8.918 C8.687,7.920 9.438,7.213 10.587,7.213 C11.736,7.213 12.440,7.920 12.464,8.918 C12.464,9.892 11.764,10.608 10.567,10.608 ZM12.6,23.10 L8.995,23.10 L8.995,11.987 L12.6,11.987 L12.6,23.10 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M8.608,12.178 C9.96,12.448 14.846,16.188 15.98,16.327 C15.349,16.466 15.675,16.533 16.3,16.533 C16.331,16.533 16.656,16.466 16.908,16.327 C17.159,16.188 22.909,12.448 23.397,12.178 C23.885,11.907 24.346,11.59 23.450,11.59 L8.555,11.59 C7.659,11.59 8.120,11.907 8.608,12.178 ZM23.604,14.237 C23.50,14.536 17.247,18.205 16.908,18.387 C16.568,18.570 16.331,18.593 16.3,18.593 C15.675,18.593 15.437,18.570 15.98,18.387 C14.758,18.205 8.956,14.536 8.402,14.237 C8.12,14.28 8.15,14.274 8.15,14.463 C8.15,14.653 8.15,22.19 8.15,22.19 C8.15,22.451 8.573,23.7 9.6,23.7 L23.0,23.7 C23.432,23.7 23.990,22.451 23.990,22.19 C23.990,22.19 23.990,14.653 23.990,14.463 C23.990,14.274 23.994,14.28 23.604,14.237 Z" />
</svg></a>
</div>
</div>
<div class="team__column column">
<div class="team__column-image image">
<img src="img/team/mugshot.png" alt="mugshot">
</div>
<div class="team__column-title">
KATE UPTON
</div>
<div class="team__column-subtitle">
Creating Director
</div>
<div class="team__column-text">
Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur.
Excepteur sint occaecat non diam proident.
</div>
<div class="team__column-links">
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 32.0,7.162 32.0,15.999 C32.0,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M24.984,11.655 C24.359,11.936 23.688,12.126 22.984,12.212 C23.703,11.774 24.255,11.81 24.515,10.256 C23.842,10.661 23.97,10.955 22.304,11.114 C21.669,10.426 20.764,9.998 19.763,9.998 C17.841,9.998 16.282,11.580 16.282,13.532 C16.282,13.810 16.312,14.79 16.372,14.338 C13.479,14.191 10.913,12.783 9.196,10.644 C8.897,11.167 8.725,11.774 8.725,12.422 C8.725,13.648 9.339,14.730 10.273,15.364 C9.703,15.346 9.166,15.187 8.697,14.922 C8.696,14.937 8.696,14.951 8.696,14.966 C8.696,16.679 9.897,18.108 11.489,18.433 C11.197,18.514 10.889,18.557 10.572,18.557 C10.348,18.557 10.130,18.535 9.917,18.493 C10.360,19.898 11.646,20.920 13.169,20.948 C11.977,21.897 10.477,22.462 8.845,22.462 C8.564,22.462 8.287,22.445 8.15,22.411 C9.555,23.415 11.385,24.1 13.352,24.1 C19.755,24.1 23.257,18.614 23.257,13.942 C23.257,13.789 23.254,13.637 23.247,13.485 C23.927,12.987 24.517,12.364 24.984,11.655 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M21.6,22.978 L21.6,16.577 C21.6,15.179 20.40,14.225 18.819,14.225 C17.886,14.225 17.347,14.868 17.103,15.490 C17.14,15.711 16.991,16.22 16.991,16.333 L16.991,22.978 L14.15,22.978 L14.15,11.987 L16.701,11.987 L17.23,13.109 C17.467,12.399 18.429,11.605 20.250,11.605 C22.470,11.605 24.6,12.900 24.6,16.95 L24.6,22.978 L21.6,22.978 ZM10.567,10.608 C9.441,10.608 8.687,9.892 8.687,8.918 C8.687,7.920 9.438,7.213 10.587,7.213 C11.736,7.213 12.440,7.920 12.464,8.918 C12.464,9.892 11.764,10.608 10.567,10.608 ZM12.6,23.10 L8.995,23.10 L8.995,11.987 L12.6,11.987 L12.6,23.10 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M8.608,12.178 C9.96,12.448 14.846,16.188 15.98,16.327 C15.349,16.466 15.675,16.533 16.3,16.533 C16.331,16.533 16.656,16.466 16.908,16.327 C17.159,16.188 22.909,12.448 23.397,12.178 C23.885,11.907 24.346,11.59 23.450,11.59 L8.555,11.59 C7.659,11.59 8.120,11.907 8.608,12.178 ZM23.604,14.237 C23.50,14.536 17.247,18.205 16.908,18.387 C16.568,18.570 16.331,18.593 16.3,18.593 C15.675,18.593 15.437,18.570 15.98,18.387 C14.758,18.205 8.956,14.536 8.402,14.237 C8.12,14.28 8.15,14.274 8.15,14.463 C8.15,14.653 8.15,22.19 8.15,22.19 C8.15,22.451 8.573,23.7 9.6,23.7 L23.0,23.7 C23.432,23.7 23.990,22.451 23.990,22.19 C23.990,22.19 23.990,14.653 23.990,14.463 C23.990,14.274 23.994,14.28 23.604,14.237 Z" />
</svg></a>
</div>
</div>
<div class="team__column column">
<div class="team__column-image image">
<img src="img/team/mugshot.png" alt="mugshot">
</div>
<div class="team__column-title">
OLIVIA WILDE
</div>
<div class="team__column-subtitle">
Lead Designer
</div>
<div class="team__column-text">
Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem nesciunt.
</div>
<div class="team__column-links">
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M18.978,8.940 L17.328,8.940 C17.328,8.940 14.14,8.692 14.14,12.184 C14.14,12.931 14.14,13.991 14.14,13.991 L12.15,13.991 L12.21,15.997 L14.13,15.997 L13.984,24.11 L17.13,24.11 L17.13,16.29 L18.752,15.997 L19.376,13.991 L16.981,13.991 L16.981,11.926 C16.981,11.926 16.956,11.10 18.30,11.10 L18.968,11.10 L18.978,8.940 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 32.0,7.162 32.0,15.999 C32.0,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M24.984,11.655 C24.359,11.936 23.688,12.126 22.984,12.212 C23.703,11.774 24.255,11.81 24.515,10.256 C23.842,10.661 23.97,10.955 22.304,11.114 C21.669,10.426 20.764,9.998 19.763,9.998 C17.841,9.998 16.282,11.580 16.282,13.532 C16.282,13.810 16.312,14.79 16.372,14.338 C13.479,14.191 10.913,12.783 9.196,10.644 C8.897,11.167 8.725,11.774 8.725,12.422 C8.725,13.648 9.339,14.730 10.273,15.364 C9.703,15.346 9.166,15.187 8.697,14.922 C8.696,14.937 8.696,14.951 8.696,14.966 C8.696,16.679 9.897,18.108 11.489,18.433 C11.197,18.514 10.889,18.557 10.572,18.557 C10.348,18.557 10.130,18.535 9.917,18.493 C10.360,19.898 11.646,20.920 13.169,20.948 C11.977,21.897 10.477,22.462 8.845,22.462 C8.564,22.462 8.287,22.445 8.15,22.411 C9.555,23.415 11.385,24.1 13.352,24.1 C19.755,24.1 23.257,18.614 23.257,13.942 C23.257,13.789 23.254,13.637 23.247,13.485 C23.927,12.987 24.517,12.364 24.984,11.655 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M21.6,22.978 L21.6,16.577 C21.6,15.179 20.40,14.225 18.819,14.225 C17.886,14.225 17.347,14.868 17.103,15.490 C17.14,15.711 16.991,16.22 16.991,16.333 L16.991,22.978 L14.15,22.978 L14.15,11.987 L16.701,11.987 L17.23,13.109 C17.467,12.399 18.429,11.605 20.250,11.605 C22.470,11.605 24.6,12.900 24.6,16.95 L24.6,22.978 L21.6,22.978 ZM10.567,10.608 C9.441,10.608 8.687,9.892 8.687,8.918 C8.687,7.920 9.438,7.213 10.587,7.213 C11.736,7.213 12.440,7.920 12.464,8.918 C12.464,9.892 11.764,10.608 10.567,10.608 ZM12.6,23.10 L8.995,23.10 L8.995,11.987 L12.6,11.987 L12.6,23.10 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M8.608,12.178 C9.96,12.448 14.846,16.188 15.98,16.327 C15.349,16.466 15.675,16.533 16.3,16.533 C16.331,16.533 16.656,16.466 16.908,16.327 C17.159,16.188 22.909,12.448 23.397,12.178 C23.885,11.907 24.346,11.59 23.450,11.59 L8.555,11.59 C7.659,11.59 8.120,11.907 8.608,12.178 ZM23.604,14.237 C23.50,14.536 17.247,18.205 16.908,18.387 C16.568,18.570 16.331,18.593 16.3,18.593 C15.675,18.593 15.437,18.570 15.98,18.387 C14.758,18.205 8.956,14.536 8.402,14.237 C8.12,14.28 8.15,14.274 8.15,14.463 C8.15,14.653 8.15,22.19 8.15,22.19 C8.15,22.451 8.573,23.7 9.6,23.7 L23.0,23.7 C23.432,23.7 23.990,22.451 23.990,22.19 C23.990,22.19 23.990,14.653 23.990,14.463 C23.990,14.274 23.994,14.28 23.604,14.237 Z" />
</svg></a>
</div>
</div>
<div class="team__column column">
<div class="team__column-image image">
<img src="img/team/mugshot.png" alt="mugshot">
</div>
<div class="team__column-title">
ASHLEY GREENE
</div>
<div class="team__column-subtitle">
SEO / Developer
</div>
<div class="team__column-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam.
</div>
<div class="team__column-links">
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M18.978,8.940 L17.328,8.940 C17.328,8.940 14.14,8.692 14.14,12.184 C14.14,12.931 14.14,13.991 14.14,13.991 L12.15,13.991 L12.21,15.997 L14.13,15.997 L13.984,24.11 L17.13,24.11 L17.13,16.29 L18.752,15.997 L19.376,13.991 L16.981,13.991 L16.981,11.926 C16.981,11.926 16.956,11.10 18.30,11.10 L18.968,11.10 L18.978,8.940 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 32.0,7.162 32.0,15.999 C32.0,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M24.984,11.655 C24.359,11.936 23.688,12.126 22.984,12.212 C23.703,11.774 24.255,11.81 24.515,10.256 C23.842,10.661 23.97,10.955 22.304,11.114 C21.669,10.426 20.764,9.998 19.763,9.998 C17.841,9.998 16.282,11.580 16.282,13.532 C16.282,13.810 16.312,14.79 16.372,14.338 C13.479,14.191 10.913,12.783 9.196,10.644 C8.897,11.167 8.725,11.774 8.725,12.422 C8.725,13.648 9.339,14.730 10.273,15.364 C9.703,15.346 9.166,15.187 8.697,14.922 C8.696,14.937 8.696,14.951 8.696,14.966 C8.696,16.679 9.897,18.108 11.489,18.433 C11.197,18.514 10.889,18.557 10.572,18.557 C10.348,18.557 10.130,18.535 9.917,18.493 C10.360,19.898 11.646,20.920 13.169,20.948 C11.977,21.897 10.477,22.462 8.845,22.462 C8.564,22.462 8.287,22.445 8.15,22.411 C9.555,23.415 11.385,24.1 13.352,24.1 C19.755,24.1 23.257,18.614 23.257,13.942 C23.257,13.789 23.254,13.637 23.247,13.485 C23.927,12.987 24.517,12.364 24.984,11.655 Z" />
</svg></a>
<a href="#"><svg width="32px" height="32px">
<path fill="rgb(189, 209, 223)"
d="M15.999,0.0 C24.836,0.0 31.999,7.162 31.999,15.999 C31.999,24.836 24.836,31.999 15.999,31.999 C7.163,31.999 0.0,24.836 0.0,15.999 C0.0,7.162 7.163,0.0 15.999,0.0 Z" />
<path fill="rgb(255, 255, 255)"
d="M8.608,12.178 C9.96,12.448 14.846,16.188 15.98,16.327 C15.349,16.466 15.675,16.533 16.3,16.533 C16.331,16.533 16.656,16.466 16.908,16.327 C17.159,16.188 22.909,12.448 23.397,12.178 C23.885,11.907 24.346,11.59 23.450,11.59 L8.555,11.59 C7.659,11.59 8.120,11.907 8.608,12.178 ZM23.604,14.237 C23.50,14.536 17.247,18.205 16.908,18.387 C16.568,18.570 16.331,18.593 16.3,18.593 C15.675,18.593 15.437,18.570 15.98,18.387 C14.758,18.205 8.956,14.536 8.402,14.237 C8.12,14.28 8.15,14.274 8.15,14.463 C8.15,14.653 8.15,22.19 8.15,22.19 C8.15,22.451 8.573,23.7 9.6,23.7 L23.0,23.7 C23.432,23.7 23.990,22.451 23.990,22.19 C23.990,22.19 23.990,14.653 23.990,14.463 C23.990,14.274 23.994,14.28 23.604,14.237 Z" />
</svg></a>
</div>
</div>
</div>
</div>
</section>
<section class="skills section">
<div class="skills__inner container">
<div class="skills__title title">
WE GOT SKILLS!
</div>
<div class="skills__subtitle subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
<div class="skills__row row">
<div class="skills__column column">
<div class="circle" id="circle-1"></div>
<div class="skills__column-title">
WEB DESIGN
</div>
</div>
<div class="skills__column column">
<div class="circle" id="circle-2"></div>
<div class="skills__column-title">
HTML / CSS
</div>
</div>
<div class="skills__column column">
<div class="circle" id="circle-3"></div>
<div class="skills__column-title">
GRAPHIC DESIGN
</div>
</div>
<div class="skills__column column">
<div class="circle" id="circle-4"></div>
<div class="skills__column-title">
UI / UX
</div>
</div>
</div>
</div>
</section>
<section class="portfolio section">
<div class="container">
<div class="portfolio__title title">
OUR PORTFOLIO
</div>
<div class="portfolio__subtitle subtitle">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet <br>
consectetur, adipisci velit, sed quia non numquam
</div>
<select name="" class="portfolio__select" id="select" onchange="getSelectValue()">
<option value="all" class="portfolio__option option">ALL</option>
<option value="web" class="portfolio__option option">WEB</option>
<option value="apps" class="portfolio__option option">APPS</option>
</select>
<div class="portfolio__row row">
<div class="portfolio__column">
<div class="portfolio__colum-image image">
<img src="img/portfolio/1.png" alt="1">
</div>
<div class="portfolio__column-text text">
Isometric Perspective Mock-Up
</div>
</div>
<div class="portfolio__column">
<div class="portfolio__colum-image image">
<img src="img/portfolio/2.png" alt="2">
</div>
<div class="portfolio__column-text text">
Time Zone App UI
</div>
</div>
<div class="portfolio__column">
<div class="portfolio__colum-image image">
<img src="img/portfolio/3.png" alt="3">
</div>
<div class="portfolio__column-text text">
Viro Media Players UI
</div>
</div>
<div class="portfolio__column">
<div class="portfolio__colum-image image">
<img src="img/portfolio/4.png" alt="4">
</div>
<div class="portfolio__column-text text">
BLOG / MAGAZINE FLAT UI KIT
</div>
</div>
</div>
<button class="portfolio__button button">LOAD MORE PROJECTS</button>
</div>
</section>
<section class="testimonials section">
<div class="container">
<div class="testimonials__title title">
WHAT POEPLE SAY ABOUT US
</div>
<div class="testimonials__text text">
Our clients love us!
</div>
<div class="testimonials__row row">
<div class="testimonials__column">
<div class="testimonials__column-image">
<img src="img/testimonials/mugshot.png" alt="mugshot">
</div>
<div class="testimonials__column-content">
<div class="testimonials__column-text">
“Nullam dapibus blandit orci, viverra gravida dui lobortis eget. Maecenas fringilla urna
eu nisl scelerisque.”
</div>
<div class="testimonials__column-title">
CHANEL IMAN
</div>
<div class="testimonials__column-subtitle">
CEO of Pinterest
</div>
</div>
</div>
<div class="testimonials__column">
<div class="testimonials__column-image">
<img src="img/testimonials/mugshot.png" alt="mugshot">
</div>
<div class="testimonials__column-content">
<div class="testimonials__column-text">
“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis
porta.”
</div>
<div class="testimonials__column-title">
ADRIANA LIMA
</div>
<div class="testimonials__column-subtitle">
Founder of Instagram
</div>
</div>
</div>
<div class="testimonials__column">
<div class="testimonials__column-image">
<img src="img/testimonials/mugshot.png" alt="mugshot">
</div>
<div class="testimonials__column-content">
<div class="testimonials__column-text">
“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis
porta.”
</div>
<div class="testimonials__column-title">
ANNE HATHAWAY
</div>
<div class="testimonials__column-subtitle">
Lead Designer at Behance
</div>
</div>
</div>
<div class="testimonials__column">
<div class="testimonials__column-image">
<img src="img/testimonials/mugshot.png" alt="mugshot">
</div>
<div class="testimonials__column-content">
<div class="testimonials__column-text">
“Phasellus non purus vel arcu tempor commodo. Fusce semper, purus vel luctus molestie,
risus sem cursus neque.”
</div>
<div class="testimonials__column-title">
EMMA STONE
</div>
<div class="testimonials__column-subtitle">
Co-Founder of Shazam
</div>
</div>
</div>
</div>
</div>
</section>
<section class="git section">
<div class="container">
<div class="git__title title">
GET IN TOUCH
</div>
<div class="git__subtitle subtitle">
1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111
</div>
<form action="#" class="git__form">
<div class="git__inputs">
<input class="git__inputs-item" id="name" type="text" placeholder="Your Name" required>
<input class="git__inputs-item" id="email" type="email" placeholder="Your Email" required>
</div>
<div class="git__textarea">
<textarea class="git__textarea-item" id="message" placeholder="Your Message" required></textarea>
</div>
<button class="git__button button" type="submit">SEND MESSAGE</button>
</form>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__links">
<a href="https://www.facebook.com/profile.php?id=100008697765105" class="footer__links-item" target="_blank">
<div class="footer__links-text">Facebook</div>
<div class="footer__links-icon"><img src="img/footer/facebook.svg" alt="facebook logo"></div>
</a>
<a href="https://twitter.com/4xmplme" class="footer__links-item" target="_blank">
<div class="footer__links-text">Twitter</div>
<div class="footer__links-icon"><img src="img/footer/twitter.svg" alt="twitter logo"></div>
</a>
<a href="#" class="footer__links-item" target="_blank">
<div class="footer__links-text">Google+</div>
<div class="footer__links-icon"><img src="img/footer/google+.svg" alt="google+ logo"></div>
</a>
<a href="https://www.linkedin.com/in/andrii-kondratenko-0974a420a/" class="footer__links-item"
target="_blank">
<div class="footer__links-text">LinkedIn</div>
<div class="footer__links-icon"><img src="img/footer/linkedin.svg" alt="linkedin logo"></div>
</a>
<a href="#" class="footer__links-item" target="_blank">
<div class="footer__links-text">Dribbble</div>
<div class="footer__links-icon"><img src="img/footer/dribbble.svg" alt="dribbble logo"></div>
</a>
<a href="https://github.com/4xmplme" class="footer__links-item" target="_blank">
<div class="footer__links-text">GitHub</div>
<div class="footer__links-icon"><img src="img/footer/github.svg" alt="github logo"></div>
</a>
</div>
</div>
</footer>
<script src="js/circles.js"></script>
<script src="js/script.js"></script>
</body>
</html>