parzen/indiescience
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

avec landing page et survol objets home page

Browse source
This commit is contained in:
xxxgogo77 2021-05-21 12:28:31 +02:00
parent 1636a080a9
commit 3bdfedb1d2
8 changed files with 171 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
fonts/HelveticaLTStd-Roman.otf Normal file
View file

Binary file not shown.

BIN
fonts/MAZIUSREVIEW20.09-Extraitalic.otf Normal file
View file

Binary file not shown.

BIN
fonts/MigraItalic-ExtralightItalic.otf Normal file
View file

Binary file not shown.

18
index.html
View file

@ -21,21 +21,25 @@
<div class="object">
<img src="ImgProtocol.png"/>
<a href="PageProtocol.jpg"></a>
<p>Harkin-Engel Protocol</p>
</div>
<div class="object">
<img src="ImgLison.png"/>
<a href="PageLison.pdf"></a>
<p>Packaging</p>
</div>
<div class="object">
<img src="ImgRaphaelle.png"/>
<a href="PageRaphaelle.jpg"></a>
<p>Local Dish</p>
</div>
<div class="object">
<img src="ImgJuli.png"/>
<a href="PageJuli.pdf"></a>
<p>Manioc</p>
</div>
<!-- <div class="object">
@ -43,6 +47,20 @@
<a href="PageProtocol.jpg"></a>
</div> -->
<div class=landingPage>
<h1>Chocolate Atlas</h1>
The Chocolate Atlas takes the viewer on a non-liner route through the world of cocoa. Using
the lens of cocoa to magnify the detached consumption of goods on a global base. A melt-inyour-mouth sweet for some and, amongst others, a child-slavery-based business for others. The
reality of food is not singular, which is why the Atlas is organized in an organic spread that can
be accessed at multiple points. Cocoa and its trade route is one of the most fragmented crops of
the world, equaling in increased accountability detachment from the fruit to the bar.
<p>Project Developed
at Design Academy of Eindhoven
<br>Curated and edited
by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
<div class=buttonEnter>enter</div>
</div>
</body>
</html>

4
js/application.js
View file

@ -14,4 +14,8 @@ $(document).ready(function(){
$(".object").each(function(){
$(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"});
});
$(".buttonEnter").click(function(){
$(".landingPage").fadeOut(600);
})
});

93
styles.css
View file

@ -11,11 +11,16 @@
box-sizing: border-box;
}
/*@font-face {
font-family: 'Alpina-Italic';
src: url('fonts/GT-Alpina-Typewriter-Light-Italic.woff') format('woff'),
url('fonts/GT-Alpina-Typewriter-Light-Italic.woff2') format('woff2');
}*/
@font-face {
font-family: 'Helvetica';
src: url("fonts/HelveticaLTStd-Roman.otf") format("opentype");
}
@font-face {
font-family: 'Migra';
src: url("fonts/MigraItalic-ExtralightItalic.otf") format("opentype");
}
html {
height: 100%;
overflow: hidden;
@ -38,6 +43,25 @@ body {
position: absolute;
width: 10%;
cursor: move;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
}
.object p {
/*opacity: 0;
transform: translateY(-50%);
transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
display: none;
margin: 0;
}
.object:hover p {
/*opacity: 1;
transform: translateY(0);*/
display: block;
}
.object img {
@ -56,28 +80,67 @@ body {
transform: translate(-50%, -50%);
}
.landingPage {
position: absolute;
padding: 2vw 10vw 0 10vw;
background: black;
width: 100%;
height: 100%;
overflow: hidden;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
}
.landingPage h1 {
font-family: Helvetica;
font-size: 300%;
font-weight: normal;
margin: 0 0 10w 0;
}
.landingPage .buttonEnter {
margin: 5% 0 0 0;
background: black;
color: white;
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 3vw;
border-color: white;
padding: 0.5vw 1vw 0.5vw 1vw;
cursor: pointer;
}
.landingPage .buttonEnter:hover {
background: white;
color: black;
}
.object:nth-child(1) {
left: 73%;
top: 30%;
left: 70%;
top: 45%;
}
.object:nth-child(2) {
left: 59%;
top: 18%;
left: 1%;
top: 64%;
}
.object:nth-child(3) {
left: 11%;
top: 54%;
left: 68%;
top: 34%;
}
.object:nth-child(4) {
left: 3%;
top: 10%;
left: 21%;
top: 73%;
}
.object:nth-child(5) {
left: 29%;
top: 43%;
left: 1%;
top: 8%;
}
/*# sourceMappingURL=styles.css.map */

2
styles.css.map
View file

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAAA,AAAA,CAAC,CAAC;EACE,kBAAkB,EAAE,UAAU;EAC9B,eAAe,EAAE,UAAU;EAC3B,UAAU,EAAE,UAAU;EACtB,uBAAuB,EAAE,SAAS;EAClC,cAAc,EAAE,kBAAkB;EAClC,sBAAsB,EAAE,WAAW;EACnC,mBAAmB,EAAE,WAAW;EAChC,cAAc,EAAE,WAAW;EAC3B,WAAW,EAAE,KAAK;EAClB,gBAAgB,EAAE,KAAK;EACvB,UAAU,EAAE,UAAU;CACzB;;AAED;;;;GAIG;AAEH,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CACnB;;AAED,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,KAAK;EACjB,gBAAgB,EAAE,mBAAmB;EACrC,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,OAAO;EACxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CACnB;;AAED,AAAA,OAAO,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;CAiBf;;AApBD,AAKI,OALG,CAKH,GAAG,CAAC;EACD,KAAK,EAAE,IAAI;CACV;;AAPR,AASI,OATG,CASH,CAAC,CAAC;EACE,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,KAAK;EACd,SAAS,EAAE,qBAAqB;CACnC;;AAKD,AAAA,OAAO,AAAA,UAAW,CAAA,CAAC,EAAK;EACpB,IAAI,EAAE,GAAc;EACpB,GAAG,EAAE,GAAc;CACtB;;AAHD,AAAA,OAAO,AAAA,UAAW,CAAA,CAAC,EAAK;EACpB,IAAI,EAAE,GAAc;EACpB,GAAG,EAAE,GAAc;CACtB;;AAHD,AAAA,OAAO,AAAA,UAAW,CAAA,CAAC,EAAK;EACpB,IAAI,EAAE,GAAc;EACpB,GAAG,EAAE,GAAc;CACtB;;AAHD,AAAA,OAAO,AAAA,UAAW,CAAA,CAAC,EAAK;EACpB,IAAI,EAAE,EAAc;EACpB,GAAG,EAAE,GAAc;CACtB;;AAHD,AAAA,OAAO,AAAA,UAAW,CAAA,CAAC,EAAK;EACpB,IAAI,EAAE,GAAc;EACpB,GAAG,EAAE,GAAc;CACtB",
"mappings": "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",
"sources": [
"styles.scss"
],

75
styles.scss
View file

@ -12,11 +12,15 @@
box-sizing: border-box;
}
/*@font-face {
font-family: 'Alpina-Italic';
src: url('fonts/GT-Alpina-Typewriter-Light-Italic.woff') format('woff'),
url('fonts/GT-Alpina-Typewriter-Light-Italic.woff2') format('woff2');
}*/
@font-face {
font-family: 'Helvetica';
src: url('fonts/HelveticaLTStd-Roman.otf') format('opentype');
}
@font-face {
font-family: 'Migra';
src: url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
}
html{
height: 100%;
@ -40,6 +44,25 @@ body {
position: absolute;
width: 10%;
cursor: move;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
p {
/*opacity: 0;
transform: translateY(-50%);
transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
display: none;
margin: 0;
}
&:hover p {
/*opacity: 1;
transform: translateY(0);*/
display: block;
}
img {
width: 100%;
@ -58,6 +81,48 @@ body {
}
.landingPage {
position: absolute;
padding: 2vw 10vw 0 10vw;
background: rgb(0, 0, 0);
width: 100%;
height: 100%;
overflow: hidden;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
h1 {
font-family: Helvetica;
font-size: 300%;
font-weight: normal;
margin: 0 0 10w 0;
}
.buttonEnter {
// text-transform: uppercase;
margin: 5% 0 0 0;
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius:3vw;
border-color: white;
padding: 0.5vw 1vw 0.5vw 1vw;
cursor: pointer;
&:hover {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
}
}
@for $i from 1 through 5 {
.object:nth-child(#{$i}){
left: random(90) + %;