HTML Dog
Skip to navigation

Charles Darwin

A styled up version of the basic principles of previous examples.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Charles Darwin</title>
	<style>
		body {
			font: 80% arial, helvetica, sans-serif;
			background: #ccc url(/examples/images/lizards2.gif);
			margin: 0;
		}
		
		.accessaid, h1 {
			position: absolute;
			height: 0;
			overflow: hidden;
		}
		
		#header {
			background: #036 url(/examples/images/charlesdarwin.gif);
			height: 60px;
		}
		
		#navigation {
			position: absolute;
			top: 60px;
			margin-top: 0.5em;
			left: 0;
			width: 134px;
		}
		
		#navigation ul {
			margin: 0 0 1em 0;
			padding: 0;
			list-style: none;
		}
		
		#navigation ul a {
			color: white;
			text-decoration: none;
			display: block;
			background: #17a;
			border-left: 3px solid #28b;
			padding: 0 0.5em;
			margin: 0 1em 3px 1em;
		}
		
		#navigation a:visited {
			color: #ccc;
		}
		
		#navigation a:hover {
			background: #39c;
			border-color: white;
		}
		
		#content {
			border-left: 134px solid #069;
			background: white url(/examples/images/lizards.gif) repeat-y;
			padding: 1px 20px 1em 40px;
		}
		h2 {
			font-size: 1.5em;
			color: #036;
		}
		
		h3 {
			font-size: 1.25em;
			color: #036;
		}
		
		#content img {
			width: 100px;
			height: 150px;
			padding: 1px;
			border: 1px solid #333;
			float: right;
			margin: 0 0 1em 1em;
		}
		
		#container {
			position: relative;
			width: 580px;
			border: solid #036;
			border-width: 0 3px;
			margin: auto;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>Charles Darwin</h1>
		</div>
		<div id="navigation">
			<p><a href="#content" class="accessaid">Skip navigation</a></p>
			<ul>
				<li><a href="">Biology</a></li>
				<li><a href="">Evolution</a></li>
				<li><a href="">Natural Selection</a></li>
				<li><a href="">Genetics</a></li>
			</ul>
			<ul>
				<li><a href="">Erasmus Darwin</a></li>
				<li><a href="">Lamarck</a></li>
				<li><a href="">Charles Darwin</a></li>
				<li><a href="">Wallace</a></li>
				<li><a href="">Dawkins</a></li>
			</ul>
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Contact Us</a></li>
				<li><a href="">Site map</a></li>
			</ul>
		</div>

		<div id="content">
			<h2>On the Origin of The Origin</h2>
			<p><img src="/examples/images/darwin.jpg" alt="Darwin">Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
			<p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
			<p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>

			<h2>The Origin</h2>
			<p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
			<p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
			<p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
			<p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>

			<h2>After The Origin</h2>
			<p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
		</div>
	</div>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original