-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclimate-change.html
148 lines (128 loc) · 7.39 KB
/
climate-change.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
<!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>CliMATES</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="gif/global-warming.gif">
</head>
<body>
<nav>
<span class="logo-container">
<a href="index.html"><img src="img/logo.png" alt="CliMATES Logo"></a>
</span>
<div class="nav-items">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="About.html">about</a></li>
<li>
<a href="information.html">information</a>
<div class="dropdown">
<ul>
<li><a href="climate-change.html">🌍🌡️climate change </a></li>
<li><a href="carbon-footprint.html">👣 carbon footprint </a></li>
<li><a href="sustainability.html">♻️ sustainability </a></li>
</ul>
</div>
</li>
<li><a href="donation.html">donation</a></li>
</ul>
</div>
</nav>
<div class="mobile-nav">
<div class="mobile-nav-logo">
<img src="img/logo.png" alt="">
</div>
<div class="mobile-links">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="information.html">information</a></li>
<li><a href="donation.html">donation</a></li>
</ul>
</div>
</div>
<div class="climate-section-one">
<div class="climate-section-one-header">
<h2>Climate Change</h2>
</div>
<div class="climate-section-one-img">
<img src="gif/global-warming.gif" alt="">
</div>
</div>
<div class="climate-section-two">
<div class="climate-section-two-img">
<img src="img/climate-change2.png" alt="">
</div>
<div class="climate-section-two-text">
<!-- <h2>What is Climate Change?</h2> -->
<p>Climate change is the long term increase in Earth's temperature and weather patterns that includes global warming.</p>
</div>
</div>
<div class="climate-section-two">
<div class="climate-section-two-text">
<p>Greenhouse gases trap heat and warm the planet</p>
</div>
<div class="climate-section-two-img">
<img src="gif/greenhouse-effect.gif" alt="" style="border-radius: 30px; width: 30vw;">
</div>
</div>
<div class="climate-section-three-container">
<h2>Effects of Climate Change</h2>
<div class="climate-three-card-container">
<div class="climate-card">
<div class="climate-card-front front-1">
<h3>Drought</h3>
</div>
<div class="climate-card-back back-1">
<p>Higher air temperatures from climate change dries out the water in soil and plants. This makes it harder for plants and animals to survive which causes droughts and worsens existing drought periods.</p>
</div>
</div>
<div class="climate-card">
<div class="climate-card-front front-2">
<h3>Raising Sea Level</h3>
</div>
<div class="climate-card-back back-2">
<p>Global Sea Level is rising an eighth of an inch every year due to climate change increasing the world's temperature and making the glaciers melt, resulting in floods, storms, and damage to the sea life.</p>
</div>
</div>
<div class="climate-card">
<div class="climate-card-front front-3">
<h3>Severe Storms</h3>
</div>
<div class="climate-card-back back-3">
<p>When climate change increases surface temperatures and generates more water vapor from evaporation which makes storms stronger.
A hotter atmosphere increases wind speeds and causes tropical storms and hurricanes.</p>
</div>
</div>
</div>
<p>(hover cards to read more)</p>
</div>
<div class="climate-section-last">
<a href="sustainability.html">
<p>Learn how you can help the cause</p>
</a>
</div>
<div class="footer-container">
<div class="footer-logo">
<img src="img/logo purple.png" alt="">
</div>
<div class="footer-text">
<p>copyright© climates.com 2022</p>
</div>
<div class="footer-icon">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
</a>
</div>
</div>
</body>
</html>