Create a gist now

Instantly share code, notes, and snippets.

@ThomasWallace /index.html Secret
Last active Feb 14, 2017

What would you like to do?
A CodePen by ThomasWallace. Grid Design with fixed Pixel Declarations
<main class="container">
<header class="primary" role="banner">
<h1>Out with the old...</h1>
<h2>Beginning the transition to HTML5</h2>
<nav>
<ul>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
</header>
<section id="content">
<div class="primary">
<article class="post">
<header>
<time datetime="2017-01-26" class="post-date">January 26, 2017</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<div class="entry-content">
<figure>
<img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
<figcaption>Storm Trooper Wheel of Fortune</figcaption>
</figure>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>
</div>
<!--.entry-content-->
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2017-01-26" class="post-date">January 26, 2017</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<div class="entry-content">
<figure>
<img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
<figcaption>Storm Trooper Wheel of Fortune</figcaption>
</figure>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>
</div>
<!--.entry-content-->
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2017-01-26" class="post-date">January 26, 2017</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<div class="entry-content">
<figure>
<img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
<figcaption>Storm Trooper Wheel of Fortune</figcaption>
</figure>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>
</div>
<!--.entry-content-->
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
</div>
<!--#primary -->
<aside role="complementary">
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
</aside>
<!--#secondary -->
</section>
<!--#content -->
<footer class="primary" role="contentinfo">
<p>&copy; 2017 <a href="#">Thomas Wallace</a></p>
</footer>
</main>
<!--.container -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment