-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
272 lines (246 loc) · 9.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta description="">
<title>Volcanoes-facts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../volcanoes/styles/header.css">
<link rel="stylesheet" type="text/css" href="../volcanoes/styles/main.css">
<link rel="stylesheet" type="text/css" href="../volcanoes/styles/cards.css">
<link rel="stylesheet" type="text/css" href="../volcanoes/styles/footer.css">
</head>
<body>
<header>
<img class="logo" src="../volcanoes/asset/logo.jpg" alt="logo">
<nav id="chapternav">
<ul class="nav__links">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</header>
<main>
<div class="tile_wrapper">
<div id="flex_wrapper">
<div class="copy_wrapper">
<p id="earth_zit">Earth's Zits</p>
<p class="typography_headline">Volcanoes 101</p>
<div class="copy_spacing">
<div class="block">
<p>Volcanoes form when magma - a mixture of hot gas, ash, and melted rock - erupts from a crack in the earth's surface. The melted rock, called lava, flows out and hardens. As layers of lava build up, the volcanoe gets bigger. A volcano can be active, dormant, or extinct.</p>
</div>
</div>
</div>
</div>
<figure class="volcano_bgimage"><img src="../volcanoes/asset/main-volcano.jpg" alt="picture of a volcano"></figure>
</div>
<div class="tile_wrapper inside_volcano">
<p id="inside_volcano_p">Inside a volcano</p>
<br/>
<div class="section_content row">
<div class="copy_wrapper large-4 medium-5 small-12 small-centered">
<p id="inside_volcano_para">When pressure in the magma chamber under a volcano gets too high, the magma is forced up and out of the main vent. This is called an eruption. The force of this eruption blows rock off the top of the volcano, creating a bowl-shaped hollow, called a crater. In some volcanoes, magma also erupts from smaller vents that branch out from the main vent.</p>
<div class="illustration_wrapper"><img class="volcano_illustration" src="../volcanoes/asset/volcano-illustration.png">
</div>
</div>
</div>
</div>
<div class="tile_wrapper plate_tectonics">
<p id="plate_tectonics_title">Plate tectonics</p>
<br/>
<div class="section_content_plate row">
<div class="copy_wrapper_plate large-4 medium-5 small-12 small-centered">
<div class="tectonic_wrapper"><img class="tectonic_illustration" src="../volcanoes/asset/plate-tectonic.jpg">
</div>
<p id="plate_tectonic_para">The theory of plate tectonics is a interesting story of continents drifting from place to place breaking apart, colliding, and grinding against each other. The plate tectonic theory is supported by a wide range of evidence that considers the earth's crust and upper mantle to be composed of several large, thin, relatively rigid plates that move relative to one another. The plates are all moving in different directions and at different speeds. Sometimes the plates crash together, pull apart or sideswipe each other. When this happens, it commonly results in earthquakes.</p>
</div>
</div>
</div>
<span class="body">
<div class="card">
<div class="card-image"></div>
<div class="card-text">
<span class="date">Stratovolcano</span>
<h2>Mount Fuji, Japan</h2>
<p>Stratovolcanoes are tall and cone-shaped, with steep sides. They are made up of lots of layers of ash and lava that have cooled and hardened. Their eruption can be very powerful and dangerous.</p>
</div>
<div class="card-stats">
<div class="stat">
<div class="value">3,776m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Active</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">1708</div>
<div class="type">Last eruption</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image card2"></div>
<div class="card-text card2">
<span class="date">Shield</span>
<h2>Mauna Loa, USA</h2>
<p>Sheild volcanoes have gently sloping side and are formedd from thin, runny lava. Their eruptions are less explosive and much less dangerous than other volcanoes. These gentle eruptions can continue for years.</p>
</div>
<div class="card-stats card2">
<div class="stat">
<div class="value">4207.3m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Active</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">1984</div>
<div class="type">Last eruption</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image card3"></div>
<div class="card-text card3">
<span class="date">Cinder cone</span>
<h2>Paricutin, Mexico</h2>
<p>Cinder cone volcanoes are the smallest and most common type of volcano. They are cone-shaped with steep sides. Their eruptions are usually not too violent.</p>
</div>
<div class="card-stats card3">
<div class="stat">
<div class="value">2800m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Dormant</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">1952</div>
<div class="type">Last eruption</div>
</div>
</div>
</div>
</span>
<hr width="100vw" />
<span class="body1">
<div class="card">
<div class="card-image1"></div>
<div class="card-text">
<span class="date">Caldera</span>
<h2>Ngorongoro, Tanzania</h2>
<p>These are large, circular hollows, almost like a bowl. They form when a massive eruption forces most of the magma out of the chamber under the volcano.</p>
</div>
<div class="card-stats">
<div class="stat">
<div class="value">3,776m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Active</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">1708</div>
<div class="type">Last eruption</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image1 card2"></div>
<div class="card-text card2">
<span class="date">Stratovolcano</span>
<h2>Sakurajima, Japan</h2>
<p>Sakurajima, a stratovolcano on the the island of Kyushu, is one of the most active volcanoes on Earth.Sakurajima has been in nearly constant eruption. Since it's first recorded eruption in A.D. 708.</p>
</div>
<div class="card-stats card2">
<div class="stat">
<div class="value">1,117 m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Active</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">Ongoing</div>
<div class="type">eruption</div>
</div>
</div>
</div>
<div class="card">
<div class="card-image1 card3"></div>
<div class="card-text card3">
<span class="date">Stratovolcano</span>
<h2>Sinabung, Indonesia</h2>
<p>Sinabung is one of 34 active volcanoes in Sumatra, which straddles the "Pacific Ring of Fire". Mount Sinabung has been very active in terms of having explosions of ash up to 2 times a day.</p>
</div>
<div class="card-stats card3">
<div class="stat">
<div class="value">2,460 m</div>
<div class="type">above sea level</div>
</div>
<div class="stat border">
<div class="value">Active</div>
<div class="type">status</div>
</div>
<div class="stat">
<div class="value">Ongoing</div>
<div class="type">eruption</div>
</div>
</div>
</div>
</span>
<hr width="100vw" />
</main>
<footer class="footer-distributed">
<div class="footer-left">
<h3>Ear<span>th</span></h3>
<p class="footer-links">
<a href="#">Home</a>
·
<a href="#">Blog</a>
·
<a href="#">About</a>
·
<a href="#">Faq</a>
·
<a href="#">Contact</a>
</p>
<p class="footer-company-name">Earth © 2019</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Vinobanagara, Shimoga</span> Karnataka, India</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+91 97407 70284</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the blog</span>
Have you ever wanted to know which is the tallest mountain on Earth? or which continent is the largest?. Now you can <b>find out!</b>
</p>
<div class="footer-icons">
<a href="footerfacebook.png"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</footer>
</body>
</html>