Skip to content

Instantly share code, notes, and snippets.

@ThomasWallace

ThomasWallace/index.html Secret

Last active February 14, 2017 14:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasWallace/50b4617491d220b5c8cc to your computer and use it in GitHub Desktop.
Save ThomasWallace/50b4617491d220b5c8cc to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by ThomasWallace. Grid Design with fixed Pixel Declarations
Raw
index.html
<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