diff --git a/content/experiment_placeholder.jpg b/content/experiment_placeholder.jpg new file mode 100644 index 0000000..38e2096 Binary files /dev/null and b/content/experiment_placeholder.jpg differ diff --git a/content/thumb_boxphysics.jpg b/content/thumb_boxphysics.jpg new file mode 100644 index 0000000..28e0727 Binary files /dev/null and b/content/thumb_boxphysics.jpg differ diff --git a/content/thumb_particles.jpg b/content/thumb_particles.jpg new file mode 100644 index 0000000..0852122 Binary files /dev/null and b/content/thumb_particles.jpg differ diff --git a/content/thumb_phongdistortion.jpg b/content/thumb_phongdistortion.jpg new file mode 100644 index 0000000..82a441e Binary files /dev/null and b/content/thumb_phongdistortion.jpg differ diff --git a/content/thumb_tubes.jpg b/content/thumb_tubes.jpg new file mode 100644 index 0000000..655c786 Binary files /dev/null and b/content/thumb_tubes.jpg differ diff --git a/css/site.css b/css/site.css index 139121d..2970aaf 100644 --- a/css/site.css +++ b/css/site.css @@ -1,5 +1,36 @@ +/* FONTS */ + +@font-face { + font-family: 'Omnes'; + src: url('../font/omnes-regular-webfont.eot'); + src: url('../font/omnes-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../font/omnes-regular-webfont.woff2') format('woff2'), + url('../font/omnes-regular-webfont.woff') format('woff'), + url('../font/omnes-regular-webfont.ttf') format('truetype'), + url('../font/omnes-regular-webfont.svg#omnes-regularregular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'VollkornItalic'; + src: url("../font/vollkorn-italic-webfont.eot"); + src: url("../font/vollkorn-italic-webfont.eot?#iefix") format("embedded-opentype"), + url("../font/vollkorn-italic-webfont.woff") format("woff"), + url("../font/vollkorn-italic-webfont.ttf") format("truetype"), + url("../font/vollkorn-italic-webfont.svg#vollkornitalic") format("svg"); + font-weight: normal; + font-style: normal; +} + + + + +/* HELPERS */ + .table { display: table; + position:relative; width: 100%; height: 100%; } @@ -19,112 +50,184 @@ text-align: center; } + + + /* GLOBALS */ + html, body, #wrapper { width: 100%; height: 100%; + min-height: 100%; font-size: 10px; - overflow: hidden !important; - background-size:cover; - position: absolute; - top: 0; - margin : 0; } -p -{ +body { font-family: 'Vollkorn', serif; font-weight: 400; font-style: italic; - background:#000; + background:#0D0D0D; color: #FFF; - letter-spacing: 0.6em; + letter-spacing: 0.2em; + user-select: none; + -webkit-user-select: none; + margin:0; + padding:0; } -img { +section { + position:relative; + height:100%; + width:100%; + clear:both; +} + +.arrow { cursor:pointer !important; width:40px; height:40px; display:block; margin:0 auto; background:url(../img/right_arrow.svg); background-size:cover; } + +.tick { background:url(../img/tick.svg); background-size:cover; } + + + + +/* HOME */ + +#splash { + background-position:center center; + background-image:url(../img/splash.jpg); + background-size:cover; + height:100%; +} + +.logo { position:relative; display:block; margin:0 auto; max-width:60%; - z-index:99999; + max-height:30%; } -a { z-index:99999; -webkit-font-smoothing:antialiased; font-size:1.4rem; position:absolute; bottom:0.9em; left:0; width:100%; color:#FFF; text-decoration:none; } +a { text-align:center; letter-spacing: 0.5em; -webkit-font-smoothing:antialiased; font-size:1.6rem; color:#FFF; text-decoration:none; cursor:pointer !important; } + a:hover { text-decoration:underline; } -/* BODY BORDERS */ -@media (min-width: 768px) { - #top-border { - position: fixed; - top: 0; - left: 0; - height: 50px; - width: 100%; - background: #000; - z-index: 9999; } - - #bottom-border { - position: fixed; - bottom: 0; - left: 0; - height: 50px; - width: 100%; - background: #000; - z-index: 9999; } - - #left-border { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 50px; - background: #000; - z-index: 9999; } - - #right-border { - position: fixed; - top: 0; - right: 0; - height: 100%; - width: 50px; - background: #000; - z-index: 9999; } -} - -#cycle { - display: block; - width: 100%; - height: 100%; - position: fixed; - overflow: hidden; - left: 0; - top: 0; -} - -#cycle .slide { - display: none; - width: 100% !important; - height: 100% !important; - position: absolute; - top: 0; - left: 0; - background-position: center center; - background-size: cover; - background-repeat: none; -} - -#cycle #slide-one { - display: block; - background-image: url(../img/bg.jpg); -} - -#cycle #slide-two { - background-image: url(../img/bg2.jpg); -} - -#cycle #slide-three { - background-image: url(../img/bg3.jpg); -} - -#cycle #slide-four { - background-image: url(../img/bg4.jpg); -} \ No newline at end of file +h1 { + padding:1.6em 0 0.8em; + font-size:1.6rem; + -webkit-font-smoothing:antialiased; + font-weight:400; + margin:0; +} + +h2 { + font-family:"Omnes"; + font-size:2.4rem; + font-style: normal; + text-transform: uppercase; + color: #FFF; + letter-spacing: 0.25em; + padding:0 10%; + margin:0; + -webkit-transition:0.2s ease; + -webkit-transform: translate( 0, -20px ); +} + +h3 { + font-size:1.4rem; + font-weight: normal; + -webkit-transition:0.2s ease 0.05s ; + -webkit-transform: translate( 0, 20px ); + -webkit-font-smoothing:antialiased; +} + +p { + font-size:1.6rem; + -webkit-font-smoothing:antialiased; +} + +ul { + list-style:none; + display:block; + height:100%; + width:100%; + padding:0; + margin:0; +} + +li { + display:block; + position:relative; + float:left; + width:50%; + height:50%; + cursor:pointer; +} + +.img { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + opacity:1; + background-size:cover; + background-position:center center; + -webkit-transition:0.3s ease; +} + +#splash .arrow { background:url(../img/down_arrow.svg); background-size:cover; } + +#footer { height:25%; } + +li h2 , li h3 { opacity:0; -webkit-transition:0.3s ease; } +li .arrow { opacity:0; -webkit-transition:0.3s ease 0.1s; } + +li:hover .img { + opacity:0.2; +} + +li:hover .arrow { + -webkit-transform(0,0); + opacity:1; +} + +li:hover h2 { + -webkit-transform: translate( 0, 0 ); opacity:1; +} + +li:hover h3 { + -webkit-transform: translate( 0, 0 ); opacity:1; +} + + + +/* EXPERIMENT */ + +#experiment-wrapper { overflow:hidden; } + +header { position:absolute; top:0; left:0; display:block; width:100%; height:50px; z-index:999; } +header .arrow { background:url(/img/left_arrow.svg) center center no-repeat; background-size:30%; float:left; width:50px; height:50px; cursor:pointer !important; } +header .arrow:hover { transition:0.15s ease; transform:translateX(-3px); } +header .cell { width:100%; text-align:left; } +header h1 { padding:19px 0 0 0; font-size:15px; line-height:1em; float:left; } +header .logo { float:right; padding-top:18px; margin-right:15px; height:15px; max-height:none !important; float:right; } + +#experiment { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#444; } + +#overlay { background:rgba(0,0,0,0.75); width:100%; height:100%; opacity:1; transition:0.3s ease; } +#overlay.hide { opacity:0; } + +#instructions { padding:4rem; width:75%; max-width:320px; margin:0 auto; } +#instructions .logo { max-width:60%; } + +@media( max-width:470px ) { + header .logo { display:none; } +} + +@media( max-width:760px ) { + li { width:100%; } +} + +@media( min-width:960px ) { + +} + + diff --git a/experiment.html b/experiment.html new file mode 100755 index 0000000..87f3d87 --- /dev/null +++ b/experiment.html @@ -0,0 +1,76 @@ + + + + + + + + + + Experiment Name | FLUUUID + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +

Box Physics

+ +
+
+
+
+
+
+
+
+
+
+

Experiment interaction instructions if needed, click to make the disappear.

+ +
+
+
+
+
+
+
+ + + diff --git a/font/omnes-regular-webfont.eot b/font/omnes-regular-webfont.eot new file mode 100755 index 0000000..3b31621 Binary files /dev/null and b/font/omnes-regular-webfont.eot differ diff --git a/font/omnes-regular-webfont.svg b/font/omnes-regular-webfont.svg new file mode 100755 index 0000000..6e12147 --- /dev/null +++ b/font/omnes-regular-webfont.svg @@ -0,0 +1,3474 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/font/omnes-regular-webfont.ttf b/font/omnes-regular-webfont.ttf new file mode 100755 index 0000000..95edf31 Binary files /dev/null and b/font/omnes-regular-webfont.ttf differ diff --git a/font/omnes-regular-webfont.woff b/font/omnes-regular-webfont.woff new file mode 100755 index 0000000..69ac778 Binary files /dev/null and b/font/omnes-regular-webfont.woff differ diff --git a/font/omnes-regular-webfont.woff2 b/font/omnes-regular-webfont.woff2 new file mode 100755 index 0000000..66fefb8 Binary files /dev/null and b/font/omnes-regular-webfont.woff2 differ diff --git a/font/vollkorn-italic-webfont.eot b/font/vollkorn-italic-webfont.eot new file mode 100755 index 0000000..3340eed Binary files /dev/null and b/font/vollkorn-italic-webfont.eot differ diff --git a/font/vollkorn-italic-webfont.svg b/font/vollkorn-italic-webfont.svg new file mode 100755 index 0000000..1894a5f --- /dev/null +++ b/font/vollkorn-italic-webfont.svg @@ -0,0 +1,418 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/font/vollkorn-italic-webfont.ttf b/font/vollkorn-italic-webfont.ttf new file mode 100755 index 0000000..7d43116 Binary files /dev/null and b/font/vollkorn-italic-webfont.ttf differ diff --git a/font/vollkorn-italic-webfont.woff b/font/vollkorn-italic-webfont.woff new file mode 100755 index 0000000..9160581 Binary files /dev/null and b/font/vollkorn-italic-webfont.woff differ diff --git a/font/vollkorn-regular-webfont.eot b/font/vollkorn-regular-webfont.eot new file mode 100755 index 0000000..0047180 Binary files /dev/null and b/font/vollkorn-regular-webfont.eot differ diff --git a/img/back.svg b/img/back.svg new file mode 100644 index 0000000..c34be81 --- /dev/null +++ b/img/back.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/img/circle.svg b/img/circle.svg new file mode 100644 index 0000000..d70fa3b --- /dev/null +++ b/img/circle.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/img/cross.svg b/img/cross.svg new file mode 100644 index 0000000..a1270eb --- /dev/null +++ b/img/cross.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/img/down_arrow.svg b/img/down_arrow.svg new file mode 100644 index 0000000..5dc5132 --- /dev/null +++ b/img/down_arrow.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/img/left_arrow.svg b/img/left_arrow.svg new file mode 100644 index 0000000..68d1882 --- /dev/null +++ b/img/left_arrow.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/img/right_arrow.svg b/img/right_arrow.svg new file mode 100644 index 0000000..10dd5e8 --- /dev/null +++ b/img/right_arrow.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/img/splash.jpg b/img/splash.jpg new file mode 100644 index 0000000..0611961 Binary files /dev/null and b/img/splash.jpg differ diff --git a/img/square.svg b/img/square.svg new file mode 100644 index 0000000..a7ed14a --- /dev/null +++ b/img/square.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/img/tick.svg b/img/tick.svg new file mode 100644 index 0000000..f622823 --- /dev/null +++ b/img/tick.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/img/triangle.svg b/img/triangle.svg new file mode 100644 index 0000000..9fce273 --- /dev/null +++ b/img/triangle.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/index.html b/index.html index 6abf114..1337d5a 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -11,7 +10,7 @@ - fluuu.id + FLUUUID | london digital creative collective @@ -39,6 +38,7 @@ + @@ -275,18 +275,88 @@ } - -
-
-
-
- FLUUUID -

heeey@fluuu.id

+
+
+
+
+ +

london digital creative collective

+ +
-
+ +
+ +
+