HTML Panel Style 1

by Taqi_Shah

HTML

<div id="DIV_1">
	<div id="DIV_2">
		<p id="P_3">
			<a href="https://twitter.com/w03_" id="A_4">@w03_</a> recursive functions are fun. Once you’ve figured them, closures and first-class functions out you’re pretty much there :)
		</p>
	</div>
	<footer id="FOOTER_5">
		<a rel="bookmark" href="https://waterpigs.co.uk/notes/4T28PW/" id="A_6"></a>
		<time id="TIME_7">
			13<sup id="SUP_8">th</sup> of November 2013 at 08:23
		</time>
		<action id="ACTION_11">
			</action>
	</footer>
</div>

<br />

<article id="ARTICLE_1">
	<h2 id="H2_2">
		 <a rel="bookmark" href="/articles/a-simple-go-irc-bot/" id="A_3">A Simple Go IRC Bot</a>
	</h2>
	<div id="DIV_4">
		<p id="P_5">
			How to create a small IRC bot using the Go programming language.
		</p>
	</div>
	<p id="P_6">
		<a href="/articles/a-simple-go-irc-bot/" id="A_7">Read more…</a>
	</p>
	<p id="P_8">
		<a href="/articles/a-simple-go-irc-bot/" id="A_9"></a>
		<time id="TIME_10">
			2013-08-25 13:47
		</time> — 2<img src="/img/icons/mention-icon.svg" alt="mentions" id="IMG_11" />
	</p>
</article>

CSS

#DIV_1 {
    box-shadow: rgb(170, 170, 170) 0px 1.60000002384186px 4.79999971389771px 0px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 121.166664123535px;
    max-width: 100%;
    text-align: left;
    width: 720px;
    perspective-origin: 360px 60.5833320617676px;
    transform-origin: 360px 60.5833320617676px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 16px/normal Georgia, serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
    padding: 16px;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 37.3333320617676px;
    max-width: 100%;
    text-align: left;
    width: 688px;
    perspective-origin: 344px 18.6666660308838px;
    transform-origin: 344px 18.6666660308838px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 16px/normal Georgia, serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}/*#DIV_2*/

#P_3 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 37.3333320617676px;
    max-width: 100%;
    text-align: left;
    width: 688px;
    perspective-origin: 344px 18.6666660308838px;
    transform-origin: 344px 18.6666660308838px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 16px/normal Georgia, serif;
    list-style: none outside none;
    margin: 17.9200000762939px 0px;
    outline: rgb(51, 51, 51) none 0px;
}/*#P_3*/

#A_4 {
    color: rgb(68, 102, 136);
    text-align: left;
    text-decoration: none;
    word-break: break-all;
    border-top: 0px none rgb(68, 102, 136);
    border-right: 0px none rgb(68, 102, 136);
    border-bottom: 1.33333337306976px solid rgb(51, 51, 51);
    border-left: 0px none rgb(68, 102, 136);
    font: normal normal normal normal 16px/normal Georgia, serif;
    list-style: none outside none;
    outline: rgb(68,...