Skip to content

Instantly share code, notes, and snippets.

@marcusp619

marcusp619/Re-doing-Blog-.markdown

Created January 29, 2015 18:47
Show Gist options
  • Save marcusp619/3796e01f0015635fade6 to your computer and use it in GitHub Desktop.
Save marcusp619/3796e01f0015635fade6 to your computer and use it in GitHub Desktop.
Download ZIP
Re-doing Blog
Raw
index.html
<div class="wrapper">
<body>
<header>
<nav>
<ul>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">About</a>
</ul>
</nav>
</header>
<article>
<h1>The Plan</h1>
<figure>
<img src="http://img.freepik.com/free-photo/artificial-brain-vector_23-2147499616.jpg?size=318&ext=jpg" alt="Thinking" />
<figcaption>Thinking Ahead</figcaption>
</figure>
<h2>The Morning</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nesciunt ipsam quibusdam unde non molestias quae modi magni aliquam expedita ratione laborum consectetur dolores eius omnis odit in, et nemo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis suscipit id cum soluta quod, dolore nobis magnam deleniti explicabo, porro iste consequatur quidem tempora? Nisi id odit minus non earum!</p>
</article>
<aside>
<section class="related-article">
<h2>Related Articles</h2>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</section>
<section class="share"><h4>Share Links</h4></section>
</aside>
</div>
</body>
Raw
Re-doing-Blog-.markdown

Re-doing Blog

Redoing my blog using html5 tags. Also making sure it is accessible.

A Pen by Mark on CodePen.

License.

Raw
style.css
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: rgba(51, 51, 51, 1);
background-color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.4em;
margin: 0;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment