seantimm/content.html

## content.html
<!DOCTYPE html>
<html>
<head>
  <title>Semantics</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <article>
    <header>
      <h1>Semantics is meaning!</h1>
      <p><q>We must think things not words, or at least we must constantly
        translate our words into the facts for which they stand, if we are to
        keep to the real and the true.</q><i>Oliver Wendell Holmes Jr.</i>
      </p>
    </header>
    <nav>
      <a href="#">See more on this subject!</a>
      <a href="#">Do something else!</a>
    </nav>
    <section>
      <section>
        <h4>How to Get Rich By Being Semantically Appropriate</h4>
        <ol>
          <li>Find the right tag.</li>
          <li>Use it.</li>
          <li>...</li>
          <li>Profit!</li>
        </ol>
      </section>
    </section>
    <footer>by Sean Timm</footer>
  </article>

  <!-- Code below is to toggle source and load scripts -->
  <button id="source">Toggle Source</button>
  <script type="text/javascript"
          src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="script.js" type="text/javascript"></script>
  <script src="https://gist.github.com/2141600.js" type="text/javascript"></script>
</body>
</html>

## script.js
$(function() {
  // Code to support toggling scripts
  $("#source").on("click", function(event) {
    $(".gist").toggle();
  });
});

## style.css
section:before {
  counter-increment: sectionCount;
  content: "Section: " counter(sectionCount);
  font-weight: bold;
  border-bottom: 2px solid red;
  width: 100%;
}

article:before {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  content: "Article";
  font-family: sans-serif;
}

article:after {
  content: "End Article"
}

article {
  border: 0.2em solid red;
}

header:before {
  content: "Header";
  position: absolute;
  margin-top: 1.2em;
  rotation: 50deg !important;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  font-size: 3em;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #5f9ea0;
  opacity: 0.5;
}

nav {
  background-color: #ffa07a;
  padding-bottom: 1em;
}

nav > a {
  display: block;
}

nav:after {
  content: "nav items";
  float: right;
  font-family: sans-serif;
}

section:after {
  content: "End Section";
  border-top: 2px solid red;
}

section {
  background-color: #faebd7;
  padding: 1em;
}

section > section {
  background-color: #5f9ea0;
}

footer:before {
  content: "Footer: " open-quote
}

footer:after {
  content: close-quote;
}

ol {
  padding-left: 4em;
}

/* Styles to support toggling the source view */
.gist {
  font-size: 0.5em;
  display: none;
}

div.gist .gist-file {
  position: relative;
  margin: 3em 0;
}

.gist-meta {
  position: absolute;
  top: -2.5em;
  left: -30000px;
}

.gist-meta a {
  display: none;
}

.gist-meta a:nth-child(2) {
  position: relative;
  padding-left: 30000px;
  display: inline;
}

#source {
  float: right;
}

body {
  font-size: 4em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Semantics</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<article>
	<header>
	<h1>Semantics is meaning!</h1>
	<p><q>We must think things not words, or at least we must constantly
	translate our words into the facts for which they stand, if we are to
	keep to the real and the true.</q><i>Oliver Wendell Holmes Jr.</i>
	</p>
	</header>
	<nav>
	<a href="#">See more on this subject!</a>
	<a href="#">Do something else!</a>
	</nav>
	<section>
	<section>
	<h4>How to Get Rich By Being Semantically Appropriate</h4>
	<ol>
	<li>Find the right tag.</li>
	<li>Use it.</li>
	<li>...</li>
	<li>Profit!</li>
	</ol>
	</section>
	</section>
	<footer>by Sean Timm</footer>
	</article>

	<!-- Code below is to toggle source and load scripts -->
	<button id="source">Toggle Source</button>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<script src="https://gist.github.com/2141600.js" type="text/javascript"></script>
	</body>
	</html>
	$(function() {
	// Code to support toggling scripts
	$("#source").on("click", function(event) {
	$(".gist").toggle();
	});
	});
	section:before {
	counter-increment: sectionCount;
	content: "Section: " counter(sectionCount);
	font-weight: bold;
	border-bottom: 2px solid red;
	width: 100%;
	}

	article:before {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	content: "Article";
	font-family: sans-serif;
	}

	article:after {
	content: "End Article"
	}

	article {
	border: 0.2em solid red;
	}

	header:before {
	content: "Header";
	position: absolute;
	margin-top: 1.2em;
	rotation: 50deg !important;
	-webkit-transform: rotate(50deg);
	-moz-transform: rotate(50deg);
	font-size: 3em;
	font-family: sans-serif;
	font-weight: bold;
	background-color: #5f9ea0;
	opacity: 0.5;
	}

	nav {
	background-color: #ffa07a;
	padding-bottom: 1em;
	}

	nav > a {
	display: block;
	}

	nav:after {
	content: "nav items";
	float: right;
	font-family: sans-serif;
	}

	section:after {
	content: "End Section";
	border-top: 2px solid red;
	}

	section {
	background-color: #faebd7;
	padding: 1em;
	}

	section > section {
	background-color: #5f9ea0;
	}

	footer:before {
	content: "Footer: " open-quote
	}

	footer:after {
	content: close-quote;
	}

	ol {
	padding-left: 4em;
	}

	/* Styles to support toggling the source view */
	.gist {
	font-size: 0.5em;
	display: none;
	}

	div.gist .gist-file {
	position: relative;
	margin: 3em 0;
	}

	.gist-meta {
	position: absolute;
	top: -2.5em;
	left: -30000px;
	}

	.gist-meta a {
	display: none;
	}

	.gist-meta a:nth-child(2) {
	position: relative;
	padding-left: 30000px;
	display: inline;
	}

	#source {
	float: right;
	}

	body {
	font-size: 4em;
	}