diff --git a/image1.jpg b/image1.jpg new file mode 100644 index 0000000..f9d6e4e Binary files /dev/null and b/image1.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b16c593 --- /dev/null +++ b/index.html @@ -0,0 +1,200 @@ + + + + + + + Atmosphere + + + + + + + + + + + + +
+ +
+

The Atmosphere

+
☰
+
+ + +
+

Ever thought about what would happen if the atmosphere disappeared for a day?

+ +
Learn here to find out the surprising effects and importance of our atmosphere!
+ +

Atmosphere 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:

+ Here is a detailed breakdown of the Earth's atmosphere: + + +

Composition of the Atmosphere + The Earth's atmosphere is composed of several gases, with the primary components being: + + Nitrogen (N2): About 78% + Oxygen (O2): About 21% + Argon (Ar): About 0.93% + Carbon Dioxide (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

+ +

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.

+ + +

Structurally, the atmosphere is divided into distinct layers, each characterized by unique properties and functions.

+ +
+
+ image + + + + + +
+
+ + + + + + + + + + + + + + + + + + + +

Note:
Planetary Atmospheres: Beyond Earth, scientists also study the atmospheres of other planets and celestial bodies. For example:
+ Mars: Mars has a thin atmosphere primarily composed of carbon dioxide. Researchers study its behavior, seasonal variations, and potential for supporting life.
+ Venus Venus has a thick, acidic atmosphere with extreme temperatures. Scientists investigate its greenhouse effect and atmospheric chemistry.
+ Titan (Saturn’s Moon): Titan’s atmosphere contains nitrogen and methane. Researchers explore its unique properties and potential for prebiotic chemistry.

+ +

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.

+ +

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.

+ + +
+
+ +
+
+
+ +
+

Watch the video for better understanding

+ +
+ +
+

QUIZZ

+

Question goes here

+
+ +
+
+ +
+

Further Reading

+ +
+ + +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + diff --git a/radiobuttonon.webp b/radiobuttonon.webp new file mode 100644 index 0000000..c7dedff Binary files /dev/null and b/radiobuttonon.webp differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..10ad86a --- /dev/null +++ b/script.js @@ -0,0 +1,265 @@ +function togglePopup(popupId) { + var overlay = document.getElementById('overlay'); + var overlayContent = document.getElementById('overlay-content'); + + if (popupId) { + var popup = document.getElementById(popupId); + overlayContent.innerHTML = popup.innerHTML; + overlay.style.display = 'flex'; + } else { + overlay.style.display = 'none'; + } +} + +// Close overlay with escape key +document.addEventListener('keydown', function(event) { + if (event.key === "Escape") { + document.getElementById('overlay').style.display = 'none'; + } +}); + +// Show the button when the user scrolls down 20px from the top of the document +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + var topBtn = document.getElementById("topBtn"); + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + topBtn.style.display = "block"; + } else { + topBtn.style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} + +const questions = [ + { + question: "Which layer of the Earth's atmosphere is closest to the Earth's surface?", + answers: [ + { text: "Stratosphere", correct: false }, + { text: "Mesosphere", correct: false }, + { text: "Troposphere", correct: true }, + { text: "Thermosphere", correct: false }, + ] + }, + { + question: "Which atmospheric layer is known for containing the ozone layer, which protects us from harmful UV radiation?", + answers: [ + { text: "Troposphere", correct: false }, + { text: "Stratosphere", correct: true }, + { text: "Mesosphere", correct: false }, + { text: "Exosphere", correct: false }, + ] + }, + { + question: "What is the primary gas that makes up the Earth's atmosphere?", + answers: [ + { text: "Oxygen", correct: false }, + { text: "Carbon Dioxide", correct: false }, + { text: "Argon", correct: false }, + { text: "Nitrogen", correct: true }, + ] + }, + { + question: "What phenomenon occurs in the thermosphere that can be seen as auroras?", + answers: [ + { text: "Greenhouse Effect", correct: false }, + { text: "Solar Flares", correct: false }, + { text: "Northern and Southern Lights", correct: true }, + { text: "Meteor Showers", correct: false }, + ] + }, + { + question: "What is the layer of the atmosphere where weather phenomena occur?", + answers: [ + { text: "Stratosphere", correct: false }, + { text: "Exosphere", correct: false }, + { text: "Mesosphere", correct: false }, + { text: "Troposphere", correct: true }, + ] + }, + { + question: "What is the main source of energy that drives the atmospheric processes?", + answers: [ + { text: "Wind Energy", correct: false }, + { text: "Solar Energy", correct: true }, + { text: "Tidal Energy", correct: false }, + { text: "Geothermal Energy", correct: false }, + ] + }, + { + question: "What phenomenon is observed when solar wind particles interact with the Earth's magnetic field?", + answers: [ + { text: "Meteor Showers", correct: false }, + { text: "Greenhouse Effect", correct: false }, + { text: "Solar Flares", correct: false }, + { text: " Auroras", correct: true }, + ] + }, + { + question: "Which atmospheric layer is characterized by a temperature increase with altitude and contains the ionosphere?", + answers: [ + { text: "Thermosphere", correct: true }, + { text: " Stratosphere", correct: false }, + { text: "Mesosphere", correct: false }, + { text: "Troposphere", correct: false }, + ] + }, + { + question: "What is the name of the boundary between the stratosphere and the mesosphere?", + answers: [ + { text: "Tropopause", correct: false }, + { text: "Stratopause", correct: true }, + { text: "Mesopause", correct: false }, + { text: "Thermopause", correct: false }, + ] + }, + { + question: "Which layer of the atmosphere extends from about 50 km to 85 km above the Earth's surface?", + answers: [ + { text: "Troposphere", correct: false }, + { text: "Stratosphere", correct: false }, + { text: "Mesosphere", correct: true }, + { text: "Exosphere", correct: false }, + ] + } +]; + + +const questionElement = document.getElementById("question"); +const answerButtons = document.getElementById("answer-buttons"); +const nextButton = document.getElementById("next-btn"); + +let currentQuestionIndex = 0; +let score = 0; + +function startQuiz() { + currentQuestionIndex = 0; + score = 0; + nextButton.innerHTML = "Next"; + showQuestion(); +} + +function showQuestion() { + resetState(); + let currentQuestion = questions[currentQuestionIndex]; + let questionNO = currentQuestionIndex + 1; + questionElement.innerHTML = questionNO + ". " + currentQuestion.question; + + currentQuestion.answers.forEach(answer => { + const button = document.createElement("button"); + button.innerHTML = answer.text; + button.classList.add("btn"); + answerButtons.appendChild(button); + if (answer.correct) { + button.dataset.correct = answer.correct; + } + button.addEventListener("click", selectAnswer); + }); +} + +function resetState() { + nextButton.style.display = "none"; + while (answerButtons.firstChild) { + answerButtons.removeChild(answerButtons.firstChild); + } +} + +function selectAnswer(e) { + const selectedBtn = e.target; + const isCorrect = selectedBtn.dataset.correct === "true"; + if (isCorrect) { + selectedBtn.classList.add("correct"); + score++; // Increment score for correct answers + } else { + selectedBtn.classList.add("incorrect"); + } + Array.from(answerButtons.children).forEach(button => { + if (button.dataset.correct === "true") { + button.classList.add("correct"); + } + button.disabled = true; + }); + nextButton.style.display = "block"; +} + +function showScore() { + resetState(); + let message = ''; + let totalQuestions = questions.length; + let scorePercentage = (score / totalQuestions) * 100; + + if (score === totalQuestions) { + message = 'Congratulations! You got a perfect score of 10/10!'; + } else if (score >= 8) { + message = `You are almost there! Your score is ${score}/${totalQuestions}.`; + } else { + message = `Please go through the concepts again for better understanding. Your score is ${score}/${totalQuestions}.`; + } + + questionElement.innerHTML = message; + nextButton.innerHTML = "Play Again"; + nextButton.style.display = "block"; +} + +function handleNextButton() { + currentQuestionIndex++; + if (currentQuestionIndex < questions.length) { + showQuestion(); + } else { + showScore(); + } +} + +nextButton.addEventListener("click", () => { + if (currentQuestionIndex < questions.length) { + handleNextButton(); + } else { + startQuiz(); + } +}); + +startQuiz(); + +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + var topBtn = document.getElementById("topBtn"); + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + topBtn.style.display = "block"; + } else { + topBtn.style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} + +function toggleOverlay() { + var overlay = document.getElementById("navoverlay"); + if (overlay.style.width === "100%") { + overlay.style.width = "0%"; + } else { + overlay.style.width = "100%"; + } +} + +// Close the overlay if clicked outside of it +document.addEventListener('click', function(event) { + var overlay = document.getElementById("overlay"); + var hamburger = document.getElementById("hamburger"); + + if (overlay.style.width === "100%") { + // Check if the click happened outside the overlay and hamburger menu + if (!overlay.contains(event.target) && event.target !== hamburger) { + overlay.style.width = "0%"; + } + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a66e3c2 --- /dev/null +++ b/style.css @@ -0,0 +1,374 @@ +body h1{ + text-align: center; + font-size: 40px; + font-family: "Allerta Stencil", Sans-serif; + /* background-color:black; */ + color: white; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 0; +} + +.nav{ + grid-column: 1/7; + background-color: #000000; + position:fixed; + width: 100%; + top:0; + left: 0; + justify-content:space-between; + font-size: 16px; + z-index: 1000; +} + +.hamburger{ + color: white; + font-size: 30px; + float: right; + position: absolute; + top:0; + padding:10px; + margin:10px; +} + +.navoverlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.9); + overflow-x: hidden; + transition: 0.5s; +} + +.nav-overlay-content { + position: absolute; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} + +.nav-overlay-content a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: #818181; + display: block; + transition: 0.3s; +} + +.nav-overlay-content a:hover, .nav-overlay-content a:focus { + color: #f1f1f1; +} + + +/* Media query for mobile screens */ +@media screen and (max-height: 450px) { + .nav-overlay-content a { + font-size: 20px; + } + .navclosebutton { + font-size: 40px; + top: 15px; + right: 35px; + } +} +.container { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 20px; + padding: 20px; + height: auto; +} + +.content { + + grid-column: 2 / 6; + font-size: 18px; + line-height: 1.6; + padding-top: 80px; +} + +.content h3, .content h5 { + text-align: center; + padding: 10px; + margin: 10px 0; + +} + +.flex { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.image img{ + border: 5px black solid; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.image{ + position: relative; + padding: 5px; + margin: 20px auto; + display: block; + background-color: rgba(0, 0, 0, 0.993); + /* height:fit-content; */ + /* margin-top: 20px; */ +} + + +.hide{ + display: none; +} +.button0:hover + .hide{ + display: block; + color:#ff9393 ; +} + +.button0, .button1, .button2, .button3, .button4 { + position: absolute; + /* background-image: url("radiobuttonon.webp"); */ + background-size: cover; + height: 20px; + width: 20px; + border-radius: 10px; +} + +.button0 { top: 215px; right: 41%; } +.button1 { top: 308px; right: 41%; } +.button2 { top: 122px; right: 41%; } +.button3 { top: 378px; right: 41%; } +.button4 { top: 450px; right: 41%; } + + +.popup{ + display: none; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.648); + color: #fff; + display: none; + align-items: center; + justify-content: center; + z-index: 1; +} + +.maincontent { + position: relative; + background-color: rgb(255, 255, 255); + padding: 20px; + color: #000; + border-radius: 10px; + width: 80%; + max-width: 800px; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; + font-weight: bold; +} + +.close-btn:hover{ + background-color: red; + transition: 0.3s ease; +} + +.video{ + display: flex; + flex-wrap: wrap; + justify-content: center; + padding:10px; + margin:30px 0; +} + +.quiz { + grid-column: 1 / 7; + background-color: rgba(238, 239, 209, 0.53); + text-align: center; + padding: 20px; + margin:30px 0; +} + + +.quiz .btn-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.quiz .next-btn, .quiz .result { + margin-top: 20px; +} + +.quiz h2 { + font-size: 25px; + color: #000000; + font-weight: 600; + /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */ + +} + +.btn { + background: #fff; + color: #222; + font-weight: 500; + width: 50%; + border: 1px solid#222; + padding: 10px; + margin: 10px 0; + text-align: left; + border-radius: 15px; + font-size: large; + cursor: pointer; + text-align: center; +} + +.btn:hover { + background: #222; + color: #fff; + transition: all 0.3s; +} + +#next-btn { + background: #000000; + color: #fff; + font-weight: 500; + width: 150px; + border: 0; + padding: 10px; + margin: 20px auto 0; + border-radius: 4px; + cursor: pointer; + display: none; + border: 1px black solid; +} + +#next-btn:hover{ + color: rgb(255, 255, 255); + background-color: #333; + transition: 0.2s all; +} +.correct { + background: #9aeabc; +} + +.incorrect { + background: #ff9393; +} + +.additional-resources { + margin: 20px 0 ; +} + +.additional-resources h3 { + font-size: 18px; +} + +.additional-resources ul { + list-style-type: none; + padding: 0; +} + +.additional-resources li { + margin: 5px 0; +} + +.additional-resources a { + color: blue; + text-decoration: underline; +} + +.social-share { + display: flex; + gap: 10px; /* Space between links */ + justify-content: center; /* Center the links horizontally */ + margin-top: 20px; /* Space above the social share section */ +} + +.social-share a { + text-decoration: none; + font-size: 20px; + padding: 10px 15px; + border-radius: 5px; + /* border: 1px solid #0077b5; */ + transition: background-color 0.3s, color 0.3s; +} + +.social-share a:hover{ + font-size: large; +} + +/* Specific styling for different platforms */ +.social-share a.twitter { + color: #1DA1F2; + border-color: #1DA1F2; +} + +.social-share a.linkedin { + color: #0077b5; + border-color: #0077b5; +} + +.social-share a.github { + color: #333; + border-color: #333; +} + +.social-share a.facebook { + color: #4267B2; + border-color: #4267B2; +} + +.social-share h3 { + justify-content: center; + font-size: 18px; + border-right: #000 1px solid; + margin:0 20px; +} + +#topBtn { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: #333; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 10px; +} + +#topBtn:hover { + background-color: #555; +} +