-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpart4.html
180 lines (151 loc) · 8.73 KB
/
part4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equix="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>A Guilty Pleasure</title>
<link rel="stylesheet" href="https://use.typekit.net/jas4rxq.css">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!--link for animation-->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./images/favicon.png">
<link rel="stylesheet" type="text/css" href="./src/styleP1.css">
<link rel="stylesheet" type="text/css" href="./src/styleNext.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js"></script>
<script src="https://d3js.org/d3.v5.js"></script>
<!--link for numbers-->
<!--<link rel="stylesheet" href="odometer-theme-minimal.css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--<script src="odometer.js"></script>-->
</head>
<body style="background-color:#000000;">
<!--4.0 Section Introduction-->
<div class="horizontal-scroll-wrapper squares" id="fixed">
<div class="section"><a href="index.html">Homepage</a></div>
<div class="section"><a href="part1.html"><b2>1. </b2> Cocoa Affection</a></div>
<div class="section"><a href="part2.html"><b2>2. </b2> From Beans to Bars</a></div>
<div class="section"><a href="part3.html"><b2>3. </b2> As Cocoa Grow</a></div>
<div class="introsection1" id="intro1">
<h1>Part 4 Behind the Barcode</h1>
<div id="svg-container2"></div>
</div>
</div>
<!--4.1 10mins Cocoa Consumption-->
<div class="slide2">
<div class="sticky2">
<!--<h5>First and Foremost</h5>-->
<p><span class="count"> 183600</span> pounds of cocoa have been consumed during this past <b>10 minutes</b> (since the moment you opened the first page of this project).</p>
</div>
</div>
<!--4.2.1 Companies' Commitment/Intro-->
<div class="slide2">
<div class="sticky2">
<h5>Companies' Commitment</h5>
<p>How does leading <b>confectionery company</b> acknowledge deforestation issues?</p>
</div>
</div>
<!--4.2.2 Companies' Commitment/Table -->
<div class="slide2">
<div class="sticky">
<section id="section1" class="active">
<p>In 2019, total net sales of the leading confectionery companies worldwide was <b>82,249 million dollars</b>, that’s almost equal to the value of total processed petroleum oils which have been exported from the US in the same year (87,508 million dollars). Among them Mars Inc, Ferrero Group and Mondelez International share half of the total revenue, and it’s declared on their websites that their main cocoa sources are from Ivory Coast and Ghana. </p>
</section>
<div id="revenue"></div>
</div>
</div>
<!--4.2.3 Companies' Commitment/Summary-->
<div class="slide1">
<img id="image6" style="width:1440px;" src="./images/commpanies.svg">
</div>
<!--4.2.4 Companies' Commitment/Barcode Graph-->
<div class="slide2">
<div class="stickyblack">
<div id="barcode"></div>
</div>
<div data-aos="fade-up" class="stickyfloating">
<p>Many environmentally-conscious chocolate makers already source their beans from farms or cooperatives that utilise cacao agroforests, but still other chocolate giants haven’t made their sources of cocoa transparent to all customers.</p>
</div>
</div>
<!--4.3.1 Chocolate Commercials/Intro-->
<div class="slide2">
<div class="sticky2">
<h5>On the other hand,</h5>
<p>there is a <b>deliberate disconnection</b> between raw materials and products among the diverse range of chocolate commercials...</p>
</div>
</div>
<!--4.3.1 Chocolate Commercials/Graph-->
<div class="slide1">
<img id="image6" style="width:1440px;" src="./images/commercials.svg">
</div>
<!--4.3.1 Chocolate Commercials/Conclusion-->
<div class="slide2">
<div class="sticky2">
<!--<h5>Chocolate Commercials</h5>-->
<p> This may has successfully shifted customer’s focus away from <b>environmental responsibility</b> behind the consumption, but onto the purely <b>indulgent sensation</b> of savoring a piece of chocolate.</p>
</div>
</div>
<!--4.4 Consumers-->
<div class="slide1">
<img id="image6" style="width:1440px;" src="./images/customers.svg">
</div>
<!--4.5 PART4 Takeaway-->
<img id="image" style="width:1440px;" src="./images/S4storeTips.svg">
<!--Empty Model-->
<!--<div class="slide2">-->
<!-- <div class="sticky2">-->
<!--<h5>First and Foremost</h5>-->
<!--<p>We can show that we care about the actual ‘cost’ that we are paying for each chocolate bar by purchasing chocolate which has a clear label of where the cocoa beans were coming from.</p>-->
<!-- </div>-->
<!--</div> -->
<!--4.6 End navigation-->
<div class="end squares">
<div class="section">
<a href="part3.html">Previous</a>
</div>
<div class="introsection3" id="end">
<!--<h1>Let's look at the <b>bittersweet price</b> we've paid for each </br> pound of chocolate more closely...</h1>-->
<h1>Guilty, or not guilty, that is the question. In the end, we all have to answer this question with our own actions.</h1>
</div>
<!--next icon & link -->
<div class="center-con">
<div class="round">
<a href="endpage.html">
<div id="cta">
<span class="arrow segunda next2 "></span>
</div>
<h5>End</h5>
</a>
</div>
</div>
<!--<div class="continueSection"><a href="part3.html">Continue</a></div>-->
</div>
<!-- References Links -->
<script src='https://d3js.org/d3.v5.min.js'></script>
<script src="./src/scriptP4.js"></script>
<!--<script src="odometer.js"></script>-->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
// offset: 120, // offset (in px) from the original trigger point
// delay: 0, // values from 0 to 3000, with step 50ms
// duration: 400, // values from 0 to 3000, with step 50ms
// easing: 'ease', // default easing for AOS animations
// once: false, // whether animation should happen only once - while scrolling down
// mirror: false, // whether elements should animate out while scrolling past them
// anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
</script>
</body>
</html>