parzen/indiescience
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

10 juin

Browse source
This commit is contained in:
xxxgogo77 2021-06-10 21:26:20 +02:00
parent 3beaab4a8f
commit d3bdb82c6a
43 changed files with 1615 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
0manifesto.html
View file

@ -18,7 +18,7 @@
</head>
<body class="bodyManifestoPage">
<img class="somethoughts" src="someThoughtsNoir.png"/>
<img class="titlePagesEpisode" src="someThoughtsNoir.png"/>
<div class="noScroll">
@ -28,8 +28,8 @@
<div class="titre"></div>
<div class="date">April 27th 2021</div>
</div>
<div class="texte">After weeks of discomfort and uncertainty about the ins and outs of this project, and what was asked of us as designers, from the Netherlands Food Partnership or the United Nations, and the feeling of a disconnect with reality, I would like to propose a catalog of non-solutions. Through the demonstration of the complexity of the cocoa and chocolate industry, I would also like to question the foundations of the subject on which we were asked to work. The underlying issues; our position as designers, the management of systemic problems by a demand for local solutions (solutions that are demanded by institutions such as the UN with a systemic scope), and what questions this relationship of requesting local and individual solutions in a global system raises.
This catalog will not show any solutions on my part, I want to question and criticize a solutionist system to which design is entirely part.
<div class="texte">After weeks of discomfort and uncertainty about the ins and outs of this project, and what was asked of us as designers, and the feeling of a disconnect with reality, I would like to propose a catalog of non-solutions. Through the demonstration of the complexity of the cocoa and chocolate industry, I would also like to question the foundations of the subject on which we were asked to work. The underlying issues; our position as designers, the management of systemic problems by a demand for local solutions, and what questions this relationship of requesting local and individual solutions in a global system raises.
</div>
</div>
</div>
@ -40,13 +40,21 @@
<div class="titre"></div>
<div class="date">May 24th 2021</div>
</div>
<div class="texte">Work in progress...
<div class="texte">When as a designer or practitioner we are confronted with such a subject (solving world hunger, in all humility) we try to find an entry point at our scale. As a group, we were interested in the chocolate production/consumption chain. Although this is only one part of the food chain, the study of cocoa production/consumption and the whole production chain is still extremely broad. In this universe, we will look for the precise, the human, the case study that will allow us to act, to take care and to develop a reflection.
<br><br>
In the cocoa chain, there are two poles located at each end of the chain, which allow for specific action: the producers and the consumers. On one side we can act with the producer, favour a short production cycle, act on local issues, create cooperatives. On the other side, the consumer, namely: us, inhabitants of the Netherlands and design students. In order to raise awareness and to bring ringing light to a reality that does not affect us directly; of making our "consumer right" act.
Two poles on which we can have an impact, because we act from human to human for individuals. We can take concrete action. This is important, but it can also lead to another problem that I would like to address: the responsibility lies then with the individual.
<br><br>
When we involve a designer, we also engage an individual. This designer will, without being an expert in the system in which s/he operates, try to act on their own scale, with elements that can be grasped. There is this idea that if one person can do it on a local scale, make things happen and apply solutions locally, then everyone can do it. That we need small solutions and that pebble by pebble we move mountains.
But when it is a way of working, of thinking, that is promoted by an institution, an entity that has much more weight in the system, what does it mean? Why promote individual initiatives? And why, again from an institution, encourage them?
The discourse crystallises around the fact that everyone can somehow find solutions, and this puts the responsibility on the individual: you just have to act if you want to change things! I would like to reorient the trajectory of this critique, and nuance a solutionist approach.
</div>
</div>
</div>
<div class="menu">
<a href="homepage.html"><div class=buttonsMenu>home</div></a>
<a href="hpCamille.html"><div class=buttonsMenu>home</div></a>
<a href="1beantobar.html"><div class=buttonsMenu>next</div></a>
</div>

4
1beantobar.html
View file

@ -20,6 +20,8 @@
<div class="noScroll">
<img class="titlePagesEpisode1" src="fromebeantobarN.png"/>
<div class="thoughtsWindows">
<div class="beantobar">
<div class="entête">
@ -59,7 +61,7 @@
</div>
<div class="menu">
<a href="homepage.html"><div class=buttonsMenu>home</div></a>
<a href="hpCamille.html"><div class=buttonsMenu>home</div></a>
<a href="0manifesto.html"><div class=buttonsMenu>previous</div></a>
<a href="2harkinengel.html"><div class=buttonsMenu>next</div></a>
</div>

6
2harkinengel.html
View file

@ -18,6 +18,8 @@
</head>
<body class="bodyPageDraggeable">
<img class="titlePagesEpisode2" src="harkinengelBlanc.png"/>
<!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
<div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->
@ -65,7 +67,7 @@
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é
Last modification 12/05/2021
</div>
</div>
@ -99,7 +101,7 @@
</div>
<div class="menu">
<a href="homepage.html"><div class=buttonsMenu>home</div></a>
<a href="hpCamille.html"><div class=buttonsMenu>home</div></a>
<a href="1beantobar.html"><div class=buttonsMenu>previous</div></a>
<a href="3livingincome.html"><div class=buttonsMenu>next</div></a>
</div>

13
3livingincome.html
View file

@ -18,6 +18,8 @@
</head>
<body class="bodyPageDraggeable">
<img class="titlePagesEpisode3" src="livingincomeBlanc.png"/>
<!-- <div class="imageUne"><img id="images" src="harkinengel.jpg"/></div>
<div class="imageDeux"><img id="images" src="signatures.jpg"/></div> -->
@ -129,14 +131,23 @@
<div class="personnalText personnalTextLivingIncome li-9" 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 class="personnal-hover">
Last modification 22/05/2021
</div>
</div>
<div class="personnalText personnalTextLivingIncome2 li-10" 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 class="personnal-hover">
Last modification 22/05/2021
</div>
</div>
<div class="personnalText personnalTextLivingIncome3 li-6" 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 class="personnal-hover">
Last modification 22/05/2021
</div>
</div>
<div class="wholeBoxEditable">
@ -169,7 +180,7 @@
</div>
<div class="menu">
<a href="homepage.html"><div class=buttonsMenu>home</div></a>
<a href="hpCamille.html"><div class=buttonsMenu>home</div></a>
<a href="2harkinengel.html"><div class=buttonsMenu>previous</div></a>
<a href="4individual.html"><div class=buttonsMenu>next</div></a>
</div>

64
4individual.html
View file

@ -20,47 +20,43 @@
<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.
<img class="titlePagesEpisode4" src="morethoughtsNoir.png"/>
<div class="thoughtsWindows">
<div class="mots3">
<div class="entête">
<div class="titre"></div>
<div class="date">an individual gaze</div>
</div>
<div class="texte">Can we ask for a local and specific answer for a systemic issue?
<br><br>
On one side of the production chain there are the producers, on the other the consumers. Perhaps at first glance, the chain is seen or perceived in this way: someone is cultivating, someone is buying, and an artisan in between is making the chocolate.
<br><br>
<div class="regular">“That allows everyone along the chocolate chain to pass blame and responsibility for the boy slaves to someone else. Farmers who use slaves blame the people responsible for the price of cocoa. Middlemen who deal with farmers say they don't see any slavery. Ivory Coast government officials who enforce slavery laws say it's foreigners who are selling and using slaves in their country. Cocoa suppliers say they can't be responsible because they don't control the farms. Chocolate companies say they rely on their suppliers to provide cocoa untainted by slave labor. The trade associations blame Ivory Coast's unstable political situation. And consumers don't have an inkling that their favorite chocolate treats may be tainted by slave labor.” <a href="https://web.archive.org/web/20060917014323/http://vision.ucsd.edu/~kbranson/stopchocolateslavery/atasteofslavery.html">(LINK)</a></div>
<br>
This raises the question: how can we deal with systemic issues from an individual gaze?
<br><br>
As a designer, or simply as an individual who tries to understand and apprehend certain forms of systems that participate in the organisation of the world, a reframing of the issue is necessary to understand it. To have the possibility to grasp it could reduce it to problems, and not questions. And the problems could be solved, if we look at this part of the whole equation.
<br><br>
The broader system is stuck in models that underlie the whole society. There is a tendency to see a binarity in the distribution of resources, with producers who work and are exploited in the sense that they do not receive the value of their labour. On the other hand, the consumers who benefit from the producer's work, but who in a way do not exploit its value either. We know that this surplus value does not just disappear. Nevertheless, although the problem cannot be solved on an individual basis, we can look at ways of thinking about it. The following points will help this process:
<br>— Raising awareness about the position of institutions, lobbies, industries in this economy. This is perhaps what I'm trying to do in this catalogue, by re-adjusting the glance so that it no longer highlights individuals but a systemic paradox.
<br>— Developing a parallel, more circular or local economy. Because by remaining in capitalist schemes in this chain that involves all the actors and puts the exploiter and the exploited in relation to each other, the worker can hardly get out of it.
<br>— Demanding action from legal persons (governments, institutions, law and regulation makers). In terms of power relations they are the most likely to have an impact in the chain.
<br>— Or, as individual entities: producers and consumers join forces. Consumers boycott products that exploit producers, and question the limits of the system they support by consuming.
</div>
</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>
<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="homepage.html"><div class=buttonsMenu>home</div></a>
<a href="hpCamille.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>

72
5overall.html
View file

@ -20,47 +20,53 @@
<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.
<img class="titlePagesEpisode5" src="overall.png"/>
<div class="thoughtsWindows">
<div class="definitions">
<div class="entête">
<div class="titre"></div>
<div class="date">Designer and journalist</div>
</div>
<div class="texte">“A designer is a person who plans the look or workings of something prior to it being made, by preparing drawings or plans.
More formally, a designer is an agent that "specifies the structural properties of a design object". In practice, anyone who creates tangible or intangible objects, products, processes, laws, games, graphics, services, and experiences is referred to as a designer.”
<br><br>
“A journalist is an individual trained to collect/gather information in form of text, audio or pictures, processes them to a news-worth form and disseminates it to the public. The act or process mainly done by the journalist is called journalism.”
</div>
</div>
</div>
<div class="thoughtsWindows">
<div class="mots1">
<div class="entête">
<div class="titre"></div>
<div class="date">May 30th 2021</div>
</div>
<div class="texte">Often during this project I questioned my relevance as a designer. Indeed, I am not an expert on this subject, so my role is to gather information, curate it and make it public. But what differentiates me from a journalist in this process?
I would like to bring an additional layer to this project, in the way I make this knowledge public, I question the process I wanted to undertake. By questioning my positionality, I also question my relevance. I wanted to propose thoughts, bits of reflection as they are, to make my approach more transparent and, I hope, more honest.
</div>
</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="mots2">
<div class="entête">
<div class="titre"></div>
<div class="date">May 14th 2021</div>
</div>
<div class="texte">I continue my researchs about legislation especially, and institutions reglementations. As i start to research about it i felt into a rabbit hole of webpages and articles. None of them gave me the information i was looking for, never enough synthetize or too vague or not updated… By acknowledging that, i would like to propose a page for each case study, by curating some informations i found; higlighting the shadow part i don’t understand, and saying: i would never be exhaustive, or i couldn’t even grasp the subject as i wanted so i propose you what i found, the questions i have and you can add the content you found. Indeed, i would like people who go through the catalog to add contents, articles, ressources, links, to add comments about what i found; and so all together as non-experts we can create a shared database.
<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> -->
<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="hpCamille.html"><div class=buttonsMenu>home</div></a>
<a href="4individual.html"><div class=buttonsMenu>previous</div></a>
</div>
</div>

BIN
ImgLeavesBlanc.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
ImgSnickers.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
ImgSnickersBlanc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
aboutpagepopup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
backgroundLandingpage.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
backgroundLandingpageCamille.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
backgroundLandingpageGianmarco.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
backgroundLandingpageJuli.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 MiB

After

Width:  |  Height:  |  Size: 491 KiB

BIN
backgroundLandingpageLison.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 819 KiB

BIN
backgroundRaph.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
episode01Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 569 KiB

BIN
episode02Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 662 KiB

BIN
episode03Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
episode04Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 730 KiB

BIN
episode05Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
episode06Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 686 KiB

BIN
episode07Juli.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 595 KiB

BIN
harkinengelBlanc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
harkinengelRed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 KiB

17
homepage.html
View file

@ -24,28 +24,35 @@
<img src="iconLandingpageRaphaelleBW.png" id="BW"/>
<img src="iconLandingpageRaphaelleRed.png" id="Rd"/>
<a href="hpRaphaelle.html"></a>
<p>Raphaelle</p>
<p>What do cocoa farmers eat?</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>
<p>The fuel behind the trade chain</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>
<p>Packaging</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>
<p>Some thoughts</p>
</div>
<div class="object">
<img src="iconLandingpageGMbw.png" id="BW"/>
<img src="iconLandingpageGMRed.png" id="Rd"/>
<a href="hpGianmarco.html"></a>
<p>Ancient Myths</p>
</div>
@ -55,7 +62,7 @@
<div id="aboutUs">about us</div>
</div>
<div class="hoverAboutUs"><img src="ImgProtocol.png"/><div class="closeButton">X</div></div>
<div class="hoverAboutUs"><img src="aboutpagepopup.jpg"/><div class="closeButton">X</div></div>
<!-- <div class=landingPage>
<h1>Chocolate Atlas</h1>

11
hpCamille.html
View file

@ -16,7 +16,7 @@
<script src="js/application.js"></script>
</head>
<body class="home">
<body class="hpCamille">
<div class="noScroll">
@ -41,6 +41,11 @@
</a>
<a href="4individual.html" class="objectCamille">
<img src="ImgSnickers.png" />
<img src="ImgSnickersBlanc.png" />
</a>
<a href="5overall.html" class="objectCamille">
<img src="ImgLeavesBig.png" />
<img src="ImgLeavesBlanc.png" />
</a>
@ -52,7 +57,7 @@
<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> -->
<a href="hpGianmarco.html"><img src="iconLandingpageGMbw.png"></a>
</div>
@ -62,6 +67,8 @@
<div class="buttonsMenu" id="aboutUs">about us</div>
</div>
<div class="hoverAboutUs"><img src="aboutpagepopup.jpg"/><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

20
hpGianmarco.html
View file

@ -16,22 +16,18 @@
<script src="js/application.js"></script>
</head>
<body class="home">
<body class="GM">
<div class="noScroll">
<div class="object">
<img src="ImgChocolateBar.png"/>
<a href="hpGianmarco.html"></a>
<p>Gianmarco</p>
</div>
<a href="https://www.youtube.com/watch?v=EOQeU_6vbeg" class="texteGM">https://www.youtube.com/watch?v=EOQeU_6vbeg</a>
<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>
<a href="hpJuli.html"><img src="iconLandingpageJuliBW.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="iconLandingpageGMRed.png"></a>
</div>
@ -41,6 +37,8 @@
<div class="buttonsMenu" id="aboutUs">about us</div>
</div>
<div class="hoverAboutUs"><img src="aboutpagepopup.jpg"/><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

40
hpJuli.html
View file

@ -21,7 +21,7 @@
<div class="landingPageJuli">
<div class="map-container">
<img src="assets/juli/map-juli.jpeg" />
<img src="backgroundLandingpageJuli.jpg" />
<div class="map-pointer" id="Episode1"></div>
<div class="map-pointer" id="Episode2"></div>
<div class="map-pointer" id="Episode3"></div>
@ -31,19 +31,39 @@
<div class="map-pointer" id="Episode7"></div>
</div>
<div class="texte">The Chocolate Atlas takes the viewer on a non-liner route through the world of cocoa. Using
the lens of cocoa to magnify the detached consumption of goods on a global base. A melt-inyour-mouth sweet for some and, amongst others, a child-slavery-based business for others. The
reality of food</div>
<div class="LienEpisode1"><img src="ImgJuli.png"/></div>
<div class="ImgEpisode1 imgEpisode">
<img src="ImgProtocol.png"/>
<img src="episode01Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="LienEpisode2"><img src="ImgJuli.png"/></div>
<div class="ImgEpisode2 imgEpisode">
<img src="ImgProtocol.png"/>
<img src="episode02Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode3 imgEpisode">
<img src="episode03Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode4 imgEpisode">
<img src="episode04Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode5 imgEpisode">
<img src="episode05Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode6 imgEpisode">
<img src="episode06Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode7 imgEpisode">
<img src="episode07Juli.jpg"/>
<div class="closeButton">X</div>
</div>
@ -54,7 +74,7 @@
<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> -->
<a href="hpGianmarco.html"><img src="iconLandingpageGMbw.png"></a>
</div>
@ -64,6 +84,8 @@
<div class="buttonsMenu" id="aboutUs">about us</div>
</div>
<div class="hoverAboutUs"><img src="aboutpagepopup.jpg"/><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

98
hpLison.html Normal file
View file

@ -0,0 +1,98 @@
<!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="landingPageLison">
<div class="map-container">
<img src="backgroundLandingpageLison.jpg" />
<div class="map-pointerLison" id="Episode01"></div>
<div class="map-pointerLison" id="Episode02"></div>
<div class="map-pointerLison" id="Episode03"></div>
<div class="map-pointerLison" id="Episode04"></div>
<div class="map-pointerLison" id="Episode05"></div>
<div class="map-pointerLison" id="Episode06"></div>
</div>
<div class="ImgEpisode1 imgEpisode">
<img src="iconLisonEpisode01.png"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode2 imgEpisode">
<img src="episode02Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode3 imgEpisode">
<img src="episode03Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode4 imgEpisode">
<img src="episode04Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode5 imgEpisode">
<img src="episode05Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode6 imgEpisode">
<img src="episode06Juli.jpg"/>
<div class="closeButton">X</div>
</div>
</div>
<div class="iconsSideMenu">
<a href="hpJuli.html"><img src="iconLandingpageJuliBW.png"></a>
<a href="hpLison.html"><img src="iconLandingpageLisonRed.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="iconLandingpageGMbw.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="hoverAboutUs"><img src="aboutpagepopup.jpg"/><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> -->
</body>
</html>

98
hpRaphaelle.html Normal file
View file

@ -0,0 +1,98 @@
<!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="landingPageRaph">
<div class="map-container">
<img src="backgroundRaph.png" />
<div class="map-pointerRaph" id="Episode001"></div>
<div class="map-pointerRaph" id="Episode002"></div>
<div class="map-pointerRaph" id="Episode003"></div>
<div class="map-pointerRaph" id="Episode004"></div>
<div class="map-pointerRaph" id="Episode005"></div>
<div class="map-pointerRaph" id="Episode006"></div>
</div>
<div class="ImgEpisode1 imgEpisode">
<img src="iconRaphEpisode0101.png"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode2 imgEpisode">
<img src="episode02Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode3 imgEpisode">
<img src="episode03Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode4 imgEpisode">
<img src="episode04Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode5 imgEpisode">
<img src="episode05Juli.jpg"/>
<div class="closeButton">X</div>
</div>
<div class="ImgEpisode6 imgEpisode">
<img src="iconRaphEpisode0601.png"/>
<div class="closeButton">X</div>
</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="IconHpCamilleBW.png"></a>
<a href="hpRaphaelle.html"><img src="iconLandingpageRaphaelleRed.png"></a>
<a href="hpGianmarco.html"><img src="iconLandingpageGMbw.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="hoverAboutUs"><img src="aboutpagepopup.jpg"/><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> -->
</body>
</html>

BIN
iconLandingpageGMRed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
iconLandingpageGMbw.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

BIN
iconLisonEpisode01.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1,012 KiB

BIN
iconRaphEpisode0101.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
iconRaphEpisode0601.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

102
js/application.js
View file

@ -84,7 +84,7 @@ $(document).ready(function(){
$(".LienEpisode1").on("click",function(){
$("#Episode01").on("click",function(){
$(".ImgEpisode1").css("display","block")
@ -96,7 +96,7 @@ $(document).ready(function(){
});
$(".LienEpisode2").on("click",function(){
$("#Episode02").on("click",function(){
$(".ImgEpisode2").css("display","block")
@ -126,4 +126,102 @@ $(document).ready(function(){
$(".Img"+ id).show();
})
// episodes hover Juli
$("#Episode03").on("click",function(){
$(".ImgEpisode3").css("display","block")
});
$(".closeButton").on("click",function(){
$(".ImgEpisode3").css("display","none")
});
$("#Episode04").on("click",function(){
$(".ImgEpisode4").css("display","block")
});
$(".closeButton").on("click",function(){
$(".ImgEpisode4").css("display","none")
});
$("#Episode05").on("click",function(){
$(".ImgEpisode5").css("display","block")
});
$(".closeButton").on("click",function(){
$(".ImgEpisode5").css("display","none")
});
$("#Episode06").on("click",function(){
$(".ImgEpisode6").css("display","block")
});
$(".closeButton").on("click",function(){
$(".ImgEpisode6").css("display","none")
});
$(".LienEpisode7").on("click",function(){
$(".ImgEpisode7").css("display","block")
});
$(".closeButton").on("click",function(){
$(".ImgEpisode7").css("display","none")
});
$("#Episode001").on("click",function(){
$(".ImgEpisode1").css("display","block")
});
$("#Episode002").on("click",function(){
$(".ImgEpisode2").css("display","block")
});
$("#Episode003").on("click",function(){
$(".ImgEpisode3").css("display","block")
});
$("#Episode004").on("click",function(){
$(".ImgEpisode4").css("display","block")
});
$("#Episode005").on("click",function(){
$(".ImgEpisode5").css("display","block")
});
$("#Episode006").on("click",function(){
$(".ImgEpisode6").css("display","block")
});
});

BIN
livingincomeBlanc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
livingincomeRed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
morethoughtsNoir.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

620
styles.css
View file

@ -116,7 +116,11 @@ body {
display: none;
position: absolute;
top: 2vw;
left: 6vw;
left: 6.5vw;
}
.hoverAboutUs img {
width: 45vw;
}
.hoverAboutUs .closeButton {
@ -131,10 +135,10 @@ body {
border-color: white;
padding: 0.2vw 0.4vw 0.2vw 0.4vw;
cursor: pointer;
top: 2px;
right: 2px;
top: 7px;
right: 7px;
font-family: Helvetica;
font-size: 0.5vw;
font-size: 0.8vw;
}
.hoverAboutUs .closeButton:hover {
@ -222,7 +226,7 @@ body {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: black;
background-image: url(backgroundproducercountries.jpg);
background-image: url(backgroundLandingpage.gif);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
@ -271,28 +275,28 @@ body {
}
.object:nth-child(1) {
left: 55%;
top: 75%;
left: 34%;
top: 84%;
}
.object:nth-child(2) {
left: 69%;
top: 25%;
left: 70%;
top: 90%;
}
.object:nth-child(3) {
left: 78%;
top: 67%;
left: 25%;
top: 78%;
}
.object:nth-child(4) {
left: 39%;
top: 24%;
left: 36%;
top: 17%;
}
.object:nth-child(5) {
left: 88%;
top: 9%;
left: 21%;
top: 55%;
}
.netherlands {
@ -410,6 +414,18 @@ body {
height: 100%;
}
.hpCamille {
margin: 0;
padding: 0;
background: black;
background-image: url(backgroundLandingpageCamille.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.homepage {
margin: 0;
padding: 0;
@ -424,6 +440,7 @@ body {
.landingPageJuli {
position: absolute;
background: black;
width: 100%;
height: 100%;
overflow: hidden;
@ -440,24 +457,95 @@ body {
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;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode1 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode2 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode2 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode3 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode4 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode5 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode6 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode6 img {
width: 60vw;
}
.landingPageJuli .ImgEpisode7 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageJuli .ImgEpisode7 img {
width: 60vw;
}
.landingPageJuli .closeButton {
@ -481,24 +569,249 @@ body {
border-color: white;
}
.landingPageJuli .LienEpisode2 {
.landingPageRaph {
position: absolute;
top: 30vw;
left: 20vw;
width: 50px;
height: 50px;
background: black;
width: 100%;
height: 100%;
overflow: hidden;
color: white;
font-family: Helvetica;
font-size: 1vw;
font-weight: normal;
}
.landingPageRaph .texte {
position: absolute;
text-align: left;
width: 30vw;
margin: 10vw 20vw;
}
.landingPageRaph .ImgEpisode1 {
display: none;
position: absolute;
top: 50%;
left: 10%;
}
.landingPageRaph .ImgEpisode1 img {
width: 30vw;
}
.landingPageRaph .ImgEpisode2 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageRaph .ImgEpisode2 img {
width: 30vw;
}
.landingPageRaph .ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageRaph .ImgEpisode3 img {
width: 30vw;
}
.landingPageRaph .ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageRaph .ImgEpisode4 img {
width: 30vw;
}
.landingPageRaph .ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageRaph .ImgEpisode5 img {
width: 30vw;
}
.landingPageRaph .ImgEpisode6 {
display: none;
position: absolute;
top: 2vw;
right: 2vw;
}
.landingPageRaph .ImgEpisode6 img {
width: 55vw;
}
.landingPageRaph .ImgEpisode7 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageRaph .ImgEpisode7 img {
width: 60vw;
}
.landingPageRaph .closeButton {
position: absolute;
top: 0;
right: 0;
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;
}
.landingPageJuli .LienEpisode2 img {
width: 100%;
.landingPageRaph .closeButton:hover {
background: white;
color: black;
border-color: white;
}
.landingPageJuli .ImgEpisode2 {
.landingPageLison {
position: absolute;
background: black;
width: 100%;
height: 100%;
overflow: hidden;
color: white;
font-family: Helvetica;
font-size: 1vw;
font-weight: normal;
}
.landingPageLison .texte {
position: absolute;
text-align: left;
width: 30vw;
margin: 10vw 20vw;
}
.landingPageLison .ImgEpisode1 {
display: none;
position: absolute;
top: 30vw;
left: 20vw;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode1 img {
width: 60vw;
}
.landingPageLison .ImgEpisode2 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode2 img {
width: 60vw;
}
.landingPageLison .ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode3 img {
width: 60vw;
}
.landingPageLison .ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode4 img {
width: 60vw;
}
.landingPageLison .ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode5 img {
width: 60vw;
}
.landingPageLison .ImgEpisode6 {
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPageLison .ImgEpisode6 img {
width: 60vw;
}
.landingPageLison .closeButton {
position: absolute;
top: 0;
right: 0;
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;
}
.landingPageLison .closeButton:hover {
background: white;
color: black;
border-color: white;
}
.objectCamille {
@ -528,11 +841,11 @@ body {
}
.objectCamille:nth-child(5) {
height: 13vw;
height: 10vw;
}
.objectCamille:nth-child(6) {
height: 10vw;
height: 12vw;
}
.objectCamille img {
@ -572,8 +885,8 @@ body {
.april {
width: 30%;
position: absolute;
top: 20vw;
right: 20vw;
top: 7vw;
right: 9vw;
overflow: hidden;
}
@ -581,11 +894,64 @@ body {
font-family: HelveticaOblique;
}
.juin {
width: 20%;
.definitions {
width: 30%;
position: absolute;
top: 10vw;
left: 10vw;
top: 7vw;
right: 9vw;
overflow: hidden;
}
.definitions .texte {
font-family: Helvetica;
}
.mots1 {
width: 30%;
position: absolute;
top: 30vw;
right: 22vw;
overflow: hidden;
}
.mots1 .texte {
font-family: HelveticaOblique;
}
.mots2 {
width: 30%;
position: absolute;
top: 15vw;
left: 9vw;
overflow: hidden;
}
.mots2 .texte {
font-family: HelveticaOblique;
}
.mots3 {
width: 60%;
position: absolute;
top: 3vw;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mots3 .texte {
font-family: HelveticaOblique;
}
.mots3 .texte .regular {
font-family: Helvetica;
}
.juin {
width: 50%;
position: absolute;
top: 15vw;
left: 7vw;
overflow: hidden;
}
@ -602,7 +968,7 @@ body {
}
.tonys {
width: 35%;
width: 45%;
position: absolute;
top: 3vw;
left: 33vw;
@ -663,11 +1029,46 @@ body {
padding: 20px;
}
.somethoughts {
.titlePagesEpisode {
position: absolute;
width: 50vw;
top: 8vw;
left: 5vw;
top: 3vw;
left: 2vw;
}
.titlePagesEpisode1 {
position: absolute;
width: 50vw;
top: 26vw;
right: 20vw;
}
.titlePagesEpisode2 {
position: absolute;
width: 50vw;
top: 0vw;
left: 2vw;
}
.titlePagesEpisode3 {
position: absolute;
width: 40vw;
top: 3vw;
left: 2vw;
}
.titlePagesEpisode5 {
position: absolute;
width: 25vw;
top: 0vw;
left: 2vw;
}
.titlePagesEpisode4 {
position: absolute;
width: 40vw;
bottom: 0vw;
right: 2vw;
}
.bodyPageDraggeable {
@ -1118,6 +1519,33 @@ body {
display: none;
}
.GM {
position: absolute;
background-image: url("backgroundLandingpageGianmarco.jpg");
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;
}
.texteGM {
position: absolute;
font-family: Helvetica;
font-size: 25pt;
font-weight: normal;
color: white;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.map-container {
height: 100%;
position: absolute;
@ -1136,7 +1564,29 @@ body {
width: 5vh;
height: 5vh;
background-color: green;
opacity: .5;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}
.map-container .map-pointerLison {
position: absolute;
width: 20vh;
height: 30vh;
background-color: green;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}
.map-container .map-pointerRaph {
position: absolute;
width: 5vh;
height: 5vh;
background-color: green;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
@ -1158,7 +1608,7 @@ body {
}
.map-container #Episode4 {
left: 42%;
left: 44%;
top: 67%;
}
@ -1177,6 +1627,66 @@ body {
top: 71.5%;
}
.map-container #Episode01 {
left: 19%;
top: 56%;
}
.map-container #Episode02 {
left: 34%;
top: 57%;
}
.map-container #Episode03 {
left: 47%;
top: 57%;
}
.map-container #Episode04 {
left: 61%;
top: 57%;
}
.map-container #Episode05 {
left: 75%;
top: 57%;
}
.map-container #Episode06 {
left: 89%;
top: 57%;
}
.map-container #Episode001 {
left: 15%;
top: 44%;
}
.map-container #Episode002 {
left: 24%;
top: 63%;
}
.map-container #Episode003 {
left: 48%;
top: 60%;
}
.map-container #Episode004 {
left: 56%;
top: 69%;
}
.map-container #Episode005 {
left: 64%;
top: 49%;
}
.map-container #Episode006 {
left: 74%;
top: 58%;
}
.li-1 {
top: 3vw;
left: 2vw;
@ -1214,7 +1724,7 @@ body {
.li-9 {
left: 7vw;
top: 12vw;
top: 15vw;
}
.li-10 {

3
styles.css.map
View file

File diff suppressed because one or more lines are too long

637
styles.scss
View file

@ -128,7 +128,11 @@ body{
display: none;
position: absolute;
top: 2vw;
left: 6vw;
left: 6.5vw;
img{
width: 45vw;
}
.closeButton {
position: absolute;
@ -142,10 +146,10 @@ body{
border-color: white;
padding: 0.2vw 0.4vw 0.2vw 0.4vw;
cursor: pointer;
top: 2px;
right: 2px;
top: 7px;
right: 7px;
font-family: Helvetica;
font-size: 0.5vw;
font-size: 0.8vw;
&:hover {
background: white;
@ -239,7 +243,7 @@ body{
top: 50%;
transform: translateY(-50%);
background: rgb(0, 0, 0);
background-image: url(backgroundproducercountries.jpg);
background-image: url(backgroundLandingpage.gif);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
@ -419,6 +423,18 @@ body{
height: 100%;
}
.hpCamille{
margin: 0;
padding: 0;
background: black;
background-image: url(backgroundLandingpageCamille.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.homepage{
margin: 0;
padding: 0;
@ -436,7 +452,7 @@ body{
// top: 50%;
// transform: translateY(-50%);
// background: rgb(0, 0, 0);
// background-image: url(outlinebg.png);
background:rgb(0, 0, 0);
// background-position: center;
// background-repeat: no-repeat;
// background-size: cover;
@ -456,24 +472,107 @@ body{
margin: 10vw 20vw;
}
.LienEpisode1 {
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
top: 20vw;
right: 30vw;
// .LienEpisode1 {
// position: absolute;
// width: 50px;
// height: 50px;
// cursor: pointer;
// top: 20vw;
// right: 30vw;
img {
width: 100%;
}
}
// img {
// width: 100%;
// }
// }
.ImgEpisode1 {
display: none;
position: absolute;
top: 20vw;
right: 30vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode2 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode6 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode7 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
@ -499,26 +598,285 @@ body{
}
}
.LienEpisode2 {
position: absolute;
top: 30vw;
left: 20vw;
width: 50px;
height: 50px;
cursor: pointer;
// .LienEpisode2 {
// position: absolute;
// top: 30vw;
// left: 20vw;
// width: 50px;
// height: 50px;
// cursor: pointer;
img {
width: 100%;
// img {
// width: 100%;
// }
// }
}
.landingPageRaph {
position: absolute;
// top: 50%;
// transform: translateY(-50%);
// background: rgb(0, 0, 0);
background:rgb(0, 0, 0);
// 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;
}
.ImgEpisode1 {
display: none;
position: absolute;
top: 50%;
left: 10%;
img{
width: 30vw;
}
}
.ImgEpisode2 {
display: none;
position: absolute;
top: 30vw;
left: 20vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 30vw;
}
}
.ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 30vw;
}
}
.ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 30vw;
}
}
.ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 30vw;
}
}
.ImgEpisode6 {
display: none;
position: absolute;
top: 2vw;
right: 2vw;
img{
width: 55vw;
}
}
.ImgEpisode7 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.closeButton {
position: absolute;
top: 0;
right: 0;
// 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;
&:hover {
background: white;
color: rgb(0, 0, 0);
border-color: white;
}
}
}
.landingPageLison {
position: absolute;
// top: 50%;
// transform: translateY(-50%);
// background: rgb(0, 0, 0);
background:rgb(0, 0, 0);
// 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;
}
.ImgEpisode1 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode2 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode3 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode4 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode5 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.ImgEpisode6 {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img{
width: 60vw;
}
}
.closeButton {
position: absolute;
top: 0;
right: 0;
// 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;
&:hover {
background: white;
color: rgb(0, 0, 0);
border-color: white;
}
}
}
}
.objectCamille {
@ -543,10 +901,10 @@ body{
height: 7vw;
}
&:nth-child(5){
height: 13vw;
height: 10vw;
}
&:nth-child(6){
height: 10vw;
height: 12vw;
}
img{
@ -586,8 +944,8 @@ body{
.april{
width: 30%;
position: absolute;
top: 20vw;
right: 20vw;
top: 7vw;
right: 9vw;
overflow: hidden;
.texte{
@ -595,11 +953,64 @@ body{
}
}
.juin{
width: 20%;
.definitions{
width: 30%;
position: absolute;
top: 10vw;
left: 10vw;
top: 7vw;
right: 9vw;
overflow: hidden;
.texte{
font-family: Helvetica;
}
}
.mots1{
width: 30%;
position: absolute;
top: 30vw;
right: 22vw;
overflow: hidden;
.texte{
font-family: HelveticaOblique;
}
}
.mots2{
width: 30%;
position: absolute;
top: 15vw;
left: 9vw;
overflow: hidden;
.texte{
font-family: HelveticaOblique;
}
}
.mots3{
width: 60%;
position: absolute;
top: 3vw;
// overflow: hidden;
left: 50%;
transform: translateX(-50%);
.texte{
font-family: HelveticaOblique;
.regular{
font-family: Helvetica;
}
}
}
.juin{
width: 50%;
position: absolute;
top: 15vw;
left: 7vw;
overflow: hidden;
.texte{
@ -616,7 +1027,7 @@ body{
}
.tonys{
width: 35%;
width: 45%;
position: absolute;
top: 3vw;
left: 33vw;
@ -674,13 +1085,50 @@ body{
}
.somethoughts{
.titlePagesEpisode{
position: absolute;
width: 50vw;
top: 8vw;
left: 5vw;
top: 3vw;
left: 2vw;
}
.titlePagesEpisode1{
position: absolute;
width: 50vw;
top: 26vw;
right: 20vw;
}
.titlePagesEpisode2{
position: absolute;
width: 50vw;
top: 0vw;
left: 2vw;
}
.titlePagesEpisode3{
position: absolute;
width: 40vw;
top: 3vw;
left: 2vw;
}
.titlePagesEpisode5{
position: absolute;
width: 25vw;
top: 0vw;
left: 2vw;
}
.titlePagesEpisode4{
position: absolute;
width: 40vw;
bottom: 0vw;
right: 2vw;
}
// pages draggeable
.bodyPageDraggeable{
@ -1132,7 +1580,34 @@ body{
}
}
.GM{
position: absolute;
// top: 50%;
// transform: translateY(-50%);
// background: rgb(0, 0, 0);
background-image: url("backgroundLandingpageGianmarco.jpg");
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;
}
.texteGM{
position: absolute;
font-family: Helvetica;
font-size: 25pt;
font-weight: normal;
color: rgb(255, 255, 255);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.map-container {
@ -1151,7 +1626,27 @@ body{
width: 5vh;
height: 5vh;
background-color: green;
opacity: .5;
opacity: 0;
transform: translate(-50%, -50%);
cursor: pointer;
}
.map-pointerLison {
position: absolute;
width: 20vh;
height: 30vh;
background-color: green;
opacity: 0;
transform: translate(-50%, -50%);
cursor: pointer;
}
.map-pointerRaph {
position: absolute;
width: 5vh;
height: 5vh;
background-color: green;
opacity: 0;
transform: translate(-50%, -50%);
cursor: pointer;
}
@ -1169,7 +1664,7 @@ body{
top: 37%;
}
#Episode4 {
left: 42%;
left: 44%;
top: 67%;
}
#Episode5 {
@ -1185,6 +1680,56 @@ body{
top: 71.5%;
}
#Episode01 {
left: 19%;
top: 56%;
}
#Episode02 {
left: 34%;
top: 57%;
}
#Episode03 {
left: 47%;
top: 57%;
}
#Episode04 {
left: 61%;
top: 57%;
}
#Episode05 {
left: 75%;
top: 57%;
}
#Episode06 {
left: 89%;
top: 57%;
}
#Episode001 {
left: 15%;
top: 44%;
}
#Episode002 {
left: 24%;
top: 63%;
}
#Episode003 {
left: 48%;
top: 60%;
}
#Episode004 {
left: 56%;
top: 69%;
}
#Episode005 {
left: 64%;
top: 49%;
}
#Episode006 {
left: 74%;
top: 58%;
}
}
@ -1226,7 +1771,7 @@ top: 57vw;
.li-9 {
left: 7vw;
top: 12vw;
top: 15vw;
}