58 lines
5.7 KiB
HTML
58 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Amazing Weather Site</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
|
||
|
|
<script src="weather.js" defer></script>
|
||
|
|
<link rel="stylesheet" href="weather.css" />
|
||
|
|
<link rel="icon" href="cloud.png" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header id="header">
|
||
|
|
<h1>Amazing Weather Site</h1>
|
||
|
|
<h2>Always displays accurate information about the weather at Hof University</h2>
|
||
|
|
<nav>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#">The Weather</a></li>
|
||
|
|
<li><a href="https://www.hof-university.de" target="_blank">Hof-University</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<section>
|
||
|
|
<h2>Take a look at the weather</h2>
|
||
|
|
<div id="weather">
|
||
|
|
<div id="weather-datetime">Loading...</div>
|
||
|
|
<div id="weather-temphum">Loading...</div>
|
||
|
|
<div id="weather-wind">Loading...</div>
|
||
|
|
<div id="weather-other">Loading...</div>
|
||
|
|
<div id="weather-soil">Loading...</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<h2>More content about the weather</h2>
|
||
|
|
<article id="article-one">
|
||
|
|
<h3>What is Weather?</h3>
|
||
|
|
<p>Weather is the state of the atmosphere, describing for example the degree to which it is hot or cold, wet or dry, calm or stormy, clear or cloudy. On Earth, most weather phenomena occur in the lowest layer of the planet's atmosphere, the troposphere, just below the stratosphere. Weather refers to day-to-day temperature, precipitation, and other atmospheric conditions, whereas climate is the term for the averaging of atmospheric conditions over longer periods of time. When used without qualification, "weather" is generally understood to mean the weather of Earth.</p>
|
||
|
|
<p>Weather is driven by air pressure, temperature, and moisture differences between one place and another. These differences can occur due to the Sun's angle at any particular spot, which varies with latitude. The strong temperature contrast between polar and tropical air gives rise to the largest scale atmospheric circulations: the Hadley cell, the Ferrel cell, the polar cell, and the jet stream. Weather systems in the middle latitudes, such as extratropical cyclones, are caused by instabilities of the jet streamflow. Because Earth's axis is tilted relative to its orbital plane (called the ecliptic), sunlight is incident at different angles at different times of the year. On Earth's surface, temperatures usually range ±40 °C (-40 °F to 104 °F) annually. Over thousands of years, changes in Earth's orbit can affect the amount and distribution of solar energy received by Earth, thus influencing long-term climate and global climate change.</p>
|
||
|
|
<p>Surface temperature differences in turn cause pressure differences. Higher altitudes are cooler than lower altitudes, as most atmospheric heating is due to contact with the Earth's surface while radiative losses to space are mostly constant. Weather forecasting is the application of science and technology to predict the state of the atmosphere for a future time and a given location. Earth's weather system is a chaotic system; as a result, small changes to one part of the system can grow to have large effects on the system as a whole. Human attempts to control the weather have occurred throughout history, and there is evidence that human activities such as agriculture and industry have modified weather patterns</p>
|
||
|
|
<p>Studying how the weather works on other planets has been helpful in understanding how weather works on Earth. A famous landmark in the Solar System, Jupiter's Great Red Spot, is an anticyclonic storm known to have existed for at least 300 years. However, the weather is not limited to planetary bodies. A star's corona is constantly being lost to space, creating what is essentially a very thin atmosphere throughout the Solar System. The movement of mass ejected from the Sun is known as the solar wind. </p>
|
||
|
|
</article>
|
||
|
|
<article id="a-secret-hidden-article" style="display:none;">
|
||
|
|
<h3>A very not hidden article about Lorem Ipsum</h3>
|
||
|
|
<h4>Foreword</h4>
|
||
|
|
Oh wow, you found the secret hidden article that was not hidden at all
|
||
|
|
<h4>What is Lorem Ipsum?</h4>
|
||
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||
|
|
<h4>Why do we use it?</h4>
|
||
|
|
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
<footer>
|
||
|
|
This website was made by me | Useful buttons:
|
||
|
|
<button id="toggle-header">Toggle header</button>
|
||
|
|
<button id="hide-article">Hide article</button>
|
||
|
|
<button id="show-hidden-article">Show a secret hidden article</button>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|