-
Notifications
You must be signed in to change notification settings - Fork 0
/
future.html
85 lines (80 loc) · 3.71 KB
/
future.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
<!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 src="Media/whatnow-poster.jpg">
</div>
<div class = "content">
<div class = "block">
<div class = "text-container"><h1>What can we do?</h1></div>
<div class = "text-container">
Every decision we make may affect a group of people 10,000 miles away from us. We may be experiencing the same global environmental issue, but we do not have the same systems in place to mitigate and adapt to these changes.
The worse part is that none of the locals I interviewed is aware of climate change’s role in their struggles.
</div>
<div class = "text-container">
Help me spread these stories, so people who have the means to initiate change can hear these voices.
</div>
<button id="copyButton">Share Website</button>
<div id="copyNotification" class="hidden">Link copied to clipboard!</div>
<div class="text-container"></div>
<a href = "https://www.instagram.com/limit.dnex/"><button>Instagram</button></a>
<p id="textToCopy">https://planet-tales.org/</p>
<!-- Optional feedback message -->
<div id="copyMessage"></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>