Skip to content

Instantly share code, notes, and snippets.

@tundal45

tundal45/index.html

Created February 21, 2011 18:26
Show Gist options
  • Save tundal45/837476 to your computer and use it in GitHub Desktop.
Save tundal45/837476 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Raw
style.css
/***** 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