Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kubs-03
Kubs-03 authored Jul 22, 2024
1 parent 4c6c8c2 commit 98dc37d
Show file tree
Hide file tree
Showing 5 changed files with 839 additions and 0 deletions.
Binary file added image1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 200 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,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">
<h1>The Atmosphere</h1>
<div class="hamburger" onclick="toggleOverlay()">☰</div>
</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">
<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 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">Close</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://yourwebsite.com'; // 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>
Binary file added radiobuttonon.webp
View file
Binary file not shown.
Loading

0 comments on commit 98dc37d

Please sign in to comment.