-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (101 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planet.Tales</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href = "style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "header">
<h1 class="split-color-heading">
Planet. <span class="second-color">Tales</span>
</h1>
<!-- Hamburger icon button for small screens -->
<div class="hamburger" id="hamburgerIcon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<!-- Navigation panel -->
<nav id="navPanel">
<ul>
<li><a href="https://www.edliao.com/">About</a></li>
<li><a href="index.html">Motivation</a></li>
<li><a href="typhoons.html">Typhoons</a></li>
<li><a href="agri.html">Agriculture</a></li>
<li><a href="educ.html">Education</a></li>
<li><a href="future.html">What now?</a></li>
</ul>
</nav>
<div class = "categories">
<h3><a href="https://www.edliao.com/">About</a></h3>
<h3><a href="index.html">Motivation</a></h3>
<h3><a href="typhoons.html">Typhoons</a></h3>
<h3><a href="agri.html">Agriculture</a></h3>
<h3><a href="educ.html">Education</a></h3>
<h3><a href="future.html">What now?</a></h3>
</div>
</div>
<div class="poster">
<img id="slideshow" src="Media/poster1.jpg" alt="Image 1">
</div>
<div class = "content">
<div class = "block">
<div class = "text-container"><h1>Motivation</h1></div>
<div class = "text-container">
While developing countries (excluding China and India) have only contributed 35% of the greenhouse gas emissions last 2011, they are disproportionately facing the negative impacts of climate change,
experiencing extreme heat waves, floods, and other climate-related disasters.
</div>
<img src="Media/world.png" alt="Carbon emissions per country">
<span class = "caption">Source: World Population Review</span>
<div class = "text-container">
Amidst all the climate change struggles humanity is currently facing, it is not easy to forget the small communities around the world who are also in the same situation but are not as prepared as the
majority. Like us, they deserve the same amount of support–more than what we have, frankly. In hopes of uncovering their narratives, I think we should hear from the people themselves about what they
have to say about this.
</div>
<div class = "text-container">
With the tools below, I aim to <strong>amplify the voices of the unheard</strong> giving justice to the most vulnerable.
</div>
<img src="Media/image.jpg" alt="Beautiful scenery in the rural Philippines">
<div class="big-caption">
images.
</div>
<video controls>
<source src="Media/video.MP4" type="video/mp4">
</video>
<div class="big-caption">
videos.
</div>
<img src="Media/data.jpg" alt="A text stating the increasing wind speeds and number of cyclones within the Philippines">
<div class="big-caption">
data.
</div>
<img src="Media/interview.png" alt="An interviewer with a local farmer">
<div class="big-caption">
interviews.
</div>
<div class = "text-container">
Continue: <a href="typhoons.html">Typhoons</a>
</div>
</div>
</div>
<footer>
<p>© 2023 Planet Tales. All rights reserved.</p>
<div class="social-links">
<a href="https://www.instagram.com/limit.dnex/" target="_blank" rel="noopener noreferrer">
<i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/edrian-liao/PlanetTales" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>