-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
152 lines (151 loc) · 7.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Chroma</title>
<meta name="viewport"
content="width=device-width,
height=device-height,
initial-scale=1.0,
maximum-scale=1.0,
target-densityDpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74480630-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="cinematic-title"> Chroma </div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="video-layer">
<div class="intro">
chroma
</div>
<a class="applink" href="/app.html">try it out</a>
<div class="navigation-wrapper">
<ul class="navigation">
<li class="nav-item" id="nav-home">home</li>
<li class="nav-item" id="nav-collection">collection</li>
<li class="nav-item" id="nav-campaign">campaign</li>
<li class="nav-item" id="nav-about">about</li>
<li class="nav-item" id="nav-credits">credits</li>
</ul>
</div>
<div class="about">
<div class="about-text">
<p>
Individuality is important for the modern human. We buy mass-produced goods and fast
fashion from stores that offer contemporary design at an affordable price, but we crave
for personal objects that transcend materialism and consumer culture. We feel
alive when we imagine and when we create. We prefer artisanship over manufactured goods.
This was starkly shown by the Maker and DYI movement, the influx of local bakeries
and is now an essential part of many digital fashion projects.
</p>
<p>
Digital art is an opportunity to make observer part of the creative experience. Digital
information can be infinitely replicable, opening up the possibility to create a unique
and personal experience for each and everyone one of us. Chroma is an interactive fashion
experience built upon those ideas.
<p>
<p>
Visually, inspiration was drawn from natural forms of metals, most significantly Chromium.
Its name comes from the greek word 'chroma' meaning color, as many of its compounds are
intensely colored.
</p>
<p>
The collection presents a liquid form of these metals, digitized and given life on the web,
our second home. This serves as a metaphor of our increasing in distinction between real
and virtual. The collection juxtaposes big colorful prints with minimal silhouettes,
eclectic mix of textiles such as wool, organza and neoprene.
</p>
<p>
Chroma gives you the power to control the fluid metal and create your own unique print.
Chroma strives to satisfy all our desires - modernity, uniqueness and accessibility.
</p>
</div>
</div>
<div class="credits">
<div class="credits-text">
<p> <b>DESIGN</b>
<a href="http://ellennevro.tumblr.com/">Ellen Nevrokopska</a></p>
<p> <b>CODE </b>
<a href="http://twitter.com/nicknikolov/">Nick Nikolov</a></p>
<p> <b>PHOTOGRAPHY </b>Vasil Germanov </p>
<p> <b>MUA </b>Eliza Popova </p>
<p> <b>HAIR </b>Parashkev Todorov </p>
<p> <b>MODEL </b>Elizabet at Ivet Fashion </p>
<p>Special shout out to (in no particular order): Marcin Ignac, prof. Dimitur Delchev, Milko Boyarov, Maria Daskalova,
Ivo Dimitrov, Julian Kuntorov, Vasil Germanov, Tsvetomir Goranov, Yana Dvoretska, Nikolay Pachev,
Nezabravka Nedyalkova, Will Gallia </p>
<a href="https://github.com/nicknikolov/chroma">Github repository</a>
<br>
<a href="https://vimeo.com/156322182">Full video on Vimeo</a>
</div>
</div>
<div class="gallery">
<p> collection </p>
<div class="images">
<img src="assets/images/collection/chroma1.jpg"></img>
<img src="assets/images/collection/chroma2.jpg"></img>
<img src="assets/images/collection/chroma3.jpg"></img>
<img src="assets/images/collection/chroma4.jpg"></img>
<img src="assets/images/collection/chroma5.jpg"></img>
<img src="assets/images/collection/chroma6.jpg"></img>
<img src="assets/images/collection/chroma7.jpg"></img>
<img src="assets/images/collection/chroma8.jpg"></img>
<img src="assets/images/collection/chroma9.jpg"></img>
<img src="assets/images/collection/chroma10.jpg"></img>
<img src="assets/images/collection/chroma11.jpg"></img>
</div>
</div>
<div class="gallery">
<p> campaign </p>
<div class="images">
<img src="assets/images/campaign/chroma1.jpg"></img>
<img src="assets/images/campaign/chroma2.jpg"></img>
<img src="assets/images/campaign/chroma3.jpg"></img>
<img src="assets/images/campaign/chroma4.jpg"></img>
<img src="assets/images/campaign/chroma5.jpg"></img>
<img src="assets/images/campaign/chroma6.jpg"></img>
<img src="assets/images/campaign/chroma7.jpg"></img>
<img src="assets/images/campaign/chroma8.jpg"></img>
<img src="assets/images/campaign/chroma9.jpg"></img>
<img src="assets/images/campaign/chroma10.jpg"></img>
<img src="assets/images/campaign/chroma11.jpg"></img>
<img src="assets/images/campaign/chroma12.jpg"></img>
<img src="assets/images/campaign/chroma13.jpg"></img>
<img src="assets/images/campaign/chroma14.jpg"></img>
</div>
</div>
<script src="src/navigation.js"></script>
<!-- <div class="tablet"> -->
<!-- <div class="camera"> </div> -->
<!-- <canvas id="pex"></canvas> -->
<!-- <div class="button"> </div> -->
<!-- <div class="button-square"> </div> -->
<!-- </div> -->
<!-- <div class="draw-hint"> Draw on me! </div> -->
<video autoplay id="bgvid" poster="assets/images/campaign/chroma5.jpg" loop>
<source src="assets/chroma-loop.webm" type="video/webm">
<source src="assets/chroma-loop.mp4" type="video/mp4">
</video>
</div>
</div>
</body>
</html>