-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-4.html
174 lines (155 loc) · 7.44 KB
/
work-4.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
<!doctype html>
<html lang="fr">
<head>
<title>Hagen - vcard template</title>
<meta charset="UTF-8">
<meta name="description" content="Hagen - vcard template">
<meta name="keywords" content="personal, portfolio">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Stylesheets -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Google Web fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font icons -->
<link rel="stylesheet" href="icon-fonts/flat-icon/flaticon.css"/>
<link rel="stylesheet" href="icon-fonts/font-awesome/css/all.min.css"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="scroll-animation-on dark-version without-wrapper">
<!-- Preloader -->
<div id="loader" class="preloader">
<div class="loading">
<div class="profile-image">
<img src="images/profile-loader.jpg" alt="">
<svg style="position: absolute;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<circle class="js-circle circle" cx="50" cy="50" r="48" stroke="white" stroke-width="2" fill="none" />
<circle class="js-circle circletwo" cx="50" cy="50" r="48" stroke="white" stroke-width="2" fill="none" />
</svg>
</div>
</div>
</div>
<!-- Preloader End -->
<div class="page-cover">
<div id="page-scroll">
<div class="barba-wrapper" data-barba="wrapper">
<main data-barba="container">
<!-- Page Wrapper -->
<div class="container">
<div class="page-wrapper">
<header id="fixed">
<div class="hamburger hamburger--elastic">
<span class="hamburger-box"> <span class="hamburger-inner"></span> </span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<!-- <li><a href="blog.html">Blog</a></li> -->
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="work-hero">
<p class="little-p">Photography</p>
<h1 class="big-title">Walnut and Green</h1>
<div class="spacer-30"></div>
<img class="clip-animation" data-duration="4" data-delay="0" src="images/works/work-4/01.jpg" alt="">
</div>
<!-- work info-->
<div class="spacer-60"></div>
<div class="container">
<div class="row project-info">
<div class="col-lg-8">
<h3 class="title scale-animation">Branding Health and Sustainability.</h3>
<div class="spacer-15"></div>
<p class="scale-animation" data-delay=".2">Vörda (Swedish for “to protect, to respect”) is a US-based brand committed to bringing high-quality, natural products sourced from Asia and Europe to the North American market. By North was commissioned to develop the name, brand strategy, visual identity and packaging for the new brand.
We developed a bespoke logotype with distinct features that comes to life in animations. </p>
</div>
<div class="col-lg-4 categories">
<ul>
<li class="client scale-animation">Vörda by North</li>
<li class="client scale-animation" data-delay=".1">Jan 18, 2022</li>
<li class="client scale-animation" data-delay=".2">Product, Photography</li>
<li class="client scale-animation" data-delay=".3"><a target="_blank" href="https://www.behance.net/gallery/75752875/Simone-Sherie-Pro-Wrestler#">Read More</a></li>
</ul>
</div>
</div>
</div>
<!-- Photo Gallery -->
<div class="spacer-60"></div>
<div class=" lightbox-gallery">
<div class="row">
<!-- a image -->
<div class="col-xl-4 scale-animation" data-duration="2">
<a href="images/works/work-4/02.jpg" class="image lightbox">
<img src="images/works/work-4/02.jpg" alt="">
</a>
</div>
<div class="col-xl-4 scale-animation" data-duration="2" data-delay=".2">
<a href="images/works/work-4/03.jpg" class="image lightbox">
<img src="images/works/work-4/03.jpg" alt="">
</a>
</div>
<div class="col-xl-4 scale-animation" data-duration="2" data-delay=".4">
<a href="images/works/work-4/04.jpg" class="image lightbox">
<img src="images/works/work-4/04.jpg" alt="">
</a>
</div>
<div class="col-xl-12 scale-animation">
<a href="images/works/work-4/05.jpg" class="image lightbox">
<img src="images/works/work-4/05.jpg" alt="">
</a>
</div>
</div>
</div>
<!-- navigation -->
<div class="work-navigation">
<a href="work-3.html" class="emoji-btn prev"><span><i class="fa-solid fa-arrow-left-long"></i></span><div class="text">Prev Case</div></a>
<a class="case" href="portfolio.html">
<svg id="Object" height="16" viewBox="0 0 40 40" width="16" xmlns="http://www.w3.org/2000/svg">
<rect height="14" width="14" x="1" y="25"/>
<rect height="14" width="14" x="25" y="25"/>
<rect height="14" width="14" x="1" y="1"/>
<rect height="14" width="14" x="25" y="1"/>
</svg>
</a>
<a href="work-5.html" class="emoji-btn next"><span><i class="fa-solid fa-arrow-right-long"></i></span><div class="text">Next Case</div></a>
</div>
</div> <!-- page wrapper end -->
</div><!-- container -->
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-inner">
<div class="copyright">
<p>Copyright 2022 - All right reserved</p>
</div>
<ul class="social">
<li><a target="_blank" href="#">Facebook</a></li>
<li><a target="_blank" href="#">Twitter</a></li>
<li><a target="_blank" href="#">Instagram</a></li>
<li><a target="_blank" href="#">Dribbble</a></li>
</ul>
</div>
</div>
</footer>
</main>
</div>
</div>
</div>
<!-- Javascripts -->
<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3gqyHylICdokv-P1q2WtRihCFhiFnm_U&sensor=false"></script>
<script src="js/map.js"></script>
<script src="js/main.js"></script>
</body>
</html>