Skip to content

Instantly share code, notes, and snippets.

@tundal45
Created Feb 21, 2011
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Puzzlenode</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header id="banner">
<h1>PuzzleNode</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Puzzles</a></li>
<li><a href="#">Sign Up or Log In</a>
</ul>
</nav>
</header>
<section>
<header><h3>Recent Puzzles</h3></header>
<ul>
<li>
<h4>Liter Cola</h4>
<p>Where we try and solve the problem of extracting a litre of cola .... <a href="#">Continue Reading</a></p>
<p>Posted 2 days ago</p>
</li>
<li>
<h4>Shooting Whoops</h4>
<p>Where we try and solve the problem of shooting Walton Hoops without killing .... <a href="#">Continue Reading</a></p>
<p>Posted 1 week ago</p>
</li>
</ul>
</section>
<aside>
<header><h3>What is PuzzleNode</h3></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar fermentum velit, id faucibus libero pretium nec. Aenean est metus, mollis id vestibulum nec, pulvinar ac dolor. Mauris in libero sit amet magna imperdiet luctus. Vestibulum vulputate vestibulum risus, vitae mattis metus tempor et.</p>
</aside>
<footer>
<ul>
<li>&copy; PuzzleNode 2011</li>
<li>An <a href="http://educationreimagined.com/">Education Reimagined Project</a></li>
</ul>
</footer>
</body>
</html>
/***** Global *****/
/* Body */
body {
background: #FFFFFF;
color: #303030;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Verdana','Gill Sans',sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h1 {font-size: 1.715em} /* 22px */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-family: 'Baskerville', 'Palatino', 'Georgia',serif;
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
header {
background: #F0F0F0;
}
header nav ul {
margin-left: 0;
padding-left: 0;
list-style: none;
display: inline;
}
header nav ul li {
display: inline;
}
/* Adapted from Jordan Byron's fix to gracefully degrade HTML5 elements
https://gist.github.com/837463
*/
header #banner {
display: block;
}
/*
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment