-
Notifications
You must be signed in to change notification settings - Fork 0
/
work.html
111 lines (90 loc) · 4.81 KB
/
work.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Work · Juan Carlos Prada · Digital Graphic Designer">
<meta name="description" content="Interface, illustration and online media selected works">
<meta name="author" content="Juan Carlos Prada">
<meta name="keywords" content="graphic design, illustration, UI, UX, visual design, interface">
<meta property="og:title" content="Juan Carlos Prada · Digital Graphic Designer">
<meta property="og:description" content="Graphic designer from Bogotá, Colombia">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Juan Carlos Prada · Digital Graphic Designer">
<meta property="og:url" content="https://juanprada.co">
<meta property="og:image" content="https://juanprada.co/assets/images/og.png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<title>Work · Juan Carlos Prada · Digital Graphic Designer</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/css3-mediaqueries.min.js"></<script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<nav>
<a class="main-menu-link active-link" href="#">Work</a>
<h1>
<a href="https://juanprada.co">
<svg width="100%" height="100%" viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M86,0L0,0L0,86L86,86L86,0ZM52.916,71.727L59.27,71.727L59.27,62.978L64.846,62.978L67.689,60.134L67.689,14.144L52.916,14.144L52.916,71.727ZM59.27,19.216L61.388,19.216L61.388,57.906L59.27,57.906L59.27,19.216ZM33.905,68.884L33.91,14.146L27.611,14.146L27.611,66.657L25.494,66.657L25.494,43.994L19.195,43.994L19.195,71.729L31.066,71.729L33.905,68.884ZM47.957,14.147L50.792,16.982L50.792,41.88L44.444,41.88L44.444,19.219L42.384,19.219L42.384,66.658L44.444,66.658L44.444,43.997L50.792,43.997L50.792,71.73L38.87,71.73L36.033,68.892L36.033,14.147L47.957,14.147Z"/>
</svg>
</a>
</h1>
<a class="main-menu-link" href="info">Info</a>
</nav>
</header>
<section class="gallery">
<!-- Interface -->
<div class="project-list">
<div class="project-links">
<ul>
<li><a class="link-canasta" href="work/la-canasta"><h4>La Canasta <span>Website Concept</span></h4></a></i>
<li><a class="link-vibe" href="work/vibe"><h4>Vibe Co-Living <span>Web App Concept</span></h4></a></i>
<li><a class="link-amazonas" href="work/destino-amazonas"><h4>Destino Amazonas <span>Landing Page Concept</span></h4></a></i>
</ul>
</div>
<div class="project-thumbnail interface">
</div>
</div>
<div class="horizontal-line">
</div>
<!-- Illustration -->
<div class="project-list">
<div class="project-links">
<ul>
<li><a class="link-sunrise" href="work/the-last-sunrise"><h4>The Last Sunrise <span>Digital Illustration</span></h4></a></i>
<li><a class="link-avalanche" href="work/avalanche"><h4>Avalanche <span>Digital Illustration</span></h4></a></i>
<li><a class="link-float" href="work/i-could-float-here-forever"><h4>I Could Float Here Forever <span>Digital Illustration</span></h4></a></i>
</ul>
</div>
<div class="project-thumbnail illustration">
</div>
</div>
<div class="horizontal-line">
</div>
<!-- Online Media -->
<div class="project-list">
<div class="project-links">
<ul>
<li><a class="link-nba" href="work/nba-league-pass"><h4>NBA League Pass <span>Online Media + OOH Banners</span></h4></a></i>
<li><a class="link-olympic" href="work/olympic-channel"><h4>Olympic Channel <span>Online Media</span></h4></a></i>
<li><a class="link-kitkat" href="work/kitkat-colombia"><h4>KitKat Colombia <span>Online Media</span></h4></a></i>
</ul>
</div>
<div class="project-thumbnail online-media">
</div>
</div>
</section>
<footer>
<nav>
<a href="mailto:[email protected]">[email protected]</a>
<a href="es">Sitio en español</a>
</nav>
</footer>
</div>
<!-- Scripts -->
<script type="text/javascript" src="js/gallery.js"></script>
</body>
</html>