Return to Snippet

Revision: 69200
at May 3, 2015 19:25 by talkaboom


Initial Code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic Hover Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="masterstylesheet.css" type="text/css">
</head>
<body>
<div class="masthead">
	<h1 class="header"><a href="index1.html">Co Name</a></h1>
	<nav class="navbar" role="navigation">
		<ul>
			<li><a href="index1.html">Link 8</a></li>
			<li><a href="index1.html">Link 7</a></li>
			<li><a href="index1.html">Link 6</a></li>
			<li><a href="index1.html">Home</a></li>
		</ul>
	</nav>
</div>
<div class="face">
	<div class="bodylinks">
		<a href="index1.html">Body Link 1</a>
		<a class="active" href="index1.html">Body Link 2</a> <!-- class "active" to show how active link will look -->
		<a href="index1.html">Body Link 3</a>
		<a href="index1.html">Body Link 4</a>
		<a href="index1.html">Body Link 5</a>
	</div>
	<article class="content">  <!-- Random Text Follows -->
		<header>
			<h3>
			Home Page
			</h3>
		</header>		
		<p></p>
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
		</p>
		<p>
		Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
		</p>
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
		<p>
		Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
		</p>
		<p>
		Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
		</p>
		<p>
		Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
		</p>
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
		</p>
		<p>
		Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
		</p>
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
		<p>
		Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
		</p>
		<p>
		Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
		</p>
		<p>
		Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
		</p>
		<p>
		Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
		</p>
		<footer>
		Nunc ac magna. Maecenas odio dolors.
		</footer>
	</article>
</div>
<div class="pagefooter">
	<nav class="bottomnavbar">
		<ul>
			<li><a href="index1.html">|| Home |</a></li>
			<li><a href="index1.html">| Link 1 |</a></li>
			<li><a href="index1.html">| Link 2 |</a></li>
			<li><a href="index1.html">| Link 3 |</a></li>
			<li><a href="index1.html">| Link 4 |</a></li>
			<li><a href="index1.html">| Link 5 |</a></li>
			<li><a href="index1.html">| Link 6 |</a></li>
			<li><a href="index1.html">| Link 7 |</a></li>
			<li><a href="index1.html">| Link 8 ||</a></li>
		</ul>
	</nav>
	<article class="copyright"> <!-- Random Copyright text -->
		© Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin semper, ante vitae sollicitudin posuere, metus quam iaculis nibh, vitae scelerisque nunc massa eget pede. Sed velit urna, interdum vel, ultricies vel, faucibus at, quam.
	</article>
</div>
</body>
</html>

Initial URL


Initial Description
Index1.html

Initial Title
Hover Menu HTML

Initial Tags


Initial Language
HTML