-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
327 lines (315 loc) · 12.7 KB
/
index.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Styles -->
<link rel="stylesheet" href="css/style.css" />
<!-- Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<!-- Favicon -->
<link rel="icon" href="Logos/Favicon.png" type="image/png" />
<!-- Title -->
<title>Carbon Footprint Calculator</title>
</head>
<body>
<!-- Hero BG Img -->
<div class="hero-bg">
<!-- Header -->
<header class="header">
<!-- Logo -->
<img
src="Logos/Carbon Footprint Final.png"
alt="Carbon Footprint Logo"
class="logo"
/>
<!-- Navigation Bar -->
<nav class="header-navi">
<ul class="header-navi-list">
<li>
<a class="header-navi-link" href="#howitworks"
>How It Works <i class="fa-solid fa-question"></i
></a>
</li>
<li>
<a class="header-navi-link" href="#sector-contri"
>Sector Contributions
</a>
</li>
<li>
<a class="header-navi-link" href="#india-emissions"
>India's Emissions <i class="fa-solid fa-wind"></i>
</a>
</li>
<li>
<a class="header-navi-link" href="#help"
>Help <i class="fa-solid fa-handshake-angle"></i>
</a>
</li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero">
<h1 class="heading-primary">
Is Your Footprint
<span class="greenify"
>Green <i class="fa-solid fa-seedling"></i
></span>
Enough???
</h1>
<p class="hero-description">
<strong
><span class="greenify">
What's your carbon footprint?
</span></strong
>
→ Carbon footprint is a very important means to understand the
impact of a person's behavior on Global Warming. That's why someone
who effectively wants to contribute to stop global warming, even on
an individual scale, needs to measure and keep track of their
personal carbon footprint.
</p>
<p class="cta-para">
Use our Carbon Footprint Calculator and offset your emissions
today!!
</p>
<p>
<a href="cf.html" class="btn btn-cta">Calculate Now!</a>
<a href="#howitworks" class="btn btn-info">Learn More ↓</a>
</p>
</div>
</section>
</div>
<!-- HOW IT WORKS SECTION (NO BG) -->
<section class="howitworks-section" id="howitworks">
<!-- Heading for HOW IT WORKS -->
<div class="container howitworks-intro">
<span class="subheading">How It Works</span>
<h1 class="howitworks-section-heading">
<span class="greenify"><i class="fa-solid fa-leaf"></i></span> Your
Carbon Footprint in 3 simple steps
</h1>
</div>
<div class="container grid grid--2cols">
<!-- STEP 01 -->
<div class="steps-text-box">
<p class="step-number">01</p>
<h3 class="heading-tertiary">
Get Started with the Click of a button!
</h3>
<p class="step-description">
There is no need to contemplate for hours what exactly is your
carbon emission. Just click on the
<span class="greenify">Calculate Now!</span> button on our Homepage
to navigate to our custom, suitable-for-all and easy-to-use Carbon
Footprint Calculator.
</p>
</div>
<div class="steps-img-box">
<img
src="bgimg/step-1.png"
alt="Step 1 for Calculator"
class="steps-img"
/>
</div>
<!-- STEP 02 -->
<div class="steps-img-box">
<img
src="bgimg/step-2.png"
alt="Step 2 for Calculator"
class="steps-img"
/>
</div>
<div class="steps-text-box">
<p class="step-number">02</p>
<h3 class="heading-tertiary">Simply Enter Your Data</h3>
<p class="step-description">
Our calculator needs some parameters to calculate your carbon
emissions. It uses a widely accepted complex formula to calculate
the Carbon Emissions in C02 emitted in tonnes per year.
</p>
</div>
<!-- STEP 03 -->
<div class="steps-text-box">
<p class="step-number">03</p>
<h3 class="heading-tertiary">Analyse the result</h3>
<p class="step-description">
After putting in the values the resultant footprint is calculated
and further measures can be taken to reduce your footprint if it
crosses the threshold.
</p>
</div>
<div class="steps-img-box">
<img
src="bgimg/step-3.png"
alt="Step 3 for Calculator"
class="steps-img"
/>
</div>
</div>
</section>
<!-- Sectors Contributing Section -->
<div class="sectors-contri-section" id="sector-contri">
<h1 class="contri-section-heading">
<span class="greenify"><i class="fa-solid fa-leaf"></i></span> Sectors
Contributing to Carbon Emissions
</h1>
<!-- Section Intro -->
<div class="contri-section-intro">
<p class="contri-section-para">
Carbon Dioxide Emissions continue to rise, when instead they should be
rapidly falling. For effective reduction of emissions we should be
aware which sectors contribute the most & how we can use this analysis
to develop effective solutions and mitigation strategies.
</p>
</div>
<!-- Pie Chart -->
<div class="containerify">
<p class="section-chart-para section-para">
<i class="fa-solid fa-arrow-right-long"></i> Electricity is the
largest carbon emitting sector (30%). <br />
<br />
<i class="fa-solid fa-arrow-right-long"></i> Transportation is the
second highest sector for emission followed by Industries, Commercial
& Residential and Agriculture. <br />
<br />
This breakdown depicts that a range of sectors and processes
contribute to global emissions & no single or simple solution is
viable to tackle climate change. For instance, focusing on electricity
or transport or deforestation alone is insufficient. To reach net-zero
emissions we need innovations across sectors.
</p>
<div class="pie-chart">
<canvas id="myPie" class="pie-chart-canvas"></canvas>
</div>
</div>
</div>
<!-- India's Study Section -->
<div class="india-study-section" id="india-emissions">
<h1 class="india-section-heading">
<span class="greenify"><i class="fa-solid fa-leaf"></i></span> A Study
Of India on Carbon Emissions
</h1>
<p class="india-section-para">
We conducted our own survey and analysed all gathered data. Our
findings, in a summarised manner were as follows:
</p>
<div class="bar-chart" id="charts1">
<canvas id="myChart"></canvas>
</div>
<p class="india-section-para">
The national capital - Delhi has the highest annual carbon footprint in
the country. In fact, Delhi's annual CO2 emission of 69.4 million tonnes
is equal to the CO2 emission of Bangalore, Hyderabad and Chennai put
together. When it comes to per capita CO2 emission, Chandigarh and
Vadodara are far ahead of the rest with 3.9 tonnes and 3.5 tonnes
respectively. The carbon footprint for a Mumbaiite was concentrated in
the range of 0.51 tonnes of carbon dioxide per year. Our analysis found
that higher income groups have a higher carbon consumption lifestyle as
compared to those from lower income groups. CO2 emissions are dominated
by the burning of fossil fuels for energy production and industrial
production of materials such as cement. Since India has the second
highest population in the world i.e 17.5% of the worlds total
population, this increases the consumption of food, energy, goods and
services thereby resulting in the further increase of CO2 emission.
</p>
</div>
<!-- Conclusion -->
<div class="conclusion-section" id="help">
<h1 class="contri-section-heading">
<span class="greenify"><i class="fa-solid fa-leaf"></i></span> Our Final
Words...
</h1>
<p class="conclusion-section-para">
Through this website and the information it provides, we wanted to help
you understand, calculate and shrink your carbon footprints. Whether
your aim is to reduce your footprints by one tonne, or to shrink it to
one tonne, this website should be full of useful information.
</p>
<img
src="bgimg/conclusion-1.webp"
alt="Conclusion-1"
class="conclusion-img"
/>
<p class="conclusion-section-para">
The next few years will be decisive in our fight against climate change
and our success will certainly depend on our ability to reduce our
carbon footprint.
</p>
<img
src="bgimg/conclusion-2.webp"
alt="Conclusion-2"
class="conclusion-img"
/>
<p class="conclusion-section-para">
Going zero waste is a great step towards combating climate change.
Practicing the 5 R's of zero waste can help. <br />
<br />
<span class="greenify"><i class="fa-solid fa-hand"></i></span> REFUSE:
Avoid single use plastics and paper products by saying no thank you,
opting for reusables. <br />
<br />
<span class="greenify"
><i class="fa-solid fa-diagram-predecessor"></i
></span>
REDUCE: Downsize what you purchase, opting to be more mindful of what
you really need. <br />
<br />
<span class="greenify"><i class="fa-solid fa-rotate-right"></i></span>
REUSE: Always find a way to keep an item out of the landfill by keeping
it in great condition, repairing or upcycling it when it breaks. <br />
<br />
<span class="greenify"><i class="fa-solid fa-trash"></i></span> ROT: Set
up a compost system for your food scraps, or find a food scrap drop off
center (like a farmers market, or community garden) near your house.
<br />
<br />
<span class="greenify"><i class="fa-solid fa-recycle"></i></span>
RECYCLE: Properly recycle any plastic, paper, glass or metal that comes
into your life you cannot refuse, reduce, or reuse by researching your
state's recycling laws.
</p>
<img
src="bgimg/conclusion-3.webp"
alt="Conclusion-3"
class="conclusion-img"
/>
<p class="conclusion-section-para">
<span class="greenify"><i class="fa-solid fa-carrot"></i></span> Choose
responsible consumption, based on local products and sustainable
production, and start growing produce in your own urban garden.
<br /><br />
<span class="greenify"><i class="fa-solid fa-bicycle"></i></span> Get
about using sustainable means of transport, such as public transport,
bicycle or on foot, and buy vehicles that are environmentally friendly.
<br />
<br />
<span class="greenify"><i class="fa-solid fa-battery-full"></i></span>
Choose a 100 % renewable energy consumption, buy energy-saving
appliances, and control heating and air conditioning to save energy.
<br /><br />
<span class="greenify"><i class="fa-solid fa-earth-asia"></i></span> Be
aware and tell others about the importance of reducing the carbon
footprint. <br /><br />
<span class="greenify"><i class="fa-solid fa-recycle"></i></span> Reduce
waste, Reuse your packaging, Recycle it and if this is not possible,
dispose of it in the appropriate container.
</p>
<img
src="bgimg/conclusion-4.webp"
alt="Conclusion-4"
class="conclusion-img"
/>
</div>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="charts.js"></script>
<script src="script.js"></script>
</body>
</html>