CodePen

HTML

            
              
 <!doctype html>
<meta charset="utf-8">
<link href="http://auct2/style.css" rel="stylesheet">
<script src="http://auct2/main.js"></script>
<title>AucT Blog</title>
<div class="wrap">
<header>
<h1><a href="http://auct2/" title="Return to the homepage">AucT' Blog</a></h1>
</header>

<nav class="links">
<a href="http://auct2/">Home</a>
<a href="http://auct2/articles/">Articles</a>
<a href="http://auct2/tutorials/">Tutorials</a>
<a href="http://auct2/projects/">Projects</a>
<a href="http://auct2/about/">About</a>
</nav>

<section>
		<article>
			<h2><a href="http://auct2/sugarsync-warcraft-folder/">SugarSync WarCraft Folder</a></h2>
			<a id="noa" href="http://auct2/sugarsync-warcraft-folder/"><img src="http://img836.imageshack.us/img836/5460/sugarsync.gif" alt="SugarSync WarCraft Folder" class="img"></a>
						
			<ul class="postinfo">
				<li>3rd January 2013</li>
				<li>Posted in <a href="http://auct2/articles/">articles</a></li>
				<li><a href="http://auct2/sugarsync-warcraft-folder/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/dehpc/">Dota EHP Calculator</a></h2>
			<a id="noa" href="http://auct2/dehpc/"><img src="http://img834.imageshack.us/img834/2959/dehpc.gif" alt="Dota EHP Calculator" class="img"></a>
						
			<ul class="postinfo">
				<li>25th November 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/dehpc/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/dahs/">Dota Advanced Hero Statistics</a></h2>
			<a id="noa" href="http://auct2/dahs/"><img src="http://img585.imageshack.us/img585/9359/dahs.gif" alt="Dota Advanced Hero Statistics" class="img"></a>
						
			<ul class="postinfo">
				<li>28th September 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/dahs/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/associate-warcraft-replay-w3g-with-replay/">Associate warcraft replay (.w3g) with replay</a></h2>
			<a id="noa" href="http://auct2/associate-warcraft-replay-w3g-with-replay/"><img src="http://dummyimage.com/775x100/ccc/333&text=Associate w3g" alt="decompile" class="img"></a>
						
			<ul class="postinfo">
				<li>25th September 2012</li>
				<li>Posted in <a href="http://auct2/tutorials/">tutorials</a></li>
				<li><a href="http://auct2/associate-warcraft-replay-w3g-with-replay/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/ack/">AucT CustomKeys Generator</a></h2>
			<a id="noa" href="http://auct2/ack/"><img src="http://img715.imageshack.us/img715/8311/ackm.jpg" alt="AucT CustomKeys Generator" class="img"></a>
						
			<ul class="postinfo">
				<li>9th August 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/ack/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/rosh-timer/">Rosh Timer</a></h2>
			<a id="noa" href="http://auct2/rosh-timer/"><img src="http://img109.imageshack.us/img109/9576/roshtimer.jpg" alt="rosh timer" class="img"></a>
						
			<ul class="postinfo">
				<li>10th July 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/rosh-timer/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/d2a/">Dota 2 Accepter</a></h2>
			<a id="noa" href="http://auct2/d2a/"><img src="http://img845.imageshack.us/img845/3707/d2ar.jpg" alt="dota 2 accepter" class="img"></a>
						
			<ul class="postinfo">
				<li>8th May 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/d2a/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/dota-archive/">Dota Archive</a></h2>
			<a id="noa" href="http://auct2/dota-archive/"><img src="http://dummyimage.com/775x100/ccc/333&text=Dota+Archive" alt="decompile" class="img"></a>
						
			<ul class="postinfo">
				<li>26th April 2012</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/dota-archive/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/how-to-make-hotkey-tool-with-autohotkey/">How to make hotkey tool with AutoHotkey</a></h2>
			<a id="noa" href="http://auct2/how-to-make-hotkey-tool-with-autohotkey/"><img src="http://img145.imageshack.us/img145/2909/autohotkey.jpg" alt="me" class="img"></a>
						
			<ul class="postinfo">
				<li>15th October 2011</li>
				<li>Posted in <a href="http://auct2/tutorials/">tutorials</a></li>
				<li><a href="http://auct2/how-to-make-hotkey-tool-with-autohotkey/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/how-to-easy-decompile-exe-files-to-ahk/">How to easy decompile exe files to ahk</a></h2>
			<a id="noa" href="http://auct2/how-to-easy-decompile-exe-files-to-ahk/"><img src="http://dummyimage.com/775x100/ccc/333&text=DECOMPILE" alt="decompile" class="img"></a>
						
			<ul class="postinfo">
				<li>11th October 2011</li>
				<li>Posted in <a href="http://auct2/tutorials/">tutorials</a></li>
				<li><a href="http://auct2/how-to-easy-decompile-exe-files-to-ahk/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/sih/">Simple Inventory Hotkeys</a></h2>
			<a id="noa" href="http://auct2/sih/"><img src="http://img10.imageshack.us/img10/3859/sih.png" alt="Simple Inventory Hotkeys" class="img"></a>
						
			<ul class="postinfo">
				<li>25th March 2011</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/sih/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/invoker-bind/">Invoker Bind</a></h2>
			<a id="noa" href="http://auct2/invoker-bind/"><img src="http://dummyimage.com/775x100/ccc/333&text=Invoker+Hotkeys" alt="Invoker Hotkeys by AucT" class="img"></a>
						
			<ul class="postinfo">
				<li>14th December 2010</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/invoker-bind/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
		<article>
			<h2><a href="http://auct2/aht/">AucT Hotkeys Tool</a></h2>
			<a id="noa" href="http://auct2/aht/"><img src="http://img685.imageshack.us/img685/5574/ahtb.jpg" alt="AucT Hotkeys Tool" class="img"></a>
						
			<ul class="postinfo">
				<li>18th October 2010</li>
				<li>Posted in <a href="http://auct2/projects/">projects</a></li>
				<li><a href="http://auct2/aht/">Continue Reading &raquo;</a></li>
			</ul>
		</article>


  
</section>

<aside>
<div class="links">
<h2><a href="http://auct2/My-Second-Article/">My Second Article</a></h2>
aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside 
</div>
<div>
aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside 
</div>
<div>
aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside 
</div>
<div>
aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside aside 
</div>
</aside>

<footer>
footer
</footer>

</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*
#00a300 - success
#e3a21a - warning
#b91d47 - important
#2d89ef - info
*/

/*help with this*/
a {text-decoration:none; color: #b91d47; transition: all 0.3s ease-out;}
section a, aside a {padding:5px} #noa {padding:0}
section a:hover, aside a:hover{color:#fff; background:#b91d47;} #noa:hover {color:none;background:none}


/*end*/

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {margin: 0; padding: 0; border: 0;}
ul{list-style:none;}
html {overflow-y: scroll;}
body {font: 1em/1.5em Arial,Helvetica,sans-serif; color: #000; background:#ccc;}

nav a, section, aside, .btn {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

h1,h3{text-align:center}

h2, h3 {margin:1em}
img {max-width:100%;height:auto}
.img {margin:auto;display:block;}
p{margin: 1em 0;}
table tr:nth-child(even) {background: rgba(0,0,0,0.1);}
pre {font: 0.8em/1.6 Monaco, Mono-Space, monospace;background: #faf8f0;border: 1px solid #bebab0;overflow:auto}
blockquote {padding-left: 15px; margin:10px 0; border-left: 3px solid #ccc;} 

.wrap { width: 75%;margin:20px auto; background:#fff }
@media (max-width: 1250px) { 
    .wrap { width: 100%; margin:0 auto }
}
header {background:#333;}
header a{font-size:3em;text-align:center; line-height:1; color:#fff;}

nav{font-size:0}
nav a {color:#fff; background:#b91d47; display: inline-block; padding:10px 0; font-weight:bold; font-size:18px; width:20%;  text-align: center;}
nav a:hover{color:#b91d47; background:#fff;}
section {float:left; width:64%;background:#fff;padding:1%}
article,aside div {border-bottom: 1px solid #ccc; padding:20px 0}
aside {float:right; width:34%;padding:1%;}

footer {clear:both;background:#333; padding:20px 0; color:#fff; text-align:center}


@media (max-width: 480px) { 
section, aside {width:100%;float:none;padding:0}
header a {font-size:2em}
nav a {width:50%}
	}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................