studioem
GitHub
commit
1624f8e1a4
8 changed files with 201 additions and 34 deletions
|
|
@ -58,12 +58,15 @@
|
|||
</div>
|
||||
|
||||
<div class="personnalText">
|
||||
<div class="personnalTextHarkinEngel" contenteditable="true">
|
||||
The protocol was signed in 2001, with the intention that the 6 principles would be implemented by 2005. At that date, the requirements were not met; no certification standard, no change in the price of chocolate to enable cocoa farmers to lift themselves out of poverty. Companies are criticised for implementing the protocol at the lowest cost, without taking action to change the business model of the cocoa industry, which remains dependent on child labour.
|
||||
Indeed, the protocol is a non-binding agreement, so that the cocoa industry regulates itself without legal implication. Corporate self-regulation is favoured to address a human rights issue.
|
||||
In 2009, cocoa from the Ivory Coast and Nigeria was added to the list of products produced by child labour. Under Executive Order 13126, federal contractors who supply products on the list must prove that they have made a good faith effort to determine whether the products were produced using forced labour.
|
||||
With the targets still not met in 2010, a new joint statement was issued: reduce the worst forms of child labour by 70% by 2020. In 2011, the cocoa industry had not completed any of the six articles.
|
||||
</div>
|
||||
<div class="personnalTextHarkinEngel" contenteditable="true">
|
||||
The protocol was signed in 2001, with the intention that the 6 principles would be implemented by 2005. At that date, the requirements were not met; no certification standard, no change in the price of chocolate to enable cocoa farmers to lift themselves out of poverty. Companies are criticised for implementing the protocol at the lowest cost, without taking action to change the business model of the cocoa industry, which remains dependent on child labour.
|
||||
Indeed, the protocol is a non-binding agreement, so that the cocoa industry regulates itself without legal implication. Corporate self-regulation is favoured to address a human rights issue.
|
||||
In 2009, cocoa from the Ivory Coast and Nigeria was added to the list of products produced by child labour. Under Executive Order 13126, federal contractors who supply products on the list must prove that they have made a good faith effort to determine whether the products were produced using forced labour.
|
||||
With the targets still not met in 2010, a new joint statement was issued: reduce the worst forms of child labour by 70% by 2020. In 2011, the cocoa industry had not completed any of the six articles.
|
||||
</div>
|
||||
<div class="personnal-hover">
|
||||
Un truc stylé
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wholeBoxEditable">
|
||||
|
|
|
|||
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
assets/juli/map-juli.jpeg
Normal file
BIN
assets/juli/map-juli.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
20
hpJuli.html
20
hpJuli.html
|
|
@ -18,21 +18,31 @@
|
|||
</head>
|
||||
<body class="home">
|
||||
|
||||
<div class="noScroll">
|
||||
|
||||
<div class="landingPageJuli">
|
||||
|
||||
<div class="map-container">
|
||||
<img src="assets/juli/map-juli.jpeg" />
|
||||
<div class="map-pointer" id="Episode1"></div>
|
||||
<div class="map-pointer" id="Episode2"></div>
|
||||
<div class="map-pointer" id="Episode3"></div>
|
||||
<div class="map-pointer" id="Episode4"></div>
|
||||
<div class="map-pointer" id="Episode5"></div>
|
||||
<div class="map-pointer" id="Episode6"></div>
|
||||
<div class="map-pointer" id="Episode7"></div>
|
||||
</div>
|
||||
|
||||
<div class="texte">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</div>
|
||||
|
||||
<div class="LienEpisode1"><img src="ImgJuli.png"/></div>
|
||||
<div class="ImgEpisode1">
|
||||
<div class="ImgEpisode1 imgEpisode">
|
||||
<img src="ImgProtocol.png"/>
|
||||
<div class="closeButton">X</div>
|
||||
</div>
|
||||
|
||||
<div class="LienEpisode2"><img src="ImgJuli.png"/></div>
|
||||
<div class="ImgEpisode2">
|
||||
<div class="ImgEpisode2 imgEpisode">
|
||||
<img src="ImgProtocol.png"/>
|
||||
<div class="closeButton">X</div>
|
||||
</div>
|
||||
|
|
@ -67,8 +77,6 @@
|
|||
by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
|
||||
<div class=buttonEnter>enter</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -52,7 +52,7 @@ $(document).ready(function(){
|
|||
function floating(id){
|
||||
setTimeout(function(){
|
||||
positionFloating(id);
|
||||
}, 10);
|
||||
}, 100);
|
||||
setInterval(function(){
|
||||
positionFloating(id);
|
||||
}, 10000);
|
||||
|
|
@ -120,4 +120,10 @@ $(document).ready(function(){
|
|||
|
||||
});
|
||||
|
||||
$(".map-pointer").click(function(){
|
||||
var id = $(this).attr("id");
|
||||
$(".imgEpisode").hide();
|
||||
$(".Img"+ id).show();
|
||||
})
|
||||
|
||||
});
|
||||
103
styles.css
103
styles.css
|
|
@ -271,28 +271,28 @@ body {
|
|||
}
|
||||
|
||||
.object:nth-child(1) {
|
||||
left: 33%;
|
||||
top: 39%;
|
||||
left: 10%;
|
||||
top: 87%;
|
||||
}
|
||||
|
||||
.object:nth-child(2) {
|
||||
left: 11%;
|
||||
top: 58%;
|
||||
left: 71%;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.object:nth-child(3) {
|
||||
left: 5%;
|
||||
top: 57%;
|
||||
left: 88%;
|
||||
top: 32%;
|
||||
}
|
||||
|
||||
.object:nth-child(4) {
|
||||
left: 76%;
|
||||
top: 63%;
|
||||
left: 87%;
|
||||
top: 45%;
|
||||
}
|
||||
|
||||
.object:nth-child(5) {
|
||||
left: 77%;
|
||||
top: 17%;
|
||||
left: 73%;
|
||||
top: 60%;
|
||||
}
|
||||
|
||||
.netherlands {
|
||||
|
|
@ -424,11 +424,6 @@ body {
|
|||
|
||||
.landingPageJuli {
|
||||
position: absolute;
|
||||
background: black;
|
||||
background-image: url(outlinebg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -825,6 +820,25 @@ body {
|
|||
border-radius: 0.5vw;
|
||||
}
|
||||
|
||||
.personnalText:hover .personnal-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.personnalText .personnal-hover {
|
||||
position: absolute;
|
||||
top: -2vw;
|
||||
left: 50%;
|
||||
padding: .5vw;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
display: none;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 8pt;
|
||||
line-height: .2;
|
||||
}
|
||||
|
||||
.personnalText .personnalTextHarkinEngel {
|
||||
-webkit-column-count: 3;
|
||||
column-count: 3;
|
||||
|
|
@ -1079,4 +1093,63 @@ body {
|
|||
#trigger2:hover ~ #bg .texte2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.map-container img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-container .map-pointer {
|
||||
position: absolute;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
background-color: green;
|
||||
opacity: .5;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-container #Episode1 {
|
||||
left: 70%;
|
||||
top: 9%;
|
||||
}
|
||||
|
||||
.map-container #Episode2 {
|
||||
left: 70%;
|
||||
top: 23%;
|
||||
}
|
||||
|
||||
.map-container #Episode3 {
|
||||
left: 57.5%;
|
||||
top: 37%;
|
||||
}
|
||||
|
||||
.map-container #Episode4 {
|
||||
left: 42%;
|
||||
top: 67%;
|
||||
}
|
||||
|
||||
.map-container #Episode5 {
|
||||
left: 66%;
|
||||
top: 81%;
|
||||
}
|
||||
|
||||
.map-container #Episode6 {
|
||||
left: 63.5%;
|
||||
top: 77%;
|
||||
}
|
||||
|
||||
.map-container #Episode7 {
|
||||
left: 64%;
|
||||
top: 71.5%;
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
File diff suppressed because one or more lines are too long
87
styles.scss
87
styles.scss
|
|
@ -435,11 +435,11 @@ body{
|
|||
position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
background: rgb(0, 0, 0);
|
||||
background-image: url(outlinebg.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// background: rgb(0, 0, 0);
|
||||
// background-image: url(outlinebg.png);
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -826,8 +826,28 @@ body{
|
|||
border-style: dashed;
|
||||
border-color: white;
|
||||
border-radius: 0.5vw;
|
||||
|
||||
.personnal-hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.personnal-hover {
|
||||
position: absolute;
|
||||
top: -2vw;
|
||||
left: 50%;
|
||||
padding: .5vw;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
display: none;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 8pt;
|
||||
line-height: .2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.personnalTextHarkinEngel{
|
||||
column-count: 3;
|
||||
column-gap: 20px;
|
||||
|
|
@ -1098,6 +1118,63 @@ body{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-pointer {
|
||||
position: absolute;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
background-color: green;
|
||||
opacity: .5;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#Episode1 {
|
||||
left: 70%;
|
||||
top: 9%;
|
||||
}
|
||||
#Episode2 {
|
||||
left: 70%;
|
||||
top: 23%;
|
||||
}
|
||||
#Episode3 {
|
||||
left: 57.5%;
|
||||
top: 37%;
|
||||
}
|
||||
#Episode4 {
|
||||
left: 42%;
|
||||
top: 67%;
|
||||
}
|
||||
#Episode5 {
|
||||
left: 66%;
|
||||
top: 81%;
|
||||
}
|
||||
#Episode6 {
|
||||
left: 63.5%;
|
||||
top: 77%;
|
||||
}
|
||||
#Episode7 {
|
||||
left: 64%;
|
||||
top: 71.5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// stuffs
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue