final presentation

hpGianmarco.html

@@ -20,7 +20,7 @@
 
         <div class="noScroll">
 
-        <a href="https://www.youtube.com/watch?v=EOQeU_6vbeg" class="texteGM">https://www.youtube.com/watch?v=EOQeU_6vbeg</a>
+        <a href="https://www.youtube.com/watch?v=zq1ZqWvCxQY" class="texteGM"><img src="GMpicvideo.png"></a>
 
         <div class="iconsSideMenu">
             <a href="hpJuli.html"><img src="iconLandingpageJuliBW.png"></a>

hpJuli.html

@@ -35,6 +35,7 @@
         <div class="ImgEpisode1 imgEpisode">
             <img src="episode01Juli.jpg"/>
             <div class="closeButton">X</div>
+            <div class="nextButton1">></div>
         </div>
 
         <div class="ImgEpisode2 imgEpisode">

js/application.js

@@ -59,7 +59,7 @@ $(document).ready(function(){
         
     }
 
-    $(".objectCamille").each(function(){
+    $(".objectCamille, .texteGM").each(function(){
         floating($(this));
     }); 
 
@@ -77,7 +77,7 @@ $(document).ready(function(){
     })
 
 
-    $(".objectCamille").each(function(){
+    $(".objectCamille, .texteGM").each(function(){
         $(this).css({"top": nombre(70) + "%", "left": nombre(70) + "%"}); 
     });
 

netherlands.html

@@ -21,8 +21,7 @@
 
         <div class="netherlands">
             <p>
-                The Netherlands, more specifically Eindhoven, 
+                Authors of the platform are all based in Eindhoven, the Netherlands.</p>
-                is where this platform had been created in 2021</p>
                 <a href="producerscountries.html"><div class="buttonEnter">➔</div></a>
         </div>
 

producerscountries.html

@@ -21,10 +21,7 @@
 
         <div class="producerscountries">
             <p>
-                You are now on the cocoa lands, where coca is 
+                In this platform we chose to highlight producer countries. Indeed a very few countries, all based close to the Equator, produce all the cocoa consumed in the world.</p>
-                harvested worldwide. Areas close to the Equator are 
-                the only “lucky” ones able to grow this typology of 
-                plantation. The rest of the world rely on them</p>
                 <a href="homepage.html"><div class="buttonEnter">➔</div></a>
         </div>
 

styles.css

@@ -275,28 +275,28 @@ body {
 }
 
 .object:nth-child(1) {
-  left: 5%;
+  left: 25%;
-  top: 28%;
+  top: 60%;
 }
 
 .object:nth-child(2) {
-  left: 49%;
+  left: 4%;
-  top: 29%;
+  top: 30%;
 }
 
 .object:nth-child(3) {
-  left: 29%;
+  left: 71%;
   top: 52%;
 }
 
 .object:nth-child(4) {
-  left: 65%;
+  left: 15%;
-  top: 39%;
+  top: 59%;
 }
 
 .object:nth-child(5) {
-  left: 31%;
+  left: 58%;
-  top: 87%;
+  top: 34%;
 }
 
 .netherlands {
@@ -569,6 +569,27 @@ body {
   border-color: white;
 }
 
+.landingPageJuli .nextButton1 {
+  position: absolute;
+  bottom: 13px;
+  right: 8px;
+  background: #ff3f1d;
+  color: white;
+  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;
+}
+
+.landingPageJuli .nextButton1:hover {
+  background: white;
+  color: black;
+  border-color: white;
+}
+
 .landingPageRaph {
   position: absolute;
   background: black;
@@ -1520,10 +1541,14 @@ body {
   font-size: 25pt;
   font-weight: normal;
   color: white;
-  left: 50%;
+  width: 40%;
-  top: 50%;
+  -webkit-transition: top 10s linear, left 10s linear;
-  -webkit-transform: translate(-50%, -50%);
+  transition: top 10s linear, left 10s linear;
-          transform: translate(-50%, -50%);
+}
+
+.texteGM img {
+  width: 30%;
+  display: inline-block;
 }
 
 .map-container {

styles.scss

@@ -598,6 +598,28 @@ body{
         }
     }
 
+    .nextButton1 {
+        position: absolute;
+        bottom: 13px;
+        right: 8px;
+        // margin: 3px;
+        background: $red;
+        color: rgb(255, 255, 255);
+        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;
+
+        &:hover {
+            background: white;
+            color: rgb(0, 0, 0);
+            border-color: white;
+        }
+    }
+
     // .LienEpisode2 {
     //     position: absolute;
     //     top: 30vw;
@@ -1592,6 +1614,7 @@ body{
     font-family: Helvetica;
     font-size: 1vw;
     font-weight: normal;
+
 }
 
 .texteGM{
@@ -1600,9 +1623,18 @@ body{
     font-size: 25pt;
     font-weight: normal;
     color: rgb(255, 255, 255);
-    left: 50%;
+    width: 40%;
-    top: 50%;
+
-    transform: translate(-50%, -50%);
+    // left: 60%;
+    // top: 50%;
+    // transform: translate(-50%, -50%);
+
+    transition: top 10s linear, left 10s linear;
+
+    img{
+        width: 30%;
+        display: inline-block;
+    }
 }