-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
865 lines (844 loc) · 47.7 KB
/
index.html
File metadata and controls
865 lines (844 loc) · 47.7 KB
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
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
<!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" />
<title>CLEAN ENERGY</title>
<link rel="stylesheet" href="styles/index.css" />
<script src="index.js" defer></script>
</head>
<body class="dark-mode">
<div class="pop-up">
<div class="pop-up__text">
<p>Please, use landscape mode for the best experience!</p>
<img src="assets/images/landscape.png" alt="" />
</div>
</div>
<div class="scroll-container">
<section class="section__start">
<div class="section__start--help">
<div class="flex__container--start">
<div class="flex__child--start">
<p id="number__seven">7</p>
</div>
<div class="flex__child--start heading">
<div class="text--little">
AFFORDABLE AND CLEAN ENERGY
</div>
<div class="text--normal">
A scrollytelling of <div class="line-break"></div> personal motivations and
impacts
</div>
</div>
</div>
</div>
</section>
<section class="section__story --one">
<div class="container--flex">
<div class="flex-child">
<img
class="portrait"
src="assets/svg/man-waving.svg"
alt="image of john"
/>
</div>
<div class="flex-child">
<p class="inToLeft">Meet John.</p>
</div>
</div>
</section>
<section class="section__story --two">
<div class="container--flex">
<div class="flex-childd">
<div class="table-and-bills__container">
<div class="bills__container">
<img
class="bills bills--one"
src="assets/svg/letter.svg"
alt="letter bill"
/>
<img
class="bills bills--two"
src="assets/svg/letter.svg"
alt="letter bill"
/>
<img
class="bills bills--three"
src="assets/svg/letter.svg"
alt="letter bill"
/>
</div>
<div class="table">
<img src="assets/svg/table.svg" alt="table" />
</div>
</div>
</div>
<div class="flex-child">
<p class="inToLeft">
He struggles with
<span class="para__span">a lot of bills.</span>
</p>
</div>
</div>
</section>
<section class="section__story --three">
<div class="container--flex">
<div class="flex-child">
<img
class="energy__bill"
src="assets/svg/energy-bill.svg"
alt="energy bill"
/>
</div>
<div class="flex-child">
<p class="inToLeft">
Most of his expenses are dedicated to <span class="para__span"> high energy bills.
</span> In addition, John feels guilty for <span class="para__span">the climate impact of his life style.</span>
</p>
</div>
</div>
</section>
<section class="section__story --four">
<div class="container--flex">
<div class="flex-child">
<img
src="assets/svg/man-thinking.svg"
alt="john thinking"
/>
</div>
<div class="flex-child">
<p class="inToLeft">
John was wondering about
<span class="para__span"
>sustainable and affordable ways to live better.</span
>
</p>
</div>
</div>
</section>
<section class="section__story --five">
<div class="container--flex">
<div class="flex-child">
<img
src="assets/svg/man-desk.svg"
alt="john at his desk"
/>
</div>
<div class="flex-child">
<p class="inToLeft">
He started doing research online, <br />
<br />
</p>
<p class="inToLeft delayed">
<span class="para__span"
>and came across this website.</span
>
</p>
</div>
</div>
</section>
<section class="laptop__screen--IO">
<div class="laptop__screen">
<div class="browser">
<div class="circle --red">
<span class="functions x">x</span>
</div>
<div class="circle --yellow">
<span class="functions close">-</span>
</div>
<div class="circle --green">
<span class="functions fullscreen"><></span>
</div>
</div>
<div class="browser__url">
<div class="arrow --left">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="256"
height="256"
viewBox="0 0 256 256"
xml:space="preserve"
>
<defs></defs>
<g
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 10;
fill: none;
fill-rule: nonzero;
opacity: 1;
"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<path
id="arrow-fill"
d="M 30.49 10.921 c 0.63 0.537 0.708 1.483 0.171 2.114 L 4.745 43.5 H 88.5 c 0.829 0 1.5 0.671 1.5 1.5 s -0.671 1.5 -1.5 1.5 H 4.745 l 25.916 30.465 c 0.536 0.63 0.461 1.577 -0.171 2.114 c -0.631 0.537 -1.577 0.46 -2.114 -0.17 L 0.357 45.971 c -0.014 -0.016 -0.019 -0.038 -0.032 -0.054 c -0.07 -0.09 -0.138 -0.182 -0.187 -0.288 c -0.012 -0.026 -0.016 -0.053 -0.026 -0.079 C 0.1 45.519 0.091 45.488 0.08 45.455 C 0.032 45.306 0 45.153 0 45 c 0 0 0 0 0 0 s 0 0 0 0 c 0 -0.153 0.032 -0.306 0.08 -0.455 c 0.01 -0.032 0.019 -0.063 0.032 -0.094 c 0.01 -0.026 0.015 -0.053 0.027 -0.079 c 0.049 -0.106 0.117 -0.198 0.187 -0.288 c 0.013 -0.017 0.018 -0.038 0.032 -0.054 l 28.019 -32.937 C 28.913 10.461 29.859 10.384 30.49 10.921 z"
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 10;
fill: rgb(0, 0, 0);
fill-rule: nonzero;
opacity: 1;
"
transform=" matrix(1 0 0 1 0 0) "
stroke-linecap="round"
/>
</g>
</svg>
</div>
<div class="arrow --right">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="256"
height="256"
viewBox="0 0 256 256"
xml:space="preserve"
>
<defs></defs>
<g
style="
stroke: none;
stroke-width: 0;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 10;
fill: none;
fill-rule: nonzero;
opacity: 1;
"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<path
d="M 30.49 10.921 c 0.63 0.537 0.708 1.483 0.171 2.114 L 4.745 43.5 H 88.5 c 0.829 0 1.5 0.671 1.5 1.5 s -0.671 1.5 -1.5 1.5 H 4.745 l 25.916 30.465 c 0.536 0.63 0.461 1.577 -0.171 2.114 c -0.631 0.537 -1.577 0.46 -2.114 -0.17 L 0.357 45.971 c -0.014 -0.016 -0.019 -0.038 -0.032 -0.054 c -0.07 -0.09 -0.138 -0.182 -0.187 -0.288 c -0.012 -0.026 -0.016 -0.053 -0.026 -0.079 C 0.1 45.519 0.091 45.488 0.08 45.455 C 0.032 45.306 0 45.153 0 45 c 0 0 0 0 0 0 s 0 0 0 0 c 0 -0.153 0.032 -0.306 0.08 -0.455 c 0.01 -0.032 0.019 -0.063 0.032 -0.094 c 0.01 -0.026 0.015 -0.053 0.027 -0.079 c 0.049 -0.106 0.117 -0.198 0.187 -0.288 c 0.013 -0.017 0.018 -0.038 0.032 -0.054 l 28.019 -32.937 C 28.913 10.461 29.859 10.384 30.49 10.921 z"
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 10;
fill: rgb(0, 0, 0);
fill-rule: nonzero;
opacity: 1;
"
transform=" matrix(1 0 0 1 0 0) "
stroke-linecap="round"
/>
</g>
</svg>
</div>
<div class="browser__refresh">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
>
<path
d="M480 896q-133 0-226.5-93.5T160 576q0-133 93.5-226.5T480 256q85 0 149 34.5T740 385V256h60v254H546v-60h168q-38-60-97-97t-137-37q-109 0-184.5 75.5T220 576q0 109 75.5 184.5T480 836q83 0 152-47.5T728 663h62q-29 105-115 169t-195 64Z"
/>
</svg>
</div>
<div class="url__field">
<p>https://affordable-clean-energy.IDG1293</p>
</div>
</div>
<div class="content__container">
<section class="section section--cover">
<div class="clean-energy para__background">
<p>Clean Energy</p>
</div>
</section>
<section class="section section--first">
<div class="para">
<div class="para__background">
<p>
Clean energy sources are types of energy
that do not release harmful emissions or
pollutants, such as greenhouse gases,
sulfur dioxide, or nitrogen oxides.
These types of energy are also referred
to as renewable energy, as they are
naturally replenished and don't use up
natural resources.
<span class="para__span"
>Examples of clean energy sources
include solar, wind, hydro,
geothermal, and biomass
energy.</span
>
</p>
</div>
</div>
<div class="para goal">
<div class="para__background">
<p>
As the impact of climate change becomes
increasingly concerning, the adoption of
clean energy has become crucial to
reduce greenhouse gas emissions. The
Intergovernmental Panel on Climate
Change (IPCC) recommends that a shift
towards renewable energy sources is
necessary to limit global warming to
1.5°C above pre-industrial levels and
prevent the most severe impacts of
climate change. Therefore,
<span class="para__span"
>transitioning to clean energy</span
>
is necessary to protect the environment
and the well-being of future
generations.
</p>
</div>
</div>
<div class="para50"></div>
</section>
<!-- SNIZHANA-->
<!-- Section Consequences -->
<section class="section section--consequences">
<div class="text text--consequences">
<p class="text__content text__content--black">
As a result of climate change, we are
already seeing significant negative
consequences for the environment. Nowadays,
<span class="para__span gold"
>glaciers are melting at an accelerated
rate</span
>, for example in Montana's Glacier National
Park, the number of glaciers in 1910 was
150, and today the number of glaciers has
decreased to 30.
</p>
<p class="text__content text__content--black">
Over the last hundred years,
<span class="para__span gold"
>the concentration of carbon dioxide
(CO2) has increased by 40%</span
>, which is the highest level in the last
650,000 years.
</p>
<p class="text__content text__content--black">
<span class="para__span gold"
>Melting ice is causing sea level to
rise</span
>, with the rise occurring at a much faster
rate in recent years (3.2 millimeters per
year). As a result of melting ice, a large
number of fauna is displaced or disappears;
for example, the population of Adélie
penguins in Antarctica has decreased by 90%.
</p>
<p class="text__content text__content--black">
However,
<span class="para__span gold"
>the global average surface temperature
has increased by almost 2 degrees
Fahrenheit (1.1 degrees Celsius)</span
>
since 1750. This is in turn affecting
ecosystems and communities all across the
world, with some regions experiencing severe
drought or heavy rains, earthquakes, floods,
frequent fires or lack of drinking water; a
large number of fauna and flora are
disappearing or migrating.
</p>
<p class="text__content text__content--black">
But the future progression of these effects
depends on the
<span class="para__span gold"
>total amount of carbon dioxide and
other Greenhouse Gases</span
>emitted and the extent to which the global
ecosystem is allowed to irreversibly worsen
before taking drastic action. If we cut
emissions soon, we can avoid some of the
worst consequences now before they become
irreversible aspects of a worsening global
climate.
</p>
</div>
</section>
<!-- Section Wave -->
<section class="section section--wave">
<div class="text text--wave">
<p class="text__content text__content--wave">
Thus, the sea level has already risen by 0.2
meters since 1880, and scientists predict
that
<span class="para__span blazing"
>the sea level may rise 0,3 meters by
2100 or 2,4 meters</span
>with carbon emissions at the current level.
</p>
<p class="text__content text__content--wave">
<span class="para__span blazing"
>Between 20 and 31 million people in the
United States live in areas that will be
underwater</span
>
unless significant reductions in greenhouse
gas emissions occur. Scientists have come to
this conclusion, reports "Voice of America"
with reference to Reuters.
</p>
<p class="text__content text__content--wave">
In addition, humanity will be left without a
significant supply of fresh water as a
result of melting
<span class="para__span blazing"
>glaciers, that stores about 3/4 of the
world's supply of fresh water</span
>.
</p>
<p class="text__content text__content--wave">
As a result of the rising sea levels,
low-elevation countries like the
<span class="para__span blazing"
>Netherlands, Denmark, large coastlines
around India, China, and Australia, as
well as many islands like the Maldives,
Kiribati, and Jakarta will all
experience flooding and permanent loss
of land.</span
>
This is only a primary effect of the rising
sea-levels, not to mention further disasters
that would be caused as flooding destroys
coastal power systems, shipping
infrastructure, and habitats.
</p>
</div>
</section>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<!-- Section Prediction -->
<section class="section section--prediction">
<div class="text text--prediction">
<div class="text__container">
<p
class="text__content text__content--prediction"
>
<span class="para__span dark-blue"
>Some diseases, such as malaria,
will become more widespread.</span
>
Additionally, as average global
temperatures rise, the human body’s
natural defenses may become less
effective as fungi, bacteria, and
viruses, kept at bay by our relatively
high body temperature, will evolve to
live at higher temperatures closer to
our own internal body temperature, and
thus be more capable of infecting
humans, whose evolutionary adaptation
cannot respond as quickly as will that
of the microorganisms.
</p>
<img
class="photo-card"
src="assets/images/malyariya.jpeg"
alt="malaria photo"
/>
</div>
<div class="text__container">
<p
class="text__content text__content--prediction"
>
Scientists conclude that the intensity
of hurricanes and the frequency of the
most powerful hurricanes (Category 4 and
5) have increased significantly since
the 1880s. According to scientists'
forecasts,
<span class="para__span dark-blue"
>hurricanes will become stronger and
more frequent</span
>, and the amount of precipitation will
increase even more.
</p>
<img
class="photo-card"
src="assets/images/hurricane.png"
alt="hurricanes photo"
/>
</div>
<div class="text__container">
<p
class="text__content text__content--prediction"
>
Scientists predict
<span class="para__span gold"
>an increase in the intensity of
droughts and abnormal heat waves and
all seasons becoming hotter</span
>
for most countries. Some countries are
likely to enter the stage of
mega-drought. A large part of the flora
and fauna will disappear.
</p>
<img
class="photo-card"
src="assets/images/drought.jpeg"
alt="drought photo"
/>
</div>
<div class="text__container">
<p
class="text__content text__content--prediction"
>
<span class="para__span gold"
>The number of forest fires will
increase</span
>, even in rainy regions. For example,
in the US, the cost of fighting forest
fires has increased 11 times over the
past 30 years.
</p>
<img
class="photo-card"
src="assets/images/fire.jpeg"
alt="forest fire photo"
/>
</div>
</div>
</section>
<!-- Section Climate-relating -->
<section class="section section--climate-relating">
<div class="text text--climate-relating">
<p class="text__content">
<span class="para__span gold"
>Fuels such as soft coal and gas account
for about 75% of greenhouse gas
emissions and 90% of carbon dioxide
emissions.</span
>
These types of fuel are used as the main
sources of energy all over the world.
<span class="para__span gold"
>As greenhouse gases cover our planet,
they catch the sun's rays and accumulate
heat</span
>,
thus causing climate change.
</p>
</div>
</section>
<!-- SNIZHANA-->
<section class="section section--fifth">
<div class="para__background actions">
<h2>Changes you can make to help:</h2>
</div>
<div class="para-heading__container">
<div class="para-heading">
<h3>
Start to invest in a clean energy
electricity provider!
</h3>
</div>
</div>
<div class="para">
<div class="para__background">
<p>
<b>Option 1: Install solar panels.</b>
<span class="para__span dark-blue"
>You can install your own solar
panel system if you are willing to
make a bigger investment </span
>for it. The cost of solar panels has
dropped by 90% over the past decade and
will continue to drop.
</p>
</div>
</div>
<div class="para-heading__container">
<div class="para-heading">
<h3>Is it profitable?</h3>
</div>
</div>
<div class="para">
<div class="para__background">
<p>
The
<span class="para__span dark-blue"
>cost of a solar panel system in
Norway is about 4,000 - 13,000
dollars</span
>
with a payback period of 10-15 years.
Thus, despite the significant initial
investment, the average Norwegian
homeowner can
<span class="para__span dark-blue"
>save about 8,000-26,000 dollars in
30 years</span
>
(solar panels have a service life of up
to 30 years).
</p>
</div>
</div>
<div class="para-heading__container">
<div class="para-heading">
<h3>
What to do if there are no funds for
investments in clean energy?
</h3>
</div>
</div>
<div class="para">
<div class="para__background">
<p>
<b
>Option 2: Modify your existing
energy plan.</b
>
With a low investments option, you can
call your current electricity provider
and ask about
<span class="para__span dark-blue"
>switching to a renewable energy
plan</span
>. This option is also suitable if you
rent housing. However, you will not
receive clean energy directly into your
home, it will be fed into the same
system, but this will provide a small
premium for clean energy producers.
<span class="para__span dark-blue"
>Participation in such a plan
increases the overall percentage of
clean energy supply </span
>and reduces dependence on fossil fuels.
</p>
</div>
</div>
<div class="para-heading__container">
<div class="para-heading">
<h3>
What if a renewable energy plan is not
available from your provider?
</h3>
</div>
</div>
<div class="para">
<div class="para__background">
<p>
<b
>Option 3: Participate in a
community solar panel or wind farm
project.</b
>
If a similar energy plan is not
available to you,
<span class="para__span dark-blue"
>look for a community wind or solar
project.</span
>
In some cases, a group of such residents
rents a certain number of solar panels.
In this case, the investment will be
lower.
</p>
</div>
</div>
<div class="para-heading__container">
<div class="para-heading">
<h3>Speak up!</h3>
</div>
</div>
<div class="para">
<div class="para__background">
<p>
We can raise awareness about the
importance of clean energy and its
benefits by educating ourselves and
others,
<span class="para__span dark-blue"
>sharing information on social
media</span
>, and supporting organizations
<span class="para__span dark-blue"
>that promote clean energy
solutions</span
>.
</p>
</div>
</div>
</section>
<section class="section section--sixth">
<div class="para__background">
<h2>
Countries that are paving the way for a
sustainable future
</h2>
</div>
<div class="flex_container_flag denmark">
<div class="flag_text">
<p>
Denmark is a world leader in wind
energy, with over 40% of its electricity
coming from wind power. The country has
also set a target to be 100% reliant on
renewable energy by 2050.
</p>
</div>
<div class="flag_img_container">
<img
src="assets/images/denmark.png.png"
alt="denmark"
/>
</div>
</div>
<div class="flex_container_flag">
<div class="flag_text">
<p>
Sweden has set an ambitious goal of
being carbon neutral by 2045, and the
country is well on its way to achieving
this target. It has already reduced its
greenhouse gas emissions by 25% since
1990 and is increasing its use of
renewable energy sources.
</p>
</div>
<div class="flag_img_container">
<img
src="assets/images/sweden.png.webp"
alt="sweden"
/>
</div>
</div>
<div class="flex_container_flag">
<div class="flag_text">
<p>
Costa Rica has a goal of becoming carbon
neutral by 2050 and has made significant
progress in increasing its use of
renewable energy sources, particularly
hydropower and geothermal.
</p>
</div>
<div class="flag_img_container">
<img
src="assets/images/costa-rica.png.webp"
alt="costa-rica"
/>
</div>
</div>
<div class="flex_container_flag">
<div class="flag_text">
<p>
Germany is a leader in solar power, with
over 50% of the world's installed solar
capacity. The country has also set a
target of phasing out nuclear power and
transitioning to a renewable
energy-based economy.
</p>
</div>
<div class="flag_img_container">
<img
src="assets/images/germany.png.webp"
alt="germany"
/>
</div>
</div>
<div class="flex_container_flag iceland">
<div class="flag_text">
<p>
Iceland has virtually eliminated the use
of fossil fuels and generates nearly
100% of its electricity from renewable
sources, primarily geothermal and
hydropower. The country has also become
a leader in the production of green
hydrogen, a promising fuel source for
the future.
</p>
</div>
<div class="flag_img_container">
<img
src="assets/images/iceland.png.webp"
alt="iceland"
/>
</div>
</div>
<div class="unSticky__sensor"></div>
<div class="flex_container_flag">
<div>
<p></p>
</div>
<div></div>
</div>
</section>
</div>
</div>
</section>
<section class="section__story --afterResearch">
<div class="container--flex">
<div class="happy-desk">
<div class="thought-bubble">
<img src="assets/svg/thought-bubble.svg" alt="" />
</div>
<img
class="happy-desk-img"
src="assets/svg/happy-desk.svg"
alt=""
/>
</div>
</div>
</section>
<section class="section__story --monthsLater">
<div class="container--flex">
<div class="flex-child">
<p class="inToLeft">
After calculating the costs and investment return period, he decided to
<span class="para__span"
>invest $10,000 in solar panels</span> for his house.
</p>
</div>
</div>
</section>
<section class="section__story --end">
<div class="container--flex">
<div class="end-paragraph">
<p class="inToLeft">
John hasn't reduced his current costs,
but he knows that <span class="para__span">his solar panels will pay for themselves in 10-12 years</span>,
and he won't pay any money for electricity for the next 15-20 years.
<span class="para__span">Now John is very sustainable and happy!</span>
</p>
</div>
</div>
<div class="bike">
<img src="assets/svg/john-bike.svg" alt="" />
</div>
<div>
<p>This project was made by</p>
<p>Edgar Dahl, Snizhana Korolova and Christopher Ngo</p>
</div>
</section>
</div>
</body>
</html>