Home Explore Help
Register Sign In
parzen
/
indiescience
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

5 juin 2021

xxxgogo77 3 years ago
parent
79f0b0b27f
commit
5c12565a5b
44 changed files with 2020 additions and 128 deletions
Split View Show Diff Stats
  1. 6 0
      0manifesto.html
  2. 4 0
      1beantobar.html
  3. 1 1
      2harkinengel.html
  4. 99 20
      3livingincome.html
  5. 70 0
      4individual.html
  6. 69 0
      5overall.html
  7. BIN
      BGoutlineBlc.png
  8. BIN
      BGoutlineNoir.png
  9. BIN
      IconHpCamilleBW.png
  10. BIN
      IconHpCamilleRed.png
  11. BIN
      ImgCamille.png
  12. BIN
      ImgCoin.png
  13. BIN
      ImgLeaves.png
  14. BIN
      ImgWholeEarthCatalog.png
  15. BIN
      ImgWholeEarthCatalog.psd
  16. BIN
      PageJuli.pdf
  17. BIN
      PageLison.jpg
  18. BIN
      PageLison.pdf
  19. BIN
      PageProtocol.jpg
  20. 89 0
      TestIndex.html
  21. BIN
      backgroundnetherlands.jpg
  22. BIN
      backgroundproducercountries.jpg
  23. BIN
      fonts/Self Modern Italic.otf
  24. BIN
      fromebeantobarN.png
  25. BIN
      fromebeantotbarB.png
  26. 77 0
      homepage.html
  27. 71 0
      hpCamille.html
  28. 26 3
      hpGianmarco.html
  29. 74 0
      hpJuli.html
  30. BIN
      iconLandingpageJuliBW.png
  31. BIN
      iconLandingpageJuliRed.png
  32. BIN
      iconLandingpageLisonBW.png
  33. BIN
      iconLandingpageLisonRed.png
  34. BIN
      iconLandingpageRaphaelleBW.png
  35. BIN
      iconLandingpageRaphaelleRed.png
  36. 5 51
      index.html
  37. 62 2
      js/application.js
  38. 32 0
      netherlands.html
  39. 34 0
      producerscountries.html
  40. BIN
      someThoughtsBlanc.png
  41. BIN
      someThoughtsNoir.png
  42. 639 32
      styles.css
  43. 0 0
      styles.css.map
  44. 662 19
      styles.scss

+ 6 - 0
0manifesto.html
View File 

@@ -18,6 +18,10 @@
 
     </head>
 
     <body class="bodyManifestoPage">
 
 
+        <img class="somethoughts" src="someThoughtsNoir.png"/>
 
+
 
+        <div class="noScroll">
 
+
 
             <div class="thoughtsWindows">
 
                 <div class="april">
 
                     <div class="entête">
 
@@ -45,6 +49,8 @@
 
                 <a href="index.html"><div class=buttonsMenu>home</div></a>
 
                 <a href="1beantobar.html"><div class=buttonsMenu>next</div></a>
 
             </div>
 
+
 
+        </div>
 
        
     </body>
 
 </html>

+ 4 - 0
1beantobar.html
View File 

@@ -18,6 +18,8 @@
 
     </head>
 
     <body class="bodyManifestoPage">
 
 
+        <div class="noScroll">
 
+
 
             <div class="thoughtsWindows">
 
                 <div class="beantobar">
 
                     <div class="entête">
 
@@ -61,6 +63,8 @@
 
                 <a href="0manifesto.html"><div class=buttonsMenu>previous</div></a>
 
                 <a href="2harkinengel.html"><div class=buttonsMenu>next</div></a>
 
             </div>
 
+
 
+        </div>
 
        
     </body>
 
 </html>

+ 1 - 1
2harkinengel.html
View File 

@@ -16,7 +16,7 @@
 
         <script src="js/application.js"></script>
 
 
     </head>
 
-    <body>
 
+    <body class="bodyPageDraggeable">
 
 
         <!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
 
         <div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->

+ 99 - 20
3livingincome.html
View File 

@@ -16,56 +16,135 @@
 
         <script src="js/application.js"></script>
 
 
     </head>
 
-    <body>
 
+    <body class="bodyPageDraggeable">
 
 
         <!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
 
         <div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->
 
 
         <div class="quotes" id="theharkinengel">
 
             <div class="entête">
 
-                <div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
 
-                <div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
 
+                <div class="titre">Paying the price of chocolate</div>
 
+                <div class="linksource"><a href="https://www.confectionerynews.com/Article/2014/07/10/Price-of-Chocolate-Breaking-poverty-cycle-in-cocoa-farming?utm_source=copyright&utm_medium=OnSite&utm_campaign=copyright">LINK SOURCE</a></div>
 
             </div>
 
-            <div class="texte">The Harkin–Engel Protocol is a <mark>public-private agreement</mark> to eliminate the worst forms of child labor (defined according to the International Labour Organization (ILO)'s Convention 182) in the growth and processing of cocoa in Côte d’Ivoire and Ghana. The protocol was a voluntary agreement that partnered governments, the global cocoa industry, cocoa producers, cocoa laborers, non-governmenal organizations. The agreement laid out a series of date-specific actions, including the development of voluntary standards of public certification. The Protocol did not commit the industry to ending all child labor in cocoa production, <mark>only the worst forms of it</mark>. The parties agreed to a six-article plan:
 
+            <div class="texte">[...] Andy Harner, global cocoa vice president at Mars Chocolate  
+                <i>“I would disagree with any naive thought of just passing through price increases to farmers. It's unfortunately more complicated than that.”</i> 
+                He said while the industry agreed that farmers needed higher incomes, <mark>It was more sustainable to empower farmers to negotiate a fairer price and to lobby producing countries to award farmers a greater percentage of the global cocoa price</mark>. This strategy has been employed by Cocoa Action, an industry initiative by manufacturers and processors including Mondelēz, Barry Callebaut and Cargill that aims to improve farmer yields through fertilizer use and training. [...] Mars’ Andy Harner said it was a naive assumption to add 3% for the price and then try to add that 3% to a cocoa farmers’ price. <i>“The supply chain really isn't that direct and transparent,”​</i> he said.
 
+                
             </div>
 
         </div>
 
 
         <div class="quotes" id="inapril2018">
 
             <div class="entête">
 
-                <div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
 
-                <div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
 
+                <div class="titre">Cocoa Barometer</div>
 
+                <div class="linksource"><a href="https://www.voicenetwork.eu/wp-content/uploads/2021/03/2020-Cocoa-Barometer-EN.pdf">LINK SOURCE</a></div>
 
             </div>
 
-            <div class="texte">In April 2018, the Cocoa Barometer 2018 report on the $100-billion industry, said this about the child labor situation: <mark>"Not a single company or government is anywhere near reaching the sectorwide objective of the elimination of child labour, and not even near their commitments of a 70% reduction of child labour by 2020".</mark> 
+            <div class="texte">Current efforts focus on technical solutions such as increasing productivity and
 
+                diversifying production. Though these are necessary steps, these technical
 
+                solutions alone will not suffice. Additionally, technical approaches also
 
+                have their own challenges, and require available and affordable inputs,
 
+                labour and financing.[...]
 
+                <mark>Farm gate prices are a key missing ingredient</mark>, and are a short term
 
+                solution that every company can engage in almost immediately. <mark>The Living
 
+                Income Differential - a $400 per tonne premium - has been implemented
 
+                by the main cocoa growing countries Côte d'Ivoire and Ghana, thereby
 
+                raising farm gate prices by 21% and 28% respectively. This is an important
 
+                step, although is far from sufficient to provide farmers a living income,
 
+                despite its name</mark>. Additionally, concerns remain at the lack of inclusion of
 
+                other stakeholders in the development of these plans, including farmer
 
+                organisations, civil society, and other cocoa producing governments.                
             </div>
 
         </div>
 
 
         <div class="quotes" id="theprotocollaidout">
 
             <div class="entête">
 
-                <div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
 
-                <div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
 
+                <div class="titre">Taza Chocolate transparency report</div>
 
+                <div class="linksource"><a href="https://www.tazachocolate.com/pages/2016-transparency-report">LINK SOURCE</a></div>
 
             </div>
 
-            <div class="texte"><mark>The protocol laid out a non-binding agreement for the cocoa industry to regulate itself without any legal implications</mark>, but Engel threatened to reintroduce legislation if the deadlines were not met. This agreement was one of the first times an American industry was subjected to self-regulation and <mark>one of the first times self-regulation was used to address an international human rights issue</mark>. 
+            <div class="texte">Other benefits are less obvious but just as valuable. <mark>The world market for cacao is marked by high price volatility. Small-scale producers end up at the mercy of market forces entirely outside their control</mark>, resulting in boom and bust cycles that at best discourage farmers from investing in growing more cacao, and at worst, bankrupt them entirely. Some of our partners offer farmers much needed stability by paying a fixed price for their beans, well above the world market price, which is set at the start of the harvest and guaranteed through the season. 
+            </div>
 
+        </div>
 
+
 
+        <div class="quotes" id="theprotocollaidout">
 
+            <div class="entête">
 
+                <div class="titre">Taza Chocolate transparency report</div>
 
+                <div class="linksource"><a href="https://www.tazachocolate.com/pages/2016-transparency-report">LINK SOURCE</a></div>
 
+            </div>
 
+            <div class="texte">I also came to appreciate the limitations of my original question. <mark>The price paid for cacao matters, but it needs to be multiplied by the volume of cacao produced in order to reveal a farmer’s total income</mark>. Similarly, income tells only half the story (or less, if the farmer gets additional money from growing coffee or other work), because if a producer sells a lot of cacao but spends a fortune on fertilizer to grow it or logistics to transport it, they may end up losing money. And all this before considering a place’s cost of living! Clearly, the more I learned, the more questions arose. [...] From my perspective, as an advocate for small farmers, I need price to be above cost of production — at least by 20 percent or more. However, we don’t know enough about cost of production and farmer incomes for coffee and cocoa. We have small data sets and handpicked examples. <mark>We need to learn the relationship between farmer income and a living income</mark>. So… yes, price is important but is still a limited indicator of sustainability and farmer livelihoods. 
             </div>
 
         </div>
 
 
         <div class="quotes" id="in2009">
 
             <div class="entête">
 
-                <div class="titre">Harkin–Engel Protocol Wikipedia Page</div>
 
-                <div class="linksource"><a href="https://en.wikipedia.org/wiki/Harkin%E2%80%93Engel_Protocol">LINK SOURCE</a></div>
 
+                <div class="titre">Cocoa Barometer</div>
 
+                <div class="linksource"><a href="https://www.voicenetwork.eu/wp-content/uploads/2021/03/2020-Cocoa-Barometer-EN.pdf">LINK SOURCE</a></div>
 
             </div>
 
-            <div class="texte">In 2009, cocoa from Côte d'Ivoire and Nigeria was added to a list of products made by forced child labor maintained by the Department of Labor. This listing stemmed from a request by Anti-Slavery International in 2004 to investigate if Ivorian cocoa should be on this list. Executive Order 13126 requires federal contractors who supply products on the list must prove they have made a good faith effort to determine if the products were produced under forced labor. Thus <mark>contractors must prove they have made a good faith effort to determine if cocoa was produced under forced labor</mark>. 
+            <div class="texte">Until the Ivorian and Ghanaian governments combined forces to introduce
 
+                the Living Income Differential, farmers were almost entirely dependent
 
+                on the world market for the setting of the farm gate price. <mark>Though
 
+                markets can work well to set proper price levels when all actors have
 
+                countervailing power, this is not the case in the cocoa sector. One of the
 
+                key determinants for a farmers income is therefore imposed on him. This
 
+                asymmetrical power balance doesn’t just lead to low farm gate prices,</mark>
 
+                it also leads to a very skewed distribution of value in the supply chain;
 
+                farmers live in extreme poverty in a multi-billion dollar industry.
 
             </div>
 
         </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 class="quotes" id="in2009">
 
+            <div class="entête">
 
+                <div class="titre">Cocoa Barometer</div>
 
+                <div class="linksource"><a href="https://www.voicenetwork.eu/wp-content/uploads/2021/03/2020-Cocoa-Barometer-EN.pdf">LINK SOURCE</a></div>
 
+            </div>
 
+            <div class="texte">One of the arguments that companies must follow the world market
 
+                price, is that the chocolate sector is a competitive one, and that
 
+                companies cannot afford to unilaterally pay higher prices. However,
 
+                in the past decade, Nestlé has bought back around $46 billion USD
 
+                (Nestlé Global 2020) in stockholder shares. In early 2020, the Ferrero
 
+                family paid itself an annual dividend of €642 million (Neate 2020).
 
+                A rough calculation shows that a chocolate company like Ferrero,
 
+                sourcing 135,000 metric tonnes of cocoa per year could give every
 
+                single cocoa farming household it sources from (circa 90,000 farmers
 
+                producing 1.5 tonnes per household) a living income for the year
 
+                ($5,500 per household for Côte d’Ivoire), leading to a cost of at most
 
+                $450 million. This would still leave the company around €192 million it
 
+                could pay out to its owning family - the richest family in Italy.
 
+                <mark>If chocolate companies are able to spend that kind of money on their
 
+                stockholders and owners, there is simply no excuse for companies not
 
+                to pay prices that ensure a living income.</mark>                
+            </div>
 
         </div>
 
+
 
+        <div class="moreResources">
 
+            <div class="livingincome">
 
+                <div class="entête">
 
+                    <div class="titre">more resources</div>
 
+                </div>
 
+                <div class="texte">
 
+                    <a href="https://dailycoffeenews.com/2017/09/19/farmgate-price-an-important-but-partial-piece-of-the-sustainability-puzzle/ ">Farmgate price, an important but partial piece of the sustainability puzzle</a>
 
+                    <br><a href="https://makechocolatefair.org/issues/cocoa-prices-and-income-farmers-0">Cocoa prices and income of farmers</a>
 
+                </div>
 
+            </div>
 
         </div>
 
 
+        <div class="personnalText">
 
+            <div class="personnalTextLivingIncome" contenteditable="true">
 
+            The farm gate price, the living income of farmers, the cocoa price market, the cocoa price volatility; these are the different notions that are addressed when we look at the creation of a living income for farmers.
 
+            How can a living income or a farm price, which to be fair should be fixed and defined, coexist with a market that makes prices fluctuate?
 
+            </div>
 
+        </div> 
+
 
+        <div class="personnalText">
 
+            <div class="personnalTextLivingIncome2" contenteditable="true">
 
+            Ghana and Côte d'Ivoire have introduced a living income (if I understand correctly it is a farm price). The living income differential is calculated on yield forecasts, so it is not adjustable or proportional. It is a fixed income per bag of cocoa, so the farm infrastructure must be able to produce enough bags to ensure a good income for all farm workers.
 
+            </div>
 
+        </div> 
+
 
+        <div class="personnalText">
 
+            <div class="personnalTextLivingIncome3" contenteditable="true">
 
+                The cocoa price market is the stock price of cocoa, which sets the farm-gate price but in relation to the volatility of the cocoa price. the living income differential set up in Ghana and the Ivory Coast ensures a minimum income for farmers to protect them from market fluctuations.
 
+            </div>
 
+        </div> 
+
 
             <div class="wholeBoxEditable">
 
             <div class="zoneDragBoxEditable"></div>
 
             <textarea class="boxEditable" placeholder="Write here and move" contenteditable="true"></textarea>
 
@@ -98,7 +177,7 @@
 
         <div class="menu">
 
             <a href="index.html"><div class=buttonsMenu>home</div></a>
 
             <a href="2harkinengel.html"><div class=buttonsMenu>previous</div></a>
 
-            <a href=""><div class=buttonsMenu>next</div></a>
 
+            <a href="4individual.html"><div class=buttonsMenu>next</div></a>
 
         </div>
 
        
     </body>

+ 70 - 0
4individual.html
View File 

@@ -0,0 +1,70 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="bodyManifestoPage">
 
+
 
+        <div class="noScroll">
 
+
 
+            <!-- <div class="thoughtsWindows">
 
+                <div class="beantobar">
 
+                    <div class="entête">
 
+                        <div class="titre">from bean to bar</div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">Chocolate, as finished or semi-finished product, is made from cocoa beans that grow on cocoa trees. The cocoa tree is a tropical species that grows at low altitudes in a hot and humid climate, preferably in regions of the world near the equator. The main countries where cocoa is cultivated are, in order of production size, Côte d'Ivoire, Ghana, Indonesia, Nigeria, Cameroon, Brazil and Equator. More than 80% of the world's cocoa production comes from family farms of less than 5 hectares.
 
+                        When the cocoa beans are ripe, they are manually removed from the pod. Then the beans are fermented and dried, then washed. It is with this raw material that the manufacture of chocolate begins. The beans are sold to large western industries such as Cargill or Barry Callebaut, who process 70% of the world's cocoa.
 
+                        The beans are roasted, dehulled, crushed and kneaded. The chocolate is then crystallized and molded or coated. The finished product is packaged and distributed through sales channels.                        
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="thoughtsWindows">
 
+                <div class="tonys">
 
+                    <div class="entête">
 
+                        <div class="titre">tony's chocolate</div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">Tony's chocolate is a Dutch chocolate brand that claims to be 100% slave free. Indeed, child labor and modern slavery are the curse of the chocolate industry. As in every model of modern agriculture and supply chain this is explain by a pressure not in the middle of the chain leads by profits. Indeed, the cocoa producers are millions of small familial farms, and at the end of the chain, the consumer of chocolate who is also counts by billions. Unfortunately, the cocoa producers don’t sell directly to the consumer but have to trade with big companies who have the weight to make pressure on prices and productivity. And poverty can leads to child labor and modern slavery. Certifications or regulations are not sufficient to ensure an appropriate income for farmers.
 
+                        <br><i>“On its own, a certification label does not enable farmers to live above the poverty line and provide a decent income for their families.”</i>
 
+                        <br>Tony’s Chocolate proposes several principles for the companies to act. To invest in farmers cooperatives who will act locally with the farmers and therefore organize a collective force. To pay the farmers more to increase their living income. And to set up a traceability of cocoa, because during the purchase and processing of cocoa beans by western companies, certified and non-certified beans are gathered to produce chocolate.
 
+                        <br><i>“If you buy a bar of chocolate made with certified cocoa you know that somewhere in the world the equivalent quantity of certified beans was purchased. But they're not necessarily in your bar.”</i>                        
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="thoughtsWindows">
 
+                <div class="issues">
 
+                    <div class="entête">
 
+                        <div class="titre"><a href="https://www.10campaign.com/issues/">10campaign/issues</a></div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">As we have seen, the production chain is very long, both because of the stages of transformation from raw material to consumption, but also because of the many actors involved. Thus actors and stages of transformation are key points that put pressure on the whole chain. Many producers and farms are involved in this massive production which will then be consumed massively, there are two distinct poles (geographical and political) on one side producers and on the other side consumers who in terms of individuals and human beings are much more numerous than the few multinationals which constrain and decide on the whole production. The market is highly inequitable.                        
+                    </div>
 
+                </div>
 
+            </div> -->
 
+
 
+            <div class="menu">
 
+                <a href="index.html"><div class=buttonsMenu>home</div></a>
 
+                <a href="3livingincome.html"><div class=buttonsMenu>previous</div></a>
 
+                <a href="5overall.html"><div class=buttonsMenu>next</div></a>
 
+            </div>
 
+       
+        </div>
 
+
 
+    </body>
 
+</html>

+ 69 - 0
5overall.html
View File 

@@ -0,0 +1,69 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="bodyManifestoPage">
 
+
 
+        <div class="noScroll">
 
+
 
+            <!-- <div class="thoughtsWindows">
 
+                <div class="beantobar">
 
+                    <div class="entête">
 
+                        <div class="titre">from bean to bar</div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">Chocolate, as finished or semi-finished product, is made from cocoa beans that grow on cocoa trees. The cocoa tree is a tropical species that grows at low altitudes in a hot and humid climate, preferably in regions of the world near the equator. The main countries where cocoa is cultivated are, in order of production size, Côte d'Ivoire, Ghana, Indonesia, Nigeria, Cameroon, Brazil and Equator. More than 80% of the world's cocoa production comes from family farms of less than 5 hectares.
 
+                        When the cocoa beans are ripe, they are manually removed from the pod. Then the beans are fermented and dried, then washed. It is with this raw material that the manufacture of chocolate begins. The beans are sold to large western industries such as Cargill or Barry Callebaut, who process 70% of the world's cocoa.
 
+                        The beans are roasted, dehulled, crushed and kneaded. The chocolate is then crystallized and molded or coated. The finished product is packaged and distributed through sales channels.                        
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="thoughtsWindows">
 
+                <div class="tonys">
 
+                    <div class="entête">
 
+                        <div class="titre">tony's chocolate</div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">Tony's chocolate is a Dutch chocolate brand that claims to be 100% slave free. Indeed, child labor and modern slavery are the curse of the chocolate industry. As in every model of modern agriculture and supply chain this is explain by a pressure not in the middle of the chain leads by profits. Indeed, the cocoa producers are millions of small familial farms, and at the end of the chain, the consumer of chocolate who is also counts by billions. Unfortunately, the cocoa producers don’t sell directly to the consumer but have to trade with big companies who have the weight to make pressure on prices and productivity. And poverty can leads to child labor and modern slavery. Certifications or regulations are not sufficient to ensure an appropriate income for farmers.
 
+                        <br><i>“On its own, a certification label does not enable farmers to live above the poverty line and provide a decent income for their families.”</i>
 
+                        <br>Tony’s Chocolate proposes several principles for the companies to act. To invest in farmers cooperatives who will act locally with the farmers and therefore organize a collective force. To pay the farmers more to increase their living income. And to set up a traceability of cocoa, because during the purchase and processing of cocoa beans by western companies, certified and non-certified beans are gathered to produce chocolate.
 
+                        <br><i>“If you buy a bar of chocolate made with certified cocoa you know that somewhere in the world the equivalent quantity of certified beans was purchased. But they're not necessarily in your bar.”</i>                        
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="thoughtsWindows">
 
+                <div class="issues">
 
+                    <div class="entête">
 
+                        <div class="titre"><a href="https://www.10campaign.com/issues/">10campaign/issues</a></div>
 
+                        <div class="date"></div>
 
+                    </div>
 
+                    <div class="texte">As we have seen, the production chain is very long, both because of the stages of transformation from raw material to consumption, but also because of the many actors involved. Thus actors and stages of transformation are key points that put pressure on the whole chain. Many producers and farms are involved in this massive production which will then be consumed massively, there are two distinct poles (geographical and political) on one side producers and on the other side consumers who in terms of individuals and human beings are much more numerous than the few multinationals which constrain and decide on the whole production. The market is highly inequitable.                        
+                    </div>
 
+                </div>
 
+            </div> -->
 
+
 
+            <div class="menu">
 
+                <a href="index.html"><div class=buttonsMenu>home</div></a>
 
+                <a href="3livingincome.html"><div class=buttonsMenu>previous</div></a>
 
+            </div>
 
+       
+        </div>   
+
 
+    </body>
 
+</html>

BIN
BGoutlineBlc.png
View File


BIN
BGoutlineNoir.png
View File


BIN
IconHpCamilleBW.png
View File


BIN
IconHpCamilleRed.png
View File


BIN
ImgCamille.png
View File


BIN
ImgCoin.png
View File


BIN
ImgLeaves.png
View File


BIN
ImgWholeEarthCatalog.png
View File


BIN
ImgWholeEarthCatalog.psd
View File


BIN
PageJuli.pdf
View File


BIN
PageLison.jpg
View File


BIN
PageLison.pdf
View File


BIN
PageProtocol.jpg
View File


+ 89 - 0
TestIndex.html
View File 

@@ -0,0 +1,89 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="bodyTestIndex">
 
+
 
+        <div class="noScroll">
 
+
 
+        <div id="trigger2">
 
+            <img src="ImgJuli.png"/>
 
+            <a href=""></a>
 
+        </div>
 
+
 
+        <div id="trigger">
 
+            <img src="ImgChocolateBar.png"/>
 
+            <a href=""></a>
 
+        </div>
 
+
 
+        <div id="bg">
 
+                <div class="title">Chocolate Atlas</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 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>
 
+
 
+                <div class="title2">This is my project</div>
 
+                <div class="texte2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
+                        <p>Name</p></div>
 
+
 
+                <div class="title3">An other project</div>
 
+                <div class="texte3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
+                        <p>Name</p></div>
 
+        </div>
 
+
 
+
 
+
 
+        <!-- <div class="hoverTwo">
 
+            <div class="title">Again an other title</div>
 
+            <div class="texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
+                <p>Someone</p></div>
 
+            </div>
 
+            <div class="objectTestIndex" id="objectTwo">
 
+                <img src="ImgLison.png"/>
 
+                <a href="PageLison.pdf"></a>
 
+        </div>  -->
 
+
 
+        <!-- <div class="objectTestIndex">
 
+            <img src="ImgRaphaelle.png"/>
 
+            <a href="PageRaphaelle.jpg"></a>
 
+        </div>
 
+
 
+        <div class="objectTestIndex">
 
+            <img src="ImgJuli.png"/>
 
+            <a href="PageJuli.pdf"></a>
 
+        </div>
 
+
 
+        <div class="objectTestIndex">
 
+            <img src="ImgWholeEarthCatalog.png"/>
 
+            <a href="0manifesto.html"></a>
 
+        </div> -->
 
+
 
+        <div class="menu">
 
+            <a href="landingPage.html"><div class=buttonsMenu>about us</div></a>
 
+        </div>
 
+
 
+
 
+    </div>
 
+       
+    </body>
 
+</html>

BIN
backgroundnetherlands.jpg
View File


BIN
backgroundproducercountries.jpg
View File


BIN
fonts/Self Modern Italic.otf
View File


BIN
fromebeantobarN.png
View File


BIN
fromebeantotbarB.png
View File


+ 77 - 0
homepage.html
View File 

@@ -0,0 +1,77 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="homepage">
 
+
 
+        <div class="noScroll">
 
+
 
+        <div class="object">
 
+            <img src="iconLandingpageRaphaelleBW.png" id="BW"/>
 
+            <img src="iconLandingpageRaphaelleRed.png" id="Rd"/>
 
+            <a href="hpRaphaelle.html"></a>
 
+            <p>Raphaelle</p>
 
+        </div>
 
+
 
+        <div class="object">
 
+            <img src="iconLandingpageJuliBW.png" id="BW"/>
 
+            <img src="iconLandingpageJuliRed.png" id="Rd"/>
 
+            <a href="hpJuli.html"></a>
 
+            <p>Juli</p>
 
+        </div>
 
+
 
+        <div class="object">
 
+            <img src="iconLandingpageLisonBW.png" id="BW"/>
 
+            <img src="iconLandingpageLisonRed.png" id="Rd"/>
 
+            <a href="hpLison.html"></a>
 
+            <p>Lison</p>
 
+        </div>
 
+
 
+        <div class="object">
 
+            <img src="IconHpCamilleBW.png" id="BW"/>
 
+            <img src="IconHpCamilleRed.png" id="Rd"/>
 
+            <a href="hpCamille.html"></a>
 
+            <p>Camille</p>
 
+        </div>
 
+
 
+
 
+        <div class="menu">
 
+            <!-- <a href="landingPage.html"><div class="buttonsMenu">about us</div></a> -->
 
+            <a href="index.html"><div class="buttonsMenu">cocoa catalog</div></a>
 
+          <div id="aboutUs">about us</div>
 
+        </div>
 
+
 
+        <div class="hoverAboutUs"><img src="ImgProtocol.png"/><div class="closeButton">X</div></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> -->
 
+
 
+    </div>
 
+       
+    </body>
 
+</html>

+ 71 - 0
hpCamille.html
View File 

@@ -0,0 +1,71 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="home">
 
+
 
+        <div class="noScroll">
 
+
 
+            <div class="objectCamille">
 
+                <a href="0manifesto.html">
 
+                <img src="ImgWholeEarthCatalog.png" class="icon"/>
 
+                <img src="someThoughtsBlanc.png" class="hover"/>
 
+                </a>
 
+            </div>
 
+
 
+            <div class="objectCamille">
 
+                <a href="1beantobar.html">
 
+                <img src="ImgWholeEarthCatalog.png" class="icon"/>
 
+                <img src="someThoughtsBlanc.png" class="hover"/>
 
+                </a>
 
+            </div>
 
+
 
+        </div>
 
+
 
+        <div class="iconsSideMenu">
 
+            <a href="hpJuli.html"><img src="iconLandingpageJuliBW.png"></a>
 
+            <a href="hpLison.html"><img src="iconLandingpageLisonBW.png"></a>
 
+            <a href="hpCamille.html"><img src="IconHpCamilleRed.png"></a>
 
+            <a href="hpRaphaelle.html"><img src="iconLandingpageRaphaelleBW.png"></a>
 
+            <!-- <a href="hpGianmarco.html"><img src="ImgChocolatePlanet.png"></a> -->
 
+        </div>
 
+
 
+
 
+        <div class="menu">
 
+            <!-- <a href="landingPage.html"><div class="buttonsMenu">about us</div></a> -->
 
+            <a href="homepage.html"><div class="buttonsMenu">cocoa catalog</div></a>
 
+            <div class="buttonsMenu" id="aboutUs">about us</div>
 
+        </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> -->
 
+
 
+    </div>
 
+       
+    </body>
 
+</html>

+ 26 - 3
landingPage.html → hpGianmarco.html
View File 

@@ -18,8 +18,30 @@
 
     </head>
 
     <body class="home">
 
 
+        <div class="noScroll">
 
 
-        <div class=landingPage>
 
+        <div class="object">
 
+            <img src="ImgChocolateBar.png"/>
 
+            <a href="hpGianmarco.html"></a>
 
+            <p>Gianmarco</p>
 
+        </div>
 
+
 
+        <div class="iconsSideMenu">
 
+            <a href="hpJuli.html"><img src="ImgChocolatePlanet.png"></a>
 
+            <a href="hpLison.html"><img src="ImgChocolatePlanet.png"></a>
 
+            <a href="hpCamille.html"><img src="ImgChocolatePlanet.png"></a>
 
+            <a href="hpRaphaelle.html"><img src="ImgChocolatePlanet.png"></a>
 
+            <a href="hpGianmarco.html"><img src="ImgChocolatePlanet.png"></a>
 
+        </div>
 
+
 
+
 
+        <div class="menu">
 
+            <!-- <a href="landingPage.html"><div class="buttonsMenu">about us</div></a> -->
 
+            <a href="homepage.html"><div class="buttonsMenu">cocoa catalog</div></a>
 
+            <div class="buttonsMenu" id="aboutUs">about us</div>
 
+        </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
 
@@ -30,9 +52,10 @@
 
                 at Design Academy of Eindhoven
 
                <br>Curated and edited
 
                by Lison, Julia, Camille, Raphaelle, Gianmarco</p>
 
-            <a href="index.html"><div class=buttonEnter>enter</div></a>
 
-        </div>
 
+            <div class=buttonEnter>enter</div>
 
+        </div> -->
 
 
+    </div>
 
        
     </body>
 
 </html>

+ 74 - 0
hpJuli.html
View File 

@@ -0,0 +1,74 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="home">
 
+
 
+        <div class="noScroll">
 
+
 
+        <div class="landingPageJuli">
 
+            <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">
 
+            <img src="ImgProtocol.png"/>
 
+            <div class="closeButton">X</div>
 
+        </div>
 
+
 
+        <div class="LienEpisode2"><img src="ImgJuli.png"/></div>
 
+        <div class="ImgEpisode2">
 
+            <img src="ImgProtocol.png"/>
 
+            <div class="closeButton">X</div>
 
+        </div>
 
+
 
+        </div>
 
+
 
+        <div class="iconsSideMenu">
 
+            <a href="hpJuli.html"><img src="iconLandingpageJuliRed.png"></a>
 
+            <a href="hpLison.html"><img src="iconLandingpageLisonBW.png"></a>
 
+            <a href="hpCamille.html"><img src="IconHpCamilleBW.png"></a>
 
+            <a href="hpRaphaelle.html"><img src="iconLandingpageRaphaelleBW.png"></a>
 
+            <!-- <a href="hpGianmarco.html"><img src="ImgChocolatePlanet.png"></a> -->
 
+        </div>
 
+
 
+
 
+        <div class="menu">
 
+            <!-- <a href="landingPage.html"><div class="buttonsMenu">about us</div></a> -->
 
+            <a href="homepage.html"><div class="buttonsMenu">cocoa catalog</div></a>
 
+            <div class="buttonsMenu" id="aboutUs">about us</div>
 
+        </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> -->
 
+
 
+    </div>
 
+       
+    </body>
 
+</html>

BIN
iconLandingpageJuliBW.png
View File


BIN
iconLandingpageJuliRed.png
View File


BIN
iconLandingpageLisonBW.png
View File


BIN
iconLandingpageLisonRed.png
View File


BIN
iconLandingpageRaphaelleBW.png
View File


BIN
iconLandingpageRaphaelleRed.png
View File


+ 5 - 51
index.html
View File 

@@ -18,60 +18,14 @@
 
     </head>
 
     <body class="home">
 
 
-        <div class="object">
 
-            <img src="ImgChocolateBar.png"/>
 
-            <a href="2harkinengel.html"></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">
 
-            <img src="ImgWholeEarthCatalog.png"/>
 
-            <a href="0manifesto.html"></a>
 
-            <p>thoughts</p>
 
-        </div>
 
 
-        <div class="object">
 
-            <img src="ImgChocolatePlanet.png"/>
 
-            <a href="1beantobar.html"></a>
 
-            <p>whole chain</p>
 
+        <div class=landingPage>
 
+            <h1>Cocoa Catalogue</h1>
 
+            <p>
 
+                The Cocoa Catalogue unites various routes throughout the world of cocoa and chocolate. Unpacking it through various times, locations and access points that aim to diversify the picture of cocoa and the individuals involved. Adding to a usually sweetly perceived food other tastes that are part of cocoa.</p>
 
+            <a href="netherlands.html"><div class=buttonEnter>enter</div></a>
 
         </div>
 
 
-        <div class="menu">
 
-            <a href="landingPage.html"><div class=buttonsMenu>about us</div></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>

+ 62 - 2
js/application.js
View File 

@@ -14,9 +14,9 @@ $(document).ready(function(){
 
         }
 
     });
 
 
-    $(".quotes, #images").draggable({
 
+    $(".quotes, #images, .objectTestIndex, #trigger, #trigger2").draggable({
 
         start: function(){
 
-            $(".quotes, #images").css({"z-index": 0});
 
+            $(".quotes, #images, .objectTestIndex, #trigger").css({"z-index": 0});
 
             $(this).css({"z-index": 100});
 
         }
 
     });
 
@@ -45,7 +45,67 @@ $(document).ready(function(){
 
         $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
     });
 
 
+    $(".objectCamille").each(function(){
 
+        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
+    });
 
+
 
+    $("#trigger").each(function(){
 
+        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
+    });
 
+    $("#trigger2").each(function(){
 
+        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
+    });
 
+
 
     $(".buttonEnter").click(function(){
 
         $(".landingPage").fadeOut(600);
 
     })
 
+
 
+    // var poseX= 20;
 
+    // var poseY= 50;
 
+
 
+    // function floating(){
 
+    //     poseX= poseX + 1;
 
+    //     poseY= poseY + 1;
 
+    //     $("#trigger").css({"top": poseX + "%", "left": poseY + "%"});
 
+    //     console.log(poseX + "/" + poseY)
 
+    // }
 
+
 
+    // setInterval(floating, 30)
 
+
 
+    $(".LienEpisode1").on("click",function(){
 
+
 
+        $(".ImgEpisode1").css("display","block")
 
+    
+    });
 
+
 
+    $(".closeButton").on("click",function(){
 
+
 
+        $(".ImgEpisode1").css("display","none")
 
+    
+    });
 
+
 
+    $(".LienEpisode2").on("click",function(){
 
+
 
+        $(".ImgEpisode2").css("display","block")
 
+    
+    });
 
+
 
+    $(".closeButton").on("click",function(){
 
+
 
+        $(".ImgEpisode2").css("display","none")
 
+    
+    });
 
+
 
+    $("#aboutUs").on("click",function(){
 
+
 
+        $(".hoverAboutUs").css("display","block")
 
+    
+    });
 
+
 
+    $(".closeButton").on("click",function(){
 
+
 
+        $(".hoverAboutUs").css("display","none")
 
+    
+    });
 
+
 
 });

+ 32 - 0
netherlands.html
View File 

@@ -0,0 +1,32 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="home">
 
+
 
+
 
+        <div class="netherlands">
 
+            <p>
 
+                The Netherlands, more specifically Eindhoven, 
+                is where this platform had been created in 2021</p>
 
+                <a href="producerscountries.html"><div class="buttonEnter">➔</div></a>
 
+        </div>
 
+
 
+
 
+       
+    </body>
 
+</html>

+ 34 - 0
producerscountries.html
View File 

@@ -0,0 +1,34 @@
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+        <title>cocoatlas</title>
 
+        <meta name="description" content="test">
 
+        <meta name="keywords" content="chocolate, cocoa">
 
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
+        
+        <link rel="stylesheet" href="styles.css">
 
+
 
+        <script src="js/jquery-3.6.0.min.js"></script>
 
+        <script src="js/jquery-ui.min.js"></script>
 
+        <script src="js/application.js"></script>
 
+
 
+    </head>
 
+    <body class="home">
 
+
 
+
 
+        <div class="producerscountries">
 
+            <p>
 
+                You are now on the cocoa lands, where coca is 
+                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>
 
+
 
+
 
+       
+    </body>
 
+</html>

BIN
someThoughtsBlanc.png
View File


BIN
someThoughtsNoir.png
View File


+ 639 - 32
styles.css
View File 

@@ -27,15 +27,25 @@
 
   src: url("fonts/happy-times-NG_regular_master.otf") format("opentype");
 
 }
 
 
+@font-face {
 
+  font-family: 'HappyTimesOblique';
 
+  src: url("fonts/happy-times-NG_italic_master.otf") format("opentype");
 
+}
 
+
 
+@font-face {
 
+  font-family: 'SelfModern';
 
+  src: url("fonts/Self Modern Italic.otf") format("opentype");
 
+}
 
+
 
 html {
 
   height: 100%;
 
-  overflow: hidden;
 
 }
 
 
 body {
 
   margin: 0;
 
   padding: 0;
 
   background: black;
 
+  overflow: hidden;
 
 }
 
 
 .home {
 
@@ -48,6 +58,12 @@ body {
 
   background-size: cover;
 
   width: 100%;
 
   height: 100%;
 
+}
 
+
 
+.noScroll {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: absolute;
 
   overflow: hidden;
 
 }
 
 
@@ -57,7 +73,7 @@ body {
 
   font-weight: normal;
 
   position: fixed;
 
   top: 3px;
 
-  right: 3px;
 
+  left: 3px;
 
 }
 
 
 .menu .buttonsMenu {
 
@@ -68,13 +84,81 @@ body {
 
   border-style: solid;
 
   border-radius: 1vw;
 
   border-color: white;
 
-  padding: 0.2vw 0.5vw 0.2vw 0.5vw;
 
+  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
 
   cursor: pointer;
 
 }
 
 
 .menu .buttonsMenu:hover {
 
+  background: #ff3f1d;
 
+  color: black;
 
+  border-color: #ff3f1d;
 
+}
 
+
 
+#aboutUs {
 
+  background: black;
 
+  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;
 
+}
 
+
 
+#aboutUs:hover {
 
+  background: #ff3f1d;
 
+  color: black;
 
+  border-color: #ff3f1d;
 
+}
 
+
 
+.hoverAboutUs {
 
+  display: none;
 
+  position: absolute;
 
+  top: 2vw;
 
+  left: 6vw;
 
+}
 
+
 
+.hoverAboutUs .closeButton {
 
+  position: absolute;
 
+  margin: 3px;
 
+  background: black;
 
+  color: white;
 
+  display: inline-block;
 
+  border-width: 1px;
 
+  border-style: solid;
 
+  border-radius: 1vw;
 
+  border-color: white;
 
+  padding: 0.2vw 0.4vw 0.2vw 0.4vw;
 
+  cursor: pointer;
 
+  top: 2px;
 
+  right: 2px;
 
+  font-family: Helvetica;
 
+  font-size: 0.5vw;
 
+}
 
+
 
+.hoverAboutUs .closeButton:hover {
 
   background: white;
 
   color: black;
 
+  border-color: white;
 
+}
 
+
 
+.iconsSideMenu {
 
+  font-family: Helvetica;
 
+  font-size: 9pt;
 
+  font-weight: normal;
 
+  position: fixed;
 
+  display: block;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  left: 3px;
 
+}
 
+
 
+.iconsSideMenu img {
 
+  width: 5vw;
 
+  margin: 5px;
 
+  display: block;
 
 }
 
 
 .object {
 
@@ -83,11 +167,15 @@ body {
 
   cursor: move;
 
   color: white;
 
   text-align: center;
 
-  font-family: Helvetica;
 
-  font-size: 1.2vw;
 
+  font-family: SelfModern;
 
+  font-size: 1.2 vw;
 
   font-weight: normal;
 
 }
 
 
+.object #Rd {
 
+  display: none;
 
+}
 
+
 
 .object p {
 
   /*opacity: 0;
 
         transform: translateY(-50%);
 
@@ -102,8 +190,17 @@ body {
 
   display: block;
 
 }
 
 
+.object:hover #Rd {
 
+  display: block;
 
+}
 
+
 
+.object:hover #BW {
 
+  display: none;
 
+}
 
+
 
 .object img {
 
   width: 100%;
 
+  display: inline;
 
 }
 
 
 .object a {
 
@@ -119,24 +216,36 @@ body {
 
 }
 
 
 .landingPage {
 
-  position: absolute;
 
-  padding: 2vw 10vw 0 10vw;
 
+  position: relative;
 
+  padding: 9vw 20vw 0 20vw;
 
+  top: 50%;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
   background: black;
 
+  background-image: url(backgroundproducercountries.jpg);
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
   width: 100%;
 
   height: 100%;
 
   overflow: hidden;
 
   color: white;
 
   text-align: center;
 
   font-family: Helvetica;
 
-  font-size: 1.2vw;
 
+  font-size: 1vw;
 
   font-weight: normal;
 
 }
 
 
+.landingPage p {
 
+  padding: 2vw 5vw;
 
+}
 
+
 
 .landingPage h1 {
 
-  font-family: Helvetica;
 
-  font-size: 300%;
 
+  font-family: SelfModern;
 
+  font-size: 400%;
 
   font-weight: normal;
 
-  margin: 0 0 10w 0;
 
+  margin: 0 0 30w 0;
 
+  padding: 1vw;
 
 }
 
 
 .landingPage .buttonEnter {
 
@@ -144,42 +253,303 @@ body {
 
   background: black;
 
   color: white;
 
   display: inline-block;
 
+  position: fixed;
 
+  top: 60%;
 
+  right: 50%;
 
   border-width: 1px;
 
   border-style: solid;
 
   border-radius: 3vw;
 
   border-color: white;
 
-  padding: 0.5vw 1vw 0.5vw 1vw;
 
+  padding: 1.5vw 1vw 1.5vw 1vw;
 
   cursor: pointer;
 
 }
 
 
 .landingPage .buttonEnter:hover {
 
-  background: white;
 
+  background: #ff3f1d;
 
   color: black;
 
+  border-color: #ff3f1d;
 
 }
 
 
 .object:nth-child(1) {
 
-  left: 26%;
 
-  top: 74%;
 
+  left: 17%;
 
+  top: 9%;
 
 }
 
 
 .object:nth-child(2) {
 
-  left: 49%;
 
-  top: 32%;
 
+  left: 78%;
 
+  top: 54%;
 
 }
 
 
 .object:nth-child(3) {
 
-  left: 75%;
 
-  top: 31%;
 
+  left: 52%;
 
+  top: 32%;
 
 }
 
 
 .object:nth-child(4) {
 
-  left: 63%;
 
-  top: 30%;
 
+  left: 48%;
 
+  top: 86%;
 
 }
 
 
 .object:nth-child(5) {
 
-  left: 32%;
 
-  top: 88%;
 
+  left: 74%;
 
+  top: 24%;
 
+}
 
+
 
+.netherlands {
 
+  position: relative;
 
+  background: black;
 
+  background-image: url(backgroundnetherlands.jpg);
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+  color: white;
 
+  font-family: Helvetica;
 
+  font-size: 0.8vw;
 
+  font-weight: normal;
 
+}
 
+
 
+.netherlands p {
 
+  position: absolute;
 
+  left: 48vw;
 
+  width: 20vw;
 
+  top: 11vw;
 
+}
 
+
 
+.netherlands .buttonEnter {
 
+  margin: 1% 0 0 0;
 
+  background: black;
 
+  color: white;
 
+  display: inline-block;
 
+  top: 70%;
 
+  left: 50%;
 
+  position: fixed;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  -webkit-transform: translateX(-50%);
 
+          transform: translateX(-50%);
 
+  border-width: 1px;
 
+  border-style: solid;
 
+  border-radius: 3vw;
 
+  border-color: white;
 
+  font-size: 1vw;
 
+  padding: 0.5vw 0.7vw 0.5vw 0.7vw;
 
+  cursor: pointer;
 
+}
 
+
 
+.netherlands .buttonEnter:hover {
 
+  background: #ff3f1d;
 
+  color: black;
 
+  border-color: #ff3f1d;
 
+}
 
+
 
+.producerscountries {
 
+  position: relative;
 
+  background: black;
 
+  background-image: url(backgroundproducercountries.jpg);
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+  color: white;
 
+  text-align: center;
 
+  font-family: Helvetica;
 
+  font-size: 0.8vw;
 
+  font-weight: normal;
 
+}
 
+
 
+.producerscountries p {
 
+  position: absolute;
 
+  width: 30vw;
 
+  left: 35vw;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  top: 27vw;
 
+}
 
+
 
+.producerscountries .buttonEnter {
 
+  margin: 1% 0 0 0;
 
+  background: black;
 
+  color: white;
 
+  display: inline-block;
 
+  top: 70%;
 
+  left: 50%;
 
+  position: fixed;
 
+  -webkit-transform: translateY(-50%);
 
+          transform: translateY(-50%);
 
+  -webkit-transform: translateX(-50%);
 
+          transform: translateX(-50%);
 
+  border-width: 1px;
 
+  border-style: solid;
 
+  border-radius: 3vw;
 
+  border-color: white;
 
+  font-size: 1vw;
 
+  padding: 0.5vw 0.7vw 0.5vw 0.7vw;
 
+  cursor: pointer;
 
+}
 
+
 
+.producerscountries .buttonEnter:hover {
 
+  background: #ff3f1d;
 
+  color: black;
 
+  border-color: #ff3f1d;
 
+}
 
+
 
+.hpGianmarco {
 
+  margin: 0;
 
+  padding: 0;
 
+  background: black;
 
+  background-image: url(outlinebg.png);
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.homepage {
 
+  margin: 0;
 
+  padding: 0;
 
+  background: black;
 
+  background-image: url(backgroundproducercountries.jpg);
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.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;
 
+  color: white;
 
+  font-family: Helvetica;
 
+  font-size: 1vw;
 
+  font-weight: normal;
 
+}
 
+
 
+.landingPageJuli .texte {
 
+  position: absolute;
 
+  text-align: left;
 
+  width: 30vw;
 
+  margin: 10vw 20vw;
 
+}
 
+
 
+.landingPageJuli .LienEpisode1 {
 
+  position: absolute;
 
+  width: 50px;
 
+  height: 50px;
 
+  cursor: pointer;
 
+  top: 20vw;
 
+  right: 30vw;
 
+}
 
+
 
+.landingPageJuli .LienEpisode1 img {
 
+  width: 100%;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode1 {
 
+  display: none;
 
+  position: absolute;
 
+  top: 20vw;
 
+  right: 30vw;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode1 .closeButton {
 
+  background: black;
 
+  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;
 
+  top: 2px;
 
+  right: 2px;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode1 .closeButton:hover {
 
+  background: white;
 
+  color: black;
 
+  border-color: white;
 
+}
 
+
 
+.landingPageJuli .LienEpisode2 {
 
+  position: absolute;
 
+  top: 30vw;
 
+  left: 20vw;
 
+  width: 50px;
 
+  height: 50px;
 
+  cursor: pointer;
 
+}
 
+
 
+.landingPageJuli .LienEpisode2 img {
 
+  width: 100%;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode2 {
 
+  display: none;
 
+  position: absolute;
 
+  top: 30vw;
 
+  left: 20vw;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode2 .closeButton {
 
+  background: black;
 
+  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;
 
+  top: 2px;
 
+  right: 2px;
 
+}
 
+
 
+.landingPageJuli .ImgEpisode2 .closeButton:hover {
 
+  background: white;
 
+  color: black;
 
+  border-color: white;
 
+}
 
+
 
+.objectCamille {
 
+  position: relative;
 
+  width: 25vw;
 
+  color: white;
 
+  text-align: center;
 
+}
 
+
 
+.objectCamille img {
 
+  width: 100%;
 
+  position: absolute;
 
+}
 
+
 
+.objectCamille .hover {
 
+  opacity: 0;
 
+}
 
+
 
+.objectCamille:hover .hover {
 
+  opacity: 1;
 
+}
 
+
 
+.objectCamille a {
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  cursor: pointer;
 
 }
 
 
 .bodyManifestoPage {
 
@@ -252,7 +622,7 @@ body {
 
 }
 
 
 .issues a:active {
 
-  color: #9900ff;
 
+  color: #4505fa;
 
 }
 
 
 .thoughtsWindows {
 
@@ -289,6 +659,20 @@ body {
 
   padding: 20px;
 
 }
 
 
+.somethoughts {
 
+  position: absolute;
 
+  width: 50vw;
 
+  top: 8vw;
 
+  left: 5vw;
 
+}
 
+
 
+.bodyPageDraggeable {
 
+  margin: 0;
 
+  padding: 0;
 
+  background: black;
 
+  overflow: auto;
 
+}
 
+
 
 .quotes {
 
   width: 40%;
 
   position: absolute;
 
@@ -333,7 +717,7 @@ body {
 
 }
 
 
 .quotes mark {
 
-  background-color: #9900ff;
 
+  background-color: #4505fa;
 
   color: white;
 
   padding: 1px 6px 1px 6px;
 
 }
 
@@ -347,7 +731,50 @@ body {
 
 }
 
 
 .quotes a:active {
 
-  color: #9900ff;
 
+  color: #4505fa;
 
+}
 
+
 
+.moreResources {
 
+  font-family: HelveticaOblique;
 
+  font-size: 11pt;
 
+  font-weight: normal;
 
+  position: absolute;
 
+}
 
+
 
+.moreResources .entête {
 
+  text-transform: uppercase;
 
+  font-size: 10pt;
 
+  background: black;
 
+  border-width: 1px;
 
+  border-style: solid;
 
+  border-color: white;
 
+  color: #4505fa;
 
+  padding: 3px;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+}
 
+
 
+.moreResources .entête .titre {
 
+  text-align: left;
 
+  width: 50%;
 
+}
 
+
 
+.moreResources .texte {
 
+  background: white;
 
+  padding: 3px;
 
+}
 
+
 
+.moreResources a:link {
 
+  color: #4505fa;
 
+}
 
+
 
+.moreResources a:visited {
 
+  color: #4505fa;
 
+}
 
+
 
+.moreResources a:active {
 
+  color: black;
 
 }
 
 
 #inapril2018 {
 
@@ -397,8 +824,16 @@ body {
 
   width: 60vw;
 
 }
 
 
+.personnalText .personnalTextLivingIncome {
 
+  -webkit-column-count: 1;
 
+          column-count: 1;
 
+  -webkit-column-gap: 20px;
 
+          column-gap: 20px;
 
+  width: 40vw;
 
+}
 
+
 
 .wholeBoxEditable {
 
-  position: absolute;
 
+  position: fixed;
 
   display: block;
 
   width: 15vw;
 
   top: 36vw;
 
@@ -420,7 +855,7 @@ body {
 
   font-family: Helvetica;
 
   font-size: 11pt;
 
   font-weight: normal;
 
-  color: #9900ff;
 
+  color: #4505fa;
 
   background: black;
 
   margin: 2px;
 
   width: 100%;
 
@@ -437,7 +872,7 @@ body {
 
   position: fixed;
 
   border-width: 1px;
 
   border-style: solid;
 
-  border-color: #9900ff;
 
+  border-color: #4505fa;
 
   background: black;
 
   margin: 2px;
 
   color: white;
 
@@ -446,12 +881,12 @@ body {
 
 
 .instructions .buttonGoogleDoc {
 
   display: inline-table;
 
-  background: #9900ff;
 
+  background: #4505fa;
 
   color: white;
 
   border-width: 1px;
 
   border-style: solid;
 
   border-radius: 1vw;
 
-  border-color: #9900ff;
 
+  border-color: #4505fa;
 
   padding: 0.2vw 0.5vw 0.2vw 0.5vw;
 
   margin: 10px 40% 2px 40%;
 
   cursor: pointer;
 
@@ -460,7 +895,179 @@ body {
 
 
 .instructions .buttonGoogleDoc:hover {
 
   background: white;
 
-  color: #9900ff;
 
+  color: #4505fa;
 
   border-color: white;
 
 }
 
+
 
+.bodyTestIndex {
 
+  margin: 0;
 
+  padding: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+#bg {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  z-index: -20;
 
+  background: white;
 
+  font-family: Helvetica;
 
+  font-size: 11pt;
 
+  font-weight: normal;
 
+  text-align: center;
 
+  background-image: url(BGoutlineNoir.png);
 
+  background-position-y: 50px;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+}
 
+
 
+#bg .title {
 
+  font-size: 40px;
 
+  margin: 5vw 10vw 0 10vw;
 
+}
 
+
 
+#bg .texte {
 
+  margin: 1vw 20vw 0 20vw;
 
+}
 
+
 
+#bg .title2 {
 
+  display: none;
 
+}
 
+
 
+#bg .texte2 {
 
+  display: none;
 
+}
 
+
 
+#bg .title3 {
 
+  display: none;
 
+}
 
+
 
+#bg .texte3 {
 
+  display: none;
 
+}
 
+
 
+#trigger {
 
+  position: absolute;
 
+  z-index: 3;
 
+  width: 10vw;
 
+  cursor: move;
 
+}
 
+
 
+#trigger img {
 
+  width: 100%;
 
+}
 
+
 
+#trigger a {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  width: 30%;
 
+  height: 30%;
 
+  cursor: pointer;
 
+  display: block;
 
+  -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+}
 
+
 
+#trigger2 {
 
+  position: absolute;
 
+  z-index: 4;
 
+  width: 10vw;
 
+  cursor: move;
 
+}
 
+
 
+#trigger2 img {
 
+  width: 100%;
 
+}
 
+
 
+#trigger2 a {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  width: 30%;
 
+  height: 30%;
 
+  cursor: pointer;
 
+  display: block;
 
+  -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+}
 
+
 
+#trigger:hover ~ #bg {
 
+  background: black;
 
+  background-image: url(BGoutlineBlc.png);
 
+  background-position-y: 50px;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+}
 
+
 
+#trigger:hover ~ #bg .title {
 
+  display: none;
 
+}
 
+
 
+#trigger:hover ~ #bg .texte {
 
+  display: none;
 
+}
 
+
 
+#trigger:hover ~ #bg .title2 {
 
+  display: block;
 
+  font-size: 40px;
 
+  margin: 5vw 10vw 0 10vw;
 
+  color: white;
 
+}
 
+
 
+#trigger:hover ~ #bg .texte2 {
 
+  display: block;
 
+  margin: 1vw 20vw 0 20vw;
 
+  color: white;
 
+}
 
+
 
+#trigger:hover ~ #bg .title3 {
 
+  display: none;
 
+}
 
+
 
+#trigger:hover ~ #bg .texte3 {
 
+  display: none;
 
+}
 
+
 
+#trigger2:hover ~ #bg {
 
+  background: #ff58ab;
 
+  background-image: url(BGoutlineBlc.png);
 
+  background-position-y: 50px;
 
+  background-repeat: no-repeat;
 
+  background-size: cover;
 
+}
 
+
 
+#trigger2:hover ~ #bg .title3 {
 
+  display: block;
 
+  font-size: 40px;
 
+  margin: 5vw 10vw 0 10vw;
 
+  color: white;
 
+}
 
+
 
+#trigger2:hover ~ #bg .texte3 {
 
+  display: block;
 
+  margin: 1vw 20vw 0 20vw;
 
+  color: white;
 
+}
 
+
 
+#trigger2:hover ~ #bg .title {
 
+  display: none;
 
+}
 
+
 
+#trigger2:hover ~ #bg .texte {
 
+  display: none;
 
+}
 
+
 
+#trigger2:hover ~ #bg .title2 {
 
+  display: none;
 
+}
 
+
 
+#trigger2:hover ~ #bg .texte2 {
 
+  display: none;
 
+}
 
 /*# sourceMappingURL=styles.css.map */

File diff suppressed because it is too large
+ 0 - 0
styles.css.map


+ 662 - 19
styles.scss
View File 

@@ -27,22 +27,35 @@
 
     src:    url('fonts/happy-times-NG_regular_master.otf') format('opentype');
 
 }
 
 
+@font-face {
 
+    font-family: 'HappyTimesOblique';
 
+    src:    url('fonts/happy-times-NG_italic_master.otf') format('opentype');
 
+}
 
+
 
+@font-face {
 
+    font-family: 'SelfModern';
 
+    src:    url('fonts/Self Modern Italic.otf') format('opentype');
 
+}
 
+
 
+
 
+
 
 // @font-face {
 
 //     font-family: 'Migra';
 
 //     src:    url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
 
 // }
 
 
-$cuteviolet: rgb(153, 0, 255);
 
+$cuteviolet: rgb(69, 5, 250);
 
+$red: rgb(255, 63, 29);
 
 
 html{
 
     height: 100%;
 
-    overflow: hidden;
 
 }
 
 
 body{
 
     margin: 0;
 
     padding: 0;
 
     background: black;
 
+    overflow: hidden;
 
 }
 
 
 
@@ -57,6 +70,12 @@ body{
 
     background-size: cover;
 
     width: 100%;
 
     height: 100%;
 
+}
 
+
 
+.noScroll{
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
     overflow: hidden;
 
 }
 
 
@@ -66,7 +85,7 @@ body{
 
     font-weight: normal;
 
     position: fixed;
 
     top: 3px;
 
-    right: 3px;
 
+    left: 3px;
 
 
     .buttonsMenu{
 
         background: rgb(0, 0, 0);
 
@@ -74,28 +93,105 @@ body{
 
         display: inline-block;
 
         border-width: 1px;
 
         border-style: solid;
 
-        border-radius:1vw;
 
+        border-radius: 1vw;
 
         border-color: white;
 
-        padding: 0.2vw 0.5vw 0.2vw 0.5vw;
 
+        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
 
         cursor: pointer;
 
 
         &:hover {
 
-            background: rgb(255, 255, 255);
 
+            background: $red;
 
             color: rgb(0, 0, 0);
 
+            border-color: $red;
 
+        }
 
+    }
 
+    
+}
 
+
 
+#aboutUs{background: rgb(0, 0, 0);
 
+    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: $red;
 
+        color: rgb(0, 0, 0);
 
+        border-color: $red;
 
+    }
 
+}
 
+
 
+.hoverAboutUs{
 
+    display: none;
 
+    position: absolute;
 
+    top: 2vw;
 
+    left: 6vw;
 
+
 
+    .closeButton {
 
+        position: absolute;
 
+        margin: 3px;
 
+        background: rgb(0, 0, 0);
 
+        color: rgb(255, 255, 255);
 
+        display: inline-block;
 
+        border-width: 1px;
 
+        border-style: solid;
 
+        border-radius: 1vw;
 
+        border-color: white;
 
+        padding: 0.2vw 0.4vw 0.2vw 0.4vw;
 
+        cursor: pointer;
 
+        top: 2px;
 
+        right: 2px;
 
+        font-family: Helvetica;
 
+        font-size: 0.5vw;
 
+
 
+        &:hover {
 
+            background: white;
 
+            color: rgb(0, 0, 0);
 
+            border-color: white;
 
         }
 
+
 
     }
 
 }
 
 
+
 
+
 
+
 
+
 
+.iconsSideMenu{
 
+    font-family: Helvetica;
 
+    font-size: 9pt;
 
+    font-weight: normal;
 
+    position: fixed;
 
+    display: block;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
+    left: 3px;
 
+
 
+    img{
 
+        width: 5vw;
 
+        margin: 5px;
 
+        display: block;
 
+    }
 
+
 
+}
 
+
 
 .object {
 
     position: absolute;
 
     width: 10vw;
 
     cursor: move;
 
     color: white;
 
     text-align: center;
 
-    font-family: Helvetica;
 
-    font-size: 1.2vw;
 
+    font-family: SelfModern;
 
+    font-size: 1.2 vw;
 
     font-weight: normal;
 
 
+    #Rd {
 
+        display: none;
 
+    }
 
+
 
     p {
 
         /*opacity: 0;
 
         transform: translateY(-50%);
 
@@ -110,8 +206,17 @@ body{
 
         display: block;
 
     }
 
 
+    &:hover #Rd {
 
+        display: block;
 
+    }
 
+
 
+    &:hover #BW {
 
+        display: none;
 
+    }
 
+
 
     img {
 
        width: 100%;
 
+       display: inline;
 
        }
 
 
     a {
 
@@ -127,26 +232,37 @@ body{
 
 
 }
 
 
-// landing page
 
+// landing pages
 
 .landingPage {
 
-    position: absolute;
 
-    padding: 2vw 10vw 0 10vw;
 
+    position: relative;
 
+    padding: 9vw 20vw 0 20vw;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
     background: rgb(0, 0, 0);
 
+    background-image: url(backgroundproducercountries.jpg);
 
+    background-position: center;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
     width: 100%;
 
     height: 100%;
 
     overflow: hidden;
 
     color: white;
 
     text-align: center;
 
     font-family: Helvetica;
 
-    font-size: 1.2vw;
 
+    font-size: 1vw;
 
     font-weight: normal;
 
+
 
+    p {
 
+        padding: 2vw 5vw;
 
+    }
 
     
 
     h1 {
 
-        font-family: Helvetica;
 
-        font-size: 300%;
 
+        font-family: SelfModern;
 
+        font-size: 400%;
 
         font-weight: normal;
 
-        margin: 0 0 10w 0;
 
+        margin: 0 0 30w 0;
 
+        padding: 1vw;
 
         
     }
 
 
@@ -156,16 +272,20 @@ body{
 
         background: rgb(0, 0, 0);
 
         color: rgb(255, 255, 255);
 
         display: inline-block;
 
+        position: fixed;
 
+        top: 60%;
 
+        right: 50%;
 
         border-width: 1px;
 
         border-style: solid;
 
         border-radius:3vw;
 
         border-color: white;
 
-        padding: 0.5vw 1vw 0.5vw 1vw;
 
+        padding: 1.5vw 1vw 1.5vw 1vw;
 
         cursor: pointer;
 
 
         &:hover {
 
-            background: rgb(255, 255, 255);
 
+            background: $red;
 
             color: rgb(0, 0, 0);
 
+            border-color: $red;
 
         }
 
     }
 
 }
 
@@ -178,6 +298,280 @@ body{
 
 
 }
 
 
+.netherlands{
 
+        position: relative;
 
+        // padding: 10vw 30vw 0 30vw;
 
+        // top: 50%;
 
+        // transform: translateY(-50%);
 
+        background: rgb(0, 0, 0);
 
+        background-image: url(backgroundnetherlands.jpg);
 
+        background-position: center;
 
+        background-repeat: no-repeat;
 
+        background-size: cover;
 
+        width: 100%;
 
+        height: 100%;
 
+        overflow: hidden;
 
+        color: white;
 
+        // text-align: center;
 
+        font-family: Helvetica;
 
+        font-size: 0.8vw;
 
+        font-weight: normal;
 
+
 
+        p {
 
+            position: absolute;
 
+            left: 48vw;
 
+            width: 20vw;
 
+            top: 11vw;
 
+            // padding: 10vw 30vw 0 30vw;
 
+        }
 
+
 
+        .buttonEnter {
 
+            // text-transform: uppercase;
 
+            margin: 1% 0 0 0;
 
+            background: rgb(0, 0, 0);
 
+            color: rgb(255, 255, 255);
 
+            display: inline-block;
 
+            top: 70%;
 
+            left: 50%;
 
+            position: fixed;
 
+            transform: translateY(-50%);
 
+            transform: translateX(-50%);
 
+            border-width: 1px;
 
+            border-style: solid;
 
+            border-radius: 3vw;
 
+            border-color: white;
 
+            font-size: 1vw;
 
+            padding: 0.5vw 0.7vw 0.5vw 0.7vw;
 
+            cursor: pointer;
 
+    
+            &:hover {
 
+                background: $red;
 
+                color: rgb(0, 0, 0);
 
+                border-color: $red;
 
+            }
 
+        }
 
+}
 
+
 
+.producerscountries{
 
+    position: relative;
 
+    // padding: 10vw 30vw 0 30vw;
 
+    // top: 50%;
 
+    // transform: translateY(-50%);
 
+    background: rgb(0, 0, 0);
 
+    background-image: url(backgroundproducercountries.jpg);
 
+    background-position: center;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    width: 100%;
 
+    height: 100%;
 
+    overflow: hidden;
 
+    color: white;
 
+    text-align: center;
 
+    font-family: Helvetica;
 
+    font-size: 0.8vw;
 
+    font-weight: normal;
 
+
 
+    p {
 
+        position: absolute;
 
+        width: 30vw;
 
+        left: 35vw;
 
+        transform: translateY(-50%);
 
+        top: 27vw;
 
+        // padding: 10vw 30vw 0 30vw;
 
+    }
 
+
 
+    .buttonEnter {
 
+        // text-transform: uppercase;
 
+        margin: 1% 0 0 0;
 
+        background: rgb(0, 0, 0);
 
+        color: rgb(255, 255, 255);
 
+        display: inline-block;
 
+        top: 70%;
 
+        left: 50%;
 
+        position: fixed;
 
+        transform: translateY(-50%);
 
+        transform: translateX(-50%);
 
+        border-width: 1px;
 
+        border-style: solid;
 
+        border-radius: 3vw;
 
+        border-color: white;
 
+        font-size: 1vw;
 
+        padding: 0.5vw 0.7vw 0.5vw 0.7vw;
 
+        cursor: pointer;
 
+
 
+        &:hover {
 
+            background: $red;
 
+            color: rgb(0, 0, 0);
 
+            border-color: $red;
 
+        }
 
+    }
 
+}
 
+
 
+.hpGianmarco{
 
+    margin: 0;
 
+    padding: 0;
 
+    background: black;
 
+    background-image: url(outlinebg.png);
 
+    background-position: center;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+
 
+.homepage{
 
+    margin: 0;
 
+    padding: 0;
 
+    background: black;
 
+    background-image: url(backgroundproducercountries.jpg);
 
+    background-position: center;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+
 
+.landingPageJuli {
 
+    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;
 
+    width: 100%;
 
+    height: 100%;
 
+    overflow: hidden;
 
+    color: white;
 
+    font-family: Helvetica;
 
+    font-size: 1vw;
 
+    font-weight: normal;
 
+    
+
 
+    .texte {
 
+        position: absolute;
 
+        text-align: left;
 
+        width: 30vw;
 
+        margin: 10vw 20vw;
 
+    }
 
+
 
+    .LienEpisode1 {
 
+        position: absolute;
 
+        width: 50px;
 
+        height: 50px;
 
+        cursor: pointer;
 
+        top: 20vw;
 
+        right: 30vw;
 
+
 
+        img {
 
+            width: 100%;
 
+        }
 
+    }
 
+
 
+    .ImgEpisode1 {
 
+        display: none;
 
+        position: absolute;
 
+        top: 20vw;
 
+        right: 30vw;
 
+
 
+            .closeButton {
 
+                // position: absolute;
 
+                // margin: 3px;
 
+                background: rgb(0, 0, 0);
 
+                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;
 
+                top: 2px;
 
+                right: 2px;
 
+
 
+                &:hover {
 
+                    background: white;
 
+                    color: rgb(0, 0, 0);
 
+                    border-color: white;
 
+                }
 
+
 
+            }
 
+    }
 
+
 
+    .LienEpisode2 {
 
+        position: absolute;
 
+        top: 30vw;
 
+        left: 20vw;
 
+        width: 50px;
 
+        height: 50px;
 
+        cursor: pointer;
 
+
 
+        img {
 
+            width: 100%;
 
+        }
 
+    }
 
+
 
+    .ImgEpisode2 {
 
+        display: none;
 
+        position: absolute;
 
+        top: 30vw;
 
+        left: 20vw;
 
+
 
+            .closeButton {
 
+                // position: absolute;
 
+                // margin: 3px;
 
+                background: rgb(0, 0, 0);
 
+                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;
 
+                top: 2px;
 
+                right: 2px;
 
+
 
+                &:hover {
 
+                    background: white;
 
+                    color: rgb(0, 0, 0);
 
+                    border-color: white;
 
+                }
 
+
 
+            }
 
+    }
 
+}
 
+
 
+.objectCamille {
 
+    position: relative;
 
+    width: 25vw;
 
+    color: white;
 
+    text-align: center;
 
+
 
+    img{            
+        width: 100%;
 
+        position: absolute;
 
+    }
 
+
 
+    .hover {
 
+        opacity: 0;
 
+        // position: absolute;
 
+    }
 
+
 
+    &:hover .hover{
 
+        opacity: 1;
 
+    }
 
+
 
+    a {
 
+        position: absolute;
 
+        width: 100%;
 
+        height: 100%;
 
+        cursor: pointer;
 
+    }
 
+
 
+}
 
+
 
 // pages thoughts
 
 
 .bodyManifestoPage{
 
@@ -284,8 +678,23 @@ body{
 
 
 }
 
 
+.somethoughts{
 
+    position: absolute;
 
+    width: 50vw;
 
+    top: 8vw;
 
+    left: 5vw;
 
+}
 
+
 
 // pages draggeable
 
 
+.bodyPageDraggeable{
 
+    margin: 0;
 
+    padding: 0;
 
+    background: black;
 
+    overflow: auto;
 
+}
 
+
 
+
 
 .quotes{
 
     width: 40%;
 
     position: absolute;
 
@@ -342,6 +751,48 @@ body{
 
     }
 
 }
 
 
+.moreResources{
 
+    font-family: HelveticaOblique;
 
+    font-size: 11pt;
 
+    font-weight: normal;
 
+    position: absolute;
 
+    // cursor: move;
 
+
 
+    .entête{
 
+        text-transform: uppercase;
 
+        font-size: 10pt;
 
+        background: black;
 
+        border-width: 1px;
 
+        border-style: solid;
 
+        border-color: white;
 
+        color: $cuteviolet;
 
+        padding: 3px;
 
+        display: flex;
 
+
 
+        .titre{
 
+            text-align: left;
 
+            width: 50%;
 
+        }
 
+        
+    }
 
+
 
+    .texte{
 
+        background: white;
 
+        padding: 3px;
 
+    }
 
+
 
+    a:link{
 
+        color: $cuteviolet;
 
+    }
 
+    a:visited{
 
+        color: $cuteviolet;
 
+    }
 
+    a:active{
 
+        color: black;
 
+    }
 
+
 
+}
 
+
 
 #inapril2018{
 
     top: 5vw;
 
     right: 13vw;
 
@@ -386,10 +837,16 @@ body{
 
         column-gap: 20px;
 
         width: 60vw;
 
     }
 
+
 
+    .personnalTextLivingIncome{
 
+        column-count: 1;
 
+        column-gap: 20px;
 
+        width: 40vw;
 
+    }
 
 }
 
 
 .wholeBoxEditable{
 
-    position: absolute;
 
+    position: fixed;
 
     display: block;
 
     width: 15vw;
 
     top: 36vw;
 
@@ -458,8 +915,194 @@ body{
 
 }
 
 
 
-// stuffs
 
+// tests
 
+.bodyTestIndex{
 
+    margin: 0;
 
+    padding: 0;
 
+    // background-image: url(outlinebg.png);
 
+    // background-position: center;
 
+    // background-repeat: no-repeat;
 
+    // background-size: cover;
 
+    width: 100%;
 
+    height: 100%;
 
+
 
+}
 
+
 
+// .objectTestIndex{
 
+//     position: absolute;
 
+//     width: 10vw;
 
+//     cursor: move;
 
+
 
+//     img {
 
+//        width: 100%;
 
+//        }
 
+
 
+//     a {
 
+//         position: absolute;
 
+//         top: 50%;
 
+//         left: 50%;
 
+//         width: 30%;
 
+//         height: 30%;
 
+//         cursor: pointer;
 
+//         display: block;
 
+//         transform: translate(-50%, -50%);
 
+//     }
 
+// }
 
+
 
+#bg {
 
+    position: absolute;
 
+    top: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    height: 100%;
 
+    z-index: -20;
 
+    background: rgb(255, 255, 255);
 
+    font-family: Helvetica;
 
+    font-size: 11pt;
 
+    font-weight: normal;
 
+    text-align: center;
 
+    background-image: url(BGoutlineNoir.png);
 
+    background-position-y: 50px;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+
 
+    .title{
 
+        font-size: 40px;
 
+        margin: 5vw 10vw 0 10vw;
 
+    }
 
+
 
+    .texte{
 
+        margin: 1vw 20vw 0 20vw;
 
+    }
 
+
 
+    .title2{
 
+        display: none;
 
+    }
 
+    .texte2{
 
+        display: none;
 
+    }
 
+    .title3{
 
+        display: none;
 
+    }
 
+    .texte3{
 
+        display: none;
 
+    }
 
+
 
+
 
+}
 
+
 
+#trigger {
 
+    position: absolute;
 
+    z-index: 3;
 
+    width: 10vw;
 
+    cursor: move;  
+
 
+    img {
 
+        width: 100%;
 
+        }
 
+ 
+     a {
 
+         position: absolute;
 
+         top: 50%;
 
+         left: 50%;
 
+         width: 30%;
 
+         height: 30%;
 
+         cursor: pointer;
 
+         display: block;
 
+         transform: translate(-50%, -50%);
 
+     }
 
+
 
+}
 
+
 
+#trigger2 {
 
+    position: absolute;
 
+    z-index: 4;
 
+    width: 10vw;
 
+    cursor: move;
 
+
 
+    img {
 
+        width: 100%;
 
+        }
 
+ 
+     a {
 
+         position: absolute;
 
+         top: 50%;
 
+         left: 50%;
 
+         width: 30%;
 
+         height: 30%;
 
+         cursor: pointer;
 
+         display: block;
 
+         transform: translate(-50%, -50%);
 
+     }
 
+
 
+}
 
 
+#trigger:hover ~ #bg {
 
+    background: rgb(0, 0, 0);
 
+    background-image: url(BGoutlineBlc.png);
 
+    background-position-y: 50px;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    .title{
 
+        display: none;
 
+    }
 
+    .texte{
 
+        display: none;
 
+    }
 
+    .title2{
 
+        display: block;
 
+        font-size: 40px;
 
+        margin: 5vw 10vw 0 10vw;
 
+        color: white;
 
+    }
 
+    .texte2{
 
+        display: block;
 
+        margin: 1vw 20vw 0 20vw;
 
+        color: white;
 
+    }
 
+    .title3{
 
+        display: none;
 
+    }
 
+    .texte3{
 
+        display: none;
 
+    }
 
+}
 
+
 
+
 
+#trigger2:hover ~ #bg {
 
+    background: rgb(255, 88, 171);
 
+    background-image: url(BGoutlineBlc.png);
 
+    background-position-y: 50px;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+    .title3{
 
+        display: block;
 
+        font-size: 40px;
 
+        margin: 5vw 10vw 0 10vw;
 
+        color: rgb(255, 255, 255);
 
+    }
 
+    .texte3{
 
+        display: block;
 
+        margin: 1vw 20vw 0 20vw;
 
+        color: rgb(255, 255, 255);
 
+    }
 
+    .title{
 
+        display: none;
 
+    }
 
+    .texte{
 
+        display: none;
 
+    }
 
+    .title2{
 
+        display: none;
 
+    }
 
+    .texte2{
 
+        display: none;
 
+    }
 
+}
 
+
 
+// stuffs
 
 
 @media screen and (min-width: 1000px) {

Some files were not shown because too many files changed in this diff