-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (153 loc) · 14.7 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
<!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>Atmosphere</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="description" content="Learn about the importance of the Earth's atmosphere and what would happen if it disappeared for a day.">
<meta name="keywords" content="Atmosphere, Earth, Environment, Quiz, Learning">
</head>
<body>
<div class="container">
<div class="nav">
<div class="hamburger" onclick="toggleOverlay()">☰</div>
<h1>The Atmosphere</h1>
</div>
<div id="navoverlay" class="navoverlay">
<div class="nav-overlay-content">
<a href="#home"onclick="toggleOverlay()">Home</a>
<a href="#contact"onclick="toggleOverlay()">Contact</a>
<a href="#about"onclick="toggleOverlay()">About</a>
</div>
</div>
<div class="content" id=" home">
<h3>Ever thought about what would happen if the atmosphere disappeared for a day?</h3>
<!-- <h3>Ever thought about what would happen if the atmosphere disappeared for a day?</h3> -->
<h5>Learn here to find out the surprising effects and importance of our atmosphere!</h5>
<p><em><strong>Atmosphere</strong></em> is a layer of gases surrounding a planet or other celestial body, held in place by gravity.
On Earth, the atmosphere is vital for life as it provides the air we breathe, protects us from harmful solar radiation, and helps regulate the planet's temperature. Here is a detailed breakdown of the Earth's atmosphere:</p>
Here is a detailed breakdown of the Earth's atmosphere:
<p>Composition of the Atmosphere
The Earth's atmosphere is composed of several gases, with the primary components being:
<strong>Nitrogen</strong> (N2): About 78%
<strong>Oxygen</strong> (O2): About 21%
<strong>Argon</strong> (Ar): About 0.93%
<strong>Carbon Dioxide</strong> (CO2): About 0.04%
Trace gases: Including neon, helium, methane, krypton, hydrogen, and xenon
Water vapor: Varies, but can be up to 4% in tropical regions</p>
<p>The presence of water vapor varies widely, contributing to weather patterns and climatic conditions.
Beyond its chemical composition, the atmosphere serves as a protective shield, safeguarding life from the sun's harmful ultraviolet radiation through the ozone layer and moderating the planet's temperature by trapping heat via the greenhouse effect.</p>
<p>Structurally, the atmosphere is divided into distinct layers, each characterized by unique properties and functions.</p>
<div class="flex">
<div class="image">
<img src="image1.jpg" alt="image">
<div class="buttons">
<button class="button0" onclick="togglePopup('popup1')"></button>
<button class="button1" onclick="togglePopup('pop')"></button>
<button class="button2" onclick="togglePopup('pop2')"></button>
<button class="button3" onclick="togglePopup('pop3')"></button>
<button class="button4" onclick="togglePopup('pop4')"></button>
</div>
</div>
</div>
<div class="popup" id="popup1">This is <strong>Thermosphere</strong><br><br><p>The thermosphere is the layer of the Earth's atmosphere located above the mesosphere and below the exosphere.
<li> It extends from about 85 kilometers (53 miles) to 600 kilometers (373 miles) above the Earth's surface.</li>
<li>Temperature in the thermosphere increase with altitude due to the absorption of solar radiation.</li>
<li> The thermosphere is where the International Space Station (ISS) and many other satellites orbit the Earth.</li>
<li> It plays a significant role in transmitting radio signals and hosting the auroras (Northern and Southern Lights) at its higher altitudes.</li></p></div>
<div class="popup" id="pop4">This is <strong>Toposphere</strong><br><br><p>The troposphere is the lowest layer of the Earth's atmosphere, extending from the Earth's surface to about 8-15 kilometers (5-9 miles) above sea level.
<li> It is where weather events, such as clouds, rain, and storms, occur.</li>
<li> Temperature decreases with altitude in the troposphere, making it the coldest layer of the atmosphere at higher altitudes.</li>
<li> The majority of the Earth's atmospheric mass and almost all of its water vapor are found in the troposphere.</li>
<li> It contains the air we breathe and supports life on Earth.</li></p></div>
<div class="popup" id="pop2">This is <strong>Exosphere</strong><br><br><p>The exosphere is the outermost layer of the Earth's atmosphere, extending from the top of the thermosphere to space.
<li> It is composed of extremely low-density gases, such as hydrogen and helium, and extends thousands of kilometers into space.</li>
<li> The exosphere gradually transitions into the vacuum of outer space and contains very few molecules.</li>
<li> Satellites and space stations orbit within the exosphere, experiencing minimal atmospheric drag.</li>
<li> It serves as the boundary between the Earth's atmosphere and outer space.</li></p></div>
<div class="popup" id="pop">This is <strong>Mesosphere</strong><br><br><p>The mesosphere is the layer of the Earth's atmosphere located above the stratosphere and below the thermosphere.
<li> It extends from about 50 kilometers (31 miles) to 85 kilometers (53 miles) above the Earth's surface.</li>
<li> Temperatures in the mesosphere decrease with altitude, reaching their lowest point near the mesopause.</li>
<li> The mesosphere is where most meteors burn up upon entry into the Earth's atmosphere, creating shooting stars.</li>
<li> It plays a crucial role in protecting the Earth from incoming meteoroids and space debris.</li></p></div>
<div class="popup" id="pop3"> This is <strong> Stratosphere</strong><br><br><p>The stratosphere is the layer of the Earth's atmosphere located above the troposphere and below the mesosphere.
<li> It extends from about 15 kilometers (9 miles) to 50 kilometers (31 miles) above the Earth's surface.</li>
<li> Temperatures in the stratosphere increase with altitude due to the presence of the ozone layer, which absorbs and scatters ultraviolet (UV) radiation from the Sun.</li>
<li> Commercial jet aircraft fly within the lower stratosphere to take advantage of its stability and reduced turbulence.</li>
<li> The stratosphere plays a crucial role in protecting life on Earth by absorbing harmful UV radiation and regulating the climate.</li></p></div>
<p> <u><strong><h6>Note:</h6></strong></u> Planetary Atmospheres: Beyond Earth, scientists also study the atmospheres of other planets and celestial bodies. For example:<br>
<strong>Mars</strong>: Mars has a thin atmosphere primarily composed of carbon dioxide. Researchers study its behavior, seasonal variations, and potential for supporting life.<br>
<strong>Venus</strong> Venus has a thick, acidic atmosphere with extreme temperatures. Scientists investigate its greenhouse effect and atmospheric chemistry.<br>
<strong>Titan (Saturn’s Moon)</strong>: Titan’s atmosphere contains nitrogen and methane. Researchers explore its unique properties and potential for prebiotic chemistry.</p>
<p>The atmosphere plays a crucial role in maintaining Earth's climate and weather systems. It acts as a medium for the water cycle, driving precipitation and evaporation, and it distributes heat around the planet, balancing temperature extremes.
Atmospheric pressure, which decreases with altitude, affects weather patterns and is a key factor in the movement of air masses. The atmosphere also supports respiration for living organisms and provides carbon dioxide for photosynthesis, which is essential for plant life and the production of oxygen.
Additionally, the atmospheric composition and its dynamics influence various ecological and geological processes, making it integral to the planet's overall functioning.</p>
<p>Human activities have increasingly impacted the atmosphere, leading to significant environmental challenges. The burning of fossil fuels has elevated levels of carbon dioxide, enhancing the greenhouse effect and contributing to global warming.
Air pollution from industrial emissions, vehicle exhaust, and other sources introduces harmful substances into the atmosphere, affecting air quality and health. Moreover, the release of chlorofluorocarbons and other chemicals has led to the depletion of the ozone layer, increasing the risk of ultraviolet radiation exposure.
These changes underscore the need for sustainable practices and policies to protect and preserve the atmosphere for future generations.</p>
<div class="overlay" id="overlay">
<div class="maincontent" id="maincontent">
<button onclick="togglePopup()" class="close-btn">X</button>
<div id="overlay-content"></div>
</div>
</div>
<div class="video">
<h3> Watch the video for better understanding </h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/LPHF323XlWw?si=Fg4JdDtX9wulYSqv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="quiz">
<h2> QUIZZ</h2>
<h2 id="question">Question goes here</h2>
<div id="answer-buttons" class="btn-container"></div>
<button id="next-btn" class="next-btn">Next</button>
<div id="result" class="result"></div>
</div>
<div class="additional-resources">
<h3>Further Reading</h3>
<ul>
<li><a href="https://kubs-03.github.io/Prasunet_WD_03/" target="_blank">Play TIC TOC TOE Game</a></li>
<li><a href="https://kubs-03.github.io/India_Info/" target="_blank">Know about rich diversified culture of INDIA</a></li>
<li><a href="https://kubs-03.github.io/Prasunet_WD_02/" target="_blank">Stopwatch nixie tube Application</a></li>
<li><a href="https://www.starrystories.com/satellite-band-combinations/" target="_blank">Satellite Band combinations</a></li>
<li><a href="https://www.starrystories.com/fingerprints-analysis-identifying-your-unique-signature/" target="_blank">Fingerprints-analysis identifying your unique signature</a></li>
<li><a href="https://www.starrystories.com/magic-birthday-candles/" target=" _blank">How do magic candles work?</a></li>
</ul>
</div>
<div id="disqus_thread"></div>
<!-- <div class="social-share"> -->
<!-- <h3> Share on</h3> -->
<!-- <a href="https://twitter.com/intent/tweet?text=Check out this page about the Earth's atmosphere!&url=https://yourwebsite.com" target="_blank" class="Twitter"><i class="fa fa-twitter"></i></a> -->
<!-- LinkedIn -->
<!-- <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://yourwebsite.com&title=Check out this page about the Earth's atmosphere!&summary=&source=" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a> -->
<!-- GitHub -->
<!-- <a href="https://github.com/username/repository" target="_blank" class="github"><i class="fa fa-github"></i></a> -->
<!-- Facebook -->
<!-- <a href="https://www.facebook.com/sharer/sharer.php?u=https://yourwebsite.com" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a></a> -->
<!-- <a href="https://pinterest.com" target="_blank" title="Pinterest"><i -->
<!-- class="fa fa-pinterest"></i></a> -->
</div>
</div>
</div>
<script>
var disqus_config = function () {
this.page.url = 'https://kubs-03.github.io/Atmos/'; // Replace with your page's canonical URL variable
this.page.identifier = 'unique_identifier'; // Replace with your page's unique identifier variable
this.language = 'en'; // Add this line to set the language to English
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://https-kubs-03-github-io-atmos.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})()
</script>
<script id="dsq-count-scr" src="//https-kubs-03-github-io-atmos.disqus.com/count.js" async></script>
<script src="script.js"></script>
<button onclick="topFunction()" id="topBtn" title="Go to top"><i class="fa fa-arrow-up"></i></button>
</body>
</html>