Season – HTML Code

Click Here to view the Page this code generates.

 

index.html

<html>
<head>
	<title>Season - Autumn</title>
	<link rel="stylesheet" type="text/css" href="style.css">
 
	<h1>Seasons</h1>
	<h2 class="tab">Autumn</h2>
 
</head>
 
<body>
	<img class="center-img" src="images/autumn.png" alt="Autumn">
 
	<p class="tab">Autumn, also known as fall in American and Canadian English, is one of the four temperate seasons. Autumn marks the transition from summer to winter, in September (Northern Hemisphere) or March (Southern Hemisphere), when the duration of daylight becomes noticeably shorter and the temperature cools down considerably. One of its main features is the shedding of leaves from deciduous trees.</p>
	<p class="tab">Some cultures regard the autumnal equinox as "mid-autumn", while others with a longer temperature lag treat it as the start of autumn. Meteorologists (and most of the temperate countries in the southern hemisphere) use a definition based on Gregorian calendar months, with autumn being September, October, and November in the northern hemisphere, and March, April, and May in the southern hemisphere.</p>
	<p class="tab">Read the entire article on <a href="https://en.wikipedia.org/wiki/Autumn" target="_blank" rel="noopener noreferrer">Wikipedia</a>
	<hr>
 
	<p class="tab">Other Seasons</p>
	<ul class="tab">
		<li>Winter</li>
		<li>Spring</li>
		<li>Summer</li>
	</ul>
</body>
 
<footer>
	<hr>
	<p class="footer"><a href="https://it.hessercan.com/it/3/cp134/season-html-code/">Click Here</a> to view the source code for this project</p>
	<img class="footer-logo" src="https://it.hessercan.com/images/logo.png" alt="HesserCAN"
</footer>
</html>

style.css

body {background-color:#DAA520;}
 
h1 {font-size: 60px;}
h2 {font-size: 40px;}
p {font-size: 20px;}
li {font-size: 20px;}
hr {border-color: black;}
 
.tab {margin-left:25px;}
 
.center-img {
	display: block;
	margin-left: auto;
 	margin-right: auto;
	width: 80%;
 	height: auto;
}
 
.footer {
	text-align: center;
}
 
.footer-logo {
	display: block;
	margin-left: auto;
 	margin-right: auto;
	width: 200px;
 	height: auto;
}