addition red point

2harkinengel.html

@@ -64,6 +64,9 @@
                 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">

hpJuli.html

@@ -24,6 +24,11 @@
                 <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

styles.css

@@ -271,28 +271,28 @@ body {
 }
 
 .object:nth-child(1) {
-  left: 7%;
-  top: 34%;
+  left: 38%;
+  top: 73%;
 }
 
 .object:nth-child(2) {
-  left: 13%;
-  top: 31%;
+  left: 45%;
+  top: 32%;
 }
 
 .object:nth-child(3) {
-  left: 30%;
-  top: 38%;
+  left: 36%;
+  top: 63%;
 }
 
 .object:nth-child(4) {
-  left: 43%;
-  top: 28%;
+  left: 44%;
+  top: 18%;
 }
 
 .object:nth-child(5) {
-  left: 71%;
-  top: 58%;
+  left: 81%;
+  top: 24%;
 }
 
 .netherlands {
@@ -820,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;
@@ -1108,4 +1127,29 @@ body {
   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 */

styles.scss

@@ -826,7 +826,27 @@ 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;
@@ -1130,6 +1150,28 @@ body{
         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%;
+    }
+
+
     
 }