-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
359 lines (354 loc) · 20.8 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SQUARE | About Me</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/logo-black.png">
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<input type="checkbox" class="navbar__checkbox" id="navcheck">
<div class="navbar__menu">
<label for="navcheck" class="navbar__label">
<div class="navbar__hamburger">
<span class="navbar__hamburger-line"></span>
</div>
</label>
<ul class="navbar__list">
<li class="navbar__item">
<a href="/portfolio.html" class="navbar__link">Portfolio</a>
</li>
<li class="navbar__item">
<a href="/home.html" class="navbar__link">Clients</a>
</li>
<li class="navbar__item">
<a href="/blog.html" class="navbar__link">News</a>
</li>
<li class="navbar__item">
<a href="/about.html" class="navbar__link">About Me</a>
</li>
<li class="navbar__item">
<a href="/contact.html" class="navbar__link">Contact</a>
</li>
</ul>
</div>
<img src="/img/logo.png" alt="Square Logo" class="navbar__logo">
<div class="navbar__social-icons">
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-facebook"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-twitter"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-instagram"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-flickr"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-google-plus"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-envelope"></use>
</svg>
</div>
<!-- MOBILE NAVIGATION START -->
<div class="navbar__mobile-dark-overlay"></div>
<div class="navbar__mobile">
<label for="navcheck" class="navbar__mobile-label">
<span class="navbar__mobile-line"></span>
</label>
<img src="/img/logo.png" alt="Square Logo" class="navbar__mobile-logo">
<ul class="navbar__mobile-list">
<li class="navbar__mobile-item">
<a href="#" class="navbar__mobile-link">Portfolio</a>
</li>
<li class="navbar__mobile-item">
<a href="#" class="navbar__mobile-link">Clients</a>
</li>
<li class="navbar__mobile-item">
<a href="#" class="navbar__mobile-link">News</a>
</li>
<li class="navbar__mobile-item">
<a href="#" class="navbar__mobile-link">About Me</a>
</li>
<li class="navbar__mobile-item">
<a href="#" class="navbar__mobile-link">Contact</a>
</li>
</ul>
<div class="navbar__mobile-social-icons">
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-facebook"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-twitter"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-instagram"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-flickr"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-google-plus"></use>
</svg>
<svg class="navbar__icon">
<use xlink:href="/img/sprite.svg#icon-envelope"></use>
</svg>
</div>
</div>
<!-- MOBILE NAVIGATION END -->
</div>
</nav>
<main class="container">
<div class="about">
<div class="about__image"></div>
<div class="about__text">
<h1 class="about__title">About me</h1>
<div class="about__paragraphs">
<p class="about__paragraph"><span class="u-regular-text">Lorem ipsum dolor sit amet,</span> consectetur adipiscing elit. Vestibulum mollis risus et sem facilisis, eget pulvinar purus
rutrum. <span class="u-regular-text">Vestibulum vitae finibus sem</span>, at feugiat libero. Sed non leo metus. Suspendisse <span class="u-italic-text">condimentum mauris purus</span>, non
finibus nisi sollicitudin ut. Integer pulvinar vestibulum justo ut porttitor.</p>
<p class="about__paragraph">Phasellus dui erat, <span class="u-italic-text">luctus nec convallis lobortis</span>, pulvinar at purus. Aliquam sit amet ligula sapien. Aenean eu
eleifend nisl. Quisque eu eros eros. Quisque hendrerit eleifend ultrices. Aliquam sit amet placerat erat, nec lobortis
tortor. <span class="u-regular-text">Maecenas massa eros, fermentum in mauris nec, interdum rutrum sapien</span>.</p>
<p class="about__paragraph">Phasellus in tincidunt velit. <span class="u-italic-text">Nunc ullamcorper massa sed magna consequat</span>, ut malesuada lacus efficitur. Ut a
sollicitudin nulla, et sollicitudin sapien. Aliquam diam ex, posuere et odio vel, sagittis efficitur magna. <span class="u-regular-text">Maecenas eu
urna id justo sollicitudin pellentesque ut eu est</span>. Aenean nisl ante, consequat sit amet justo a, dignissim tempus
tellus. Duis hendrerit ante arcu, iaculis ultrices lectus fermentum eget. <span class="u-regular-text">Phasellus volutpat finibus ipsum nec
accumsan.</span></p>
<p class="about__paragraph">Aenean laoreet dapibus metus vitae condimentum. <span class="u-regular-text">Aliquam tortor urna, vestibulum et ultrices sed, porttitor sit amet
arcu</span>. Nam mollis, erat a mattis ornare, erat magna ultrices leo, quis interdum erat arcu vitae magna. <span class="u-italic-text">Etiam vitae ex
mattis, vestibulum lorem id, gravida magna. Aenean porta dui a metus convallis volutpat</span>. Maecenas imperdiet tempor dui
non laoreet. Sed ipsum arcu, rutrum eget egestas in, ullamcorper vitae massa. In volutpat dolor ligula, in congue urna
suscipit non. <span class="u-regular-text">Donec eleifend tempus velit eu viverra</span>. Praesent sagittis auctor finibus. <span class="u-regular-text">Proin maximus, nibh eu ultrices
imperdiet, nulla odio consectetur ex, a tempus nisl ante nec urna</span>. Praesent sapien diam, fringilla non molestie ac,
commodo eget lectus. Nunc interdum purus eu auctor volutpat. Aliquam vestibulum a sapien in efficitur. <span class="u-regular-text">Vivamus non dui
velit</span>.</p>
</div>
</div>
<div class="timeline">
<div class="timeline__title">Timeline</div>
<div class="timeline__column">
<h4 class="timeline__years">1995</h4>
<p class="timeline__paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="u-red-text">Vestibulum mollis risus et sem facilisis</span>, eget pulvinar purus
rutrum. <span class="u-regular-text">Vestibulum vitae finibus sem, at feugiat libero</span>.
</p>
</div>
<div class="timeline__column">
<h4 class="timeline__years">1996 - 2000</h4>
<p class="timeline__paragraph">
<span class="u-regular-text">Lorem ipsum dolor</span> sit amet, consectetur adipiscing elit.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Phasellus in tincidunt velit. Nunc ullamcorper massa sed magna consequat, ut malesuada lacus efficitur.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Donec in nibh sit amet mauris lobortis <span class="u-italic-text">sollicitudin in at nibh</span>. Donec rhoncus dui ex, euismod maximus nibh aliquet
vitae. <span class="u-regular-text">Etiam varius purus lobortis nunc consequat placerat</span>.
</p>
</div>
</div>
<div class="timeline timeline--2">
<div class="timeline__column">
<h4 class="timeline__years">2000 - 2006</h4>
<p class="timeline__paragraph">
<span class="u-regular-text">Suspendisse quis eros elit</span>. Pellentesque maximus magna ut enim maximus pharetra. <span class="u-italic-text u-red-text">Proin quis sodales neque, non aliquet
libero</span>
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Maecenas eu eleifend eros.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Aliquam ut mattis augue. Donec <span class="u-regular-text">at lacus in turpis dapibus</span> pellentesque fermentum vel nisl. Donec placerat <span class="u-regular-text">augue vitae
congue semper</span>.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Cras tempor semper malesuada. <span class="u-regular-text">Sed elit odio, fringilla</span> vehicula mollis fringilla, feugiat sit amet ipsum
</p>
</div>
<div class="timeline__column">
<h4 class="timeline__years">2006 - 2011</h4>
<p class="timeline__paragraph">
Aenean laoreet dapibus metus vitae condimentum.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
<span class="u-regular-text">Ut a sollicitudin nulla</span>, et sollicitudin sapien. Aliquam diam ex, posuere et odio vel, <span class="u-italic-text">sagittis efficitur magna</span>.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Quisque placerat velit ut lobortis ullamcorper. Nullam tortor odio, ultrices a <span class="u-red-text">sollicitudin at, malesuada eget quam.
Maecenas neque tortor,</span>
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Donec rhoncus dui ex, euismod maximus nibh aliquet vitae. <span class="u-regular-text">Etiam varius purus lobortis</span> nunc consequat placerat. Duis
congue orci vel odio placerat,
</p>
</div>
<div class="timeline__column">
<h4 class="timeline__years">2011 - 2018</h4>
<p class="timeline__paragraph">
<span class="u-regular-text">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Vestibulum mollis risus et sem facilisis, eget pulvinar purus
rutrum. <span class="u-regular-text">Vestibulum vitae finibus sem, at feugiat libero</span>.
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Phasellus dui erat, luctus nec convallis lobortis, pulvinar at purus. <span class="u-italic-text">Aliquam sit amet ligula sapien.</span>
</p>
<hr class="timeline__sep">
<p class="timeline__paragraph">
Maecenas massa eros, fermentum in mauris nec, <span class="u-regular-text">interdum rutrum sapien.</span>
</p>
</div>
</div>
<div class="about__clients">
<div class="timeline__title timeline__title--gold">Clients</div>
<div class="timeline__column">
<h3 class="about__clients-title">Brands</h3>
<ul class="about__clients-list">
<li class="about__clients-element">
<a href="#" class="about__clients-link">The Coca Cola</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Apple</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">General Motors</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Dolce & Gabbana</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Prada</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Motorolo</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Nike</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Hard Rock Cafe</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Yamaha (Music Divisions)</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">JBL</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">AT&T/Cingular</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">eBay</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">JC Penney</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">MTV</a>
</li>
</ul>
</div>
<div class="timeline__column">
<h3 class="about__clients-title">Publications</h3>
<ul class="about__clients-list">
<li class="about__clients-element">
<a href="#" class="about__clients-link">GQ</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Sportweek</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Harvard Business Review</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Design Bureau</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Nylon</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Synthesis</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">TIME</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Alternative Press</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Guitar Edge</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Guitar World</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">The Atlantan</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Creative Loafing</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Southeast Performer</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">USA Today</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">AFP (stringer)</a>
</li>
<li class="about__clients-element">
<a href="#" class="about__clients-link">Men's Book</a>
</li>
</ul>
</div>
</div>
<div class="about__testimonial">
<div class="about__testimonial-group">
<svg class="about__testimonial-icon">
<use xlink:href="/img/sprite.svg#icon-quote-left"></use>
</svg>
<p class="about__testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis risus et sem facilisis, eget pulvinar purus
rutrum. Vestibulum vitae finibus sem, at feugiat libero.</p>
<h5 class="about__testimonial-name">- John Doe -</h5>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="partners">
<img src="/img/phaseone-logo.png" alt="Phase One" class="partners__image">
<img src="/img/manfrotto-logo.png" alt="Phase One" class="partners__image">
<img src="/img/hasselblad.png" alt="Phase One" class="partners__image">
<img src="/img/broncolor-logo.png" alt="Phase One" class="partners__image">
</div>
<div class="footer__content">
<span class="footer__credits">
Created by 2ndself.com, with
<svg class="footer__heart">
<use xlink:href="/img/sprite.svg#icon-heart"></use>
</svg>
exclusive for theuncreativelab.com
</span>
<span class="footer__copyright">
© 2014 Square. All Rights Reserved.
</span>
</div>
</footer>
</body>
</html>