JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Astronomy</title>
<link rel="stylesheet" href="maxwell.css">
<meta charset="UTF-8">
</head>
<body>
<img src="mwslogo.gif" height="93" width="362" alt="Logo">
<div id="nav">
<ul>
<li>Astronomy</li>
<li>Chemistry</li>
<li>Electronics</li>
<li>Engineering</li>
<li>Physics</li>
</ul>
</div>
<div id="content">
<h2>Maxwelle Scientific</h2>
<h3>Astronomy<br>=========</h3>
<p>Maxwell Scientific provides a wide range of astronomical products - perfect for classroom demonstrations and projects. Choose from the finest equipment from Newton, DC Optics, and StarVision.</p>
<h4>Run the Messier Marathon<br>========================</h4>
<p>It's time for the annual Messier Marathon. Instead of lacing up their Nikes, amateur astronomers will be hauling telescopes, star charts, and a hefty pot of coffee in an all-night vigil hunting the Messier objects.</p>
<p>Messier objects are stellar objects, classified by astronomer Charles Messier in the 18th century, ranging from distant galaxies to star clusters to stellar nebula. March is the only month in the year in which all 110 Messier objects are in the sky. Unfortunately, if you want to see all of them, you
have to start looking right after sunset and continue until just before sunrise - hence the term,
"marathon."</p>
<p>Ironically, Charles Messier wasn't all that interested in his objects. He made the list in order to avoid seeing them. Messier was more interested in discovering new comets and these beautiful stellar objects were often mistaken for comets before Messier made his list.</p>
<h5>Featured Astronomical Products<br>==============================</h5>
<p>Refractor Kit: March Special! Learn about the science of optics by building your own 18" long, 3X refractor telescope. Price $10.95. Stock Number: RK01-085</p>
</div>
<div class="footer">
Maxwell Scientific<br>
205 East Nordheim Drive, Marion, IL 62959<br>
Phone: (800)...
CSS
@charset "UTF-8";
/* CSS Document */
body {
background-color: #555555;
color: #ffffff;
}
#nav {
list-style-type: none;
position: fixed;
background-color: #333333;
left: 0;
width: 200px;
height: 250px;
}
#nav li {
list-style-type: none;
font-size: 1.3em;
line-height: 200%
}
#content {
width: 80%;
float: right;
margin: auto;
text .5em
}
.footer {
position: fixed;
bottom:0;
}