11 juin 11h

0manifesto.html

@@ -40,7 +40,7 @@
                         <div class="titre"></div>
                         <div class="date">May 24th 2021</div>
                     </div>
-                    <div class="texte">When as a designer or practitioner we are confronted with such a subject (solving world hunger, in all humility) we try to find an entry point at our scale. As a group, we were interested in the chocolate production/consumption chain. Although this is only one part of the food chain, the study of cocoa production/consumption and the whole production chain is still extremely broad. In this universe, we will look for the precise, the human, the case study that will allow us to act, to take care and to develop a reflection. 
+                    <div class="texte">When as a designer or practitioner we are confronted with such a subject (solving world hunger) we try to find an entry point at our scale. As a group, we were interested in the chocolate production/consumption chain. Although this is only one part of the food chain, the study of cocoa production/consumption and the whole production chain is still extremely broad. In this universe, we will look for the precise, the human, the case study that will allow us to act, to take care and to develop a reflection. 
                             <br><br>
                         In the cocoa chain, there are two poles located at each  end of the chain, which allow for specific action: the producers and the consumers. On one side we  can act with the producer, favour a short production cycle, act on local issues, create cooperatives. On the other side, the consumer, namely: us, inhabitants of the Netherlands and design students. In order to raise awareness and to bring ringing light to a reality that does not affect us directly; of making our "consumer right" act. 
                         Two poles on which we can have an impact, because we act from human to human for individuals. We can take concrete action. This is important, but it can also lead to another problem that I would like to address:  the responsibility lies then with the individual.

hpLison.html

@@ -37,27 +37,27 @@
         </div>
 
         <div class="ImgEpisode2 imgEpisode">
-            <img src="episode02Juli.jpg"/>
+            <img src="IconLisonEpisode02.png"/>
             <div class="closeButton">X</div>
         </div>
         
         <div class="ImgEpisode3 imgEpisode">
-            <img src="episode03Juli.jpg"/>
+            <img src="IconLisonEpisode03.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode4 imgEpisode">
-            <img src="episode04Juli.jpg"/>
+            <img src="IconLisonEpisode04.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode5 imgEpisode">
-            <img src="episode05Juli.jpg"/>
+            <img src="IconLisonEpisode05.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode6 imgEpisode">
-            <img src="episode06Juli.jpg"/>
+            <img src="IconLisonEpisode06.png"/>
             <div class="closeButton">X</div>
         </div>
 

hpRaphaelle.html

@@ -37,22 +37,22 @@
         </div>
 
         <div class="ImgEpisode2 imgEpisode">
-            <img src="episode02Juli.jpg"/>
+            <img src="iconRaphEpisode0102.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode3 imgEpisode">
-            <img src="episode03Juli.jpg"/>
+            <img src="iconRaphEpisode0103.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode4 imgEpisode">
-            <img src="episode04Juli.jpg"/>
+            <img src="iconRaphEpisode0104.png"/>
             <div class="closeButton">X</div>
         </div>
 
         <div class="ImgEpisode5 imgEpisode">
-            <img src="episode05Juli.jpg"/>
+            <img src="iconRaphEpisode0105.png"/>
             <div class="closeButton">X</div>
         </div>
 

styles.css

@@ -275,28 +275,28 @@ body {
 }
 
 .object:nth-child(1) {
-  left: 34%;
-  top: 84%;
+  left: 5%;
+  top: 28%;
 }
 
 .object:nth-child(2) {
-  left: 70%;
-  top: 90%;
+  left: 49%;
+  top: 29%;
 }
 
 .object:nth-child(3) {
-  left: 25%;
-  top: 78%;
+  left: 29%;
+  top: 52%;
 }
 
 .object:nth-child(4) {
-  left: 36%;
-  top: 17%;
+  left: 65%;
+  top: 39%;
 }
 
 .object:nth-child(5) {
-  left: 21%;
-  top: 55%;
+  left: 31%;
+  top: 87%;
 }
 
 .netherlands {
@@ -550,9 +550,9 @@ body {
 
 .landingPageJuli .closeButton {
   position: absolute;
-  top: 0;
-  right: 0;
-  background: black;
+  top: 8px;
+  right: 8px;
+  background: #ff3f1d;
   color: white;
   display: inline-block;
   border-width: 1px;
@@ -602,10 +602,8 @@ body {
 .landingPageRaph .ImgEpisode2 {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  top: 45%;
+  left: 25%;
 }
 
 .landingPageRaph .ImgEpisode2 img {
@@ -615,10 +613,8 @@ body {
 .landingPageRaph .ImgEpisode3 {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  top: 5%;
+  left: 35%;
 }
 
 .landingPageRaph .ImgEpisode3 img {
@@ -628,10 +624,8 @@ body {
 .landingPageRaph .ImgEpisode4 {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  top: 15%;
+  left: 40%;
 }
 
 .landingPageRaph .ImgEpisode4 img {
@@ -641,10 +635,8 @@ body {
 .landingPageRaph .ImgEpisode5 {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  top: 5%;
+  left: 33%;
 }
 
 .landingPageRaph .ImgEpisode5 img {
@@ -677,23 +669,17 @@ body {
 
 .landingPageRaph .closeButton {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: black;
-  color: white;
+  color: #ff3f1d;
   display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
   padding: 0.3vw 0.6vw 0.3vw 0.6vw;
   cursor: pointer;
 }
 
 .landingPageRaph .closeButton:hover {
-  background: white;
-  color: black;
-  border-color: white;
+  color: white;
 }
 
 .landingPageLison {
@@ -720,12 +706,12 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode1 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .ImgEpisode2 {
@@ -733,12 +719,12 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode2 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .ImgEpisode3 {
@@ -746,12 +732,12 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode3 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .ImgEpisode4 {
@@ -759,12 +745,12 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode4 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .ImgEpisode5 {
@@ -772,12 +758,12 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode5 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .ImgEpisode6 {
@@ -785,33 +771,27 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transform: translate(-45%, -50%);
+          transform: translate(-45%, -50%);
 }
 
 .landingPageLison .ImgEpisode6 img {
-  width: 60vw;
+  width: 70vw;
 }
 
 .landingPageLison .closeButton {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: black;
-  color: white;
+  color: #ff3f1d;
   display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
   padding: 0.3vw 0.6vw 0.3vw 0.6vw;
   cursor: pointer;
 }
 
 .landingPageLison .closeButton:hover {
-  background: white;
-  color: black;
-  border-color: white;
+  color: white;
 }
 
 .objectCamille {

styles.scss

@@ -578,10 +578,10 @@ body{
 
     .closeButton {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: 8px;
+        right: 8px;
         // margin: 3px;
-        background: rgb(0, 0, 0);
+        background: $red;
         color: rgb(255, 255, 255);
         display: inline-block;
         border-width: 1px;
@@ -653,9 +653,8 @@ body{
     .ImgEpisode2 {
         display: none;
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        top: 45%;
+        left: 25%;
 
         img{
             width: 30vw;
@@ -666,9 +665,8 @@ body{
     .ImgEpisode3 {
         display: none;
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        top: 5%;
+        left: 35%;
 
         img{
             width: 30vw;
@@ -679,9 +677,8 @@ body{
     .ImgEpisode4 {
         display: none;
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        top: 15%;
+        left: 40%;
 
         img{
             width: 30vw;
@@ -692,9 +689,8 @@ body{
     .ImgEpisode5 {
         display: none;
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        top: 5%;
+        left: 33%;
 
         img{
             width: 30vw;
@@ -729,23 +725,23 @@ body{
 
     .closeButton {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: 5px;
+        right: 5px;
         // margin: 3px;
         background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
+        color: $red;
         display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
+        // border-width: 1px;
+        // border-style: solid;
+        // border-radius: 1vw;
+        // border-color: white;
         padding: 0.3vw 0.6vw 0.3vw 0.6vw;
         cursor: pointer;
 
         &:hover {
-            background: white;
-            color: rgb(0, 0, 0);
-            border-color: white;
+            // background: white;
+            color: rgb(255, 255, 255);
+            // border-color: white;
         }
     }
 
@@ -781,10 +777,10 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
@@ -794,10 +790,10 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
@@ -807,10 +803,10 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
@@ -820,10 +816,10 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
@@ -833,10 +829,10 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
@@ -846,33 +842,33 @@ body{
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-45%, -50%);
 
         img{
-            width: 60vw;
+            width: 70vw;
         }
 
     }
 
     .closeButton {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: 5px;
+        right: 5px;
         // margin: 3px;
         background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
+        color: $red;
         display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
+        // border-width: 1px;
+        // border-style: solid;
+        // border-radius: 1vw;
+        // border-color: white;
         padding: 0.3vw 0.6vw 0.3vw 0.6vw;
         cursor: pointer;
 
         &:hover {
-            background: white;
-            color: rgb(0, 0, 0);
-            border-color: white;
+            // background: white;
+            color: rgb(255, 255, 255);
+            // border-color: white;
         }
     }