Untitled

dabblet.css

.dates {
  	list-style: none;
  	margin: 0;
  	padding: 0;
}
.dates li {
    position: relative;
    padding-left: 5.75em;
}
.dates li + li {
	border-top: solid 1px #ddd;
}
.dates .date {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1.65em;
    background-color: #3353d5;
    height: 3.1em;
    text-align: center;
    color: #fff;
    line-height: 1em;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 0.5em 0.5em 0 1em;
}
.dates .date:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -1em;
    border-left: solid 1.05em #3353d5;
    border-top: solid 1.8em transparent;
    border-bottom: solid 1.8em transparent;
}
.dates .date strong {
    display: block;
    font-size: 2.5em;
    padding-top: 0.3em;
    color: # fff;
}
.dates h3 {
    font-size: 1.1em;
    margin: 0;
    padding-top: 1.3em;
}
.dates p {
    margin: 0;
    padding-bottom: 1.3em;
}

dabblet.html

<ol class="dates">
  <li>
  	<span class="date"><strong>1</strong></span>
    <h3><a href="#">Lorem dolor sit amet veroeros</a></h3>
    <p>Ipsum dolor sit amet veroeros consequat blandit ipsum phasellus lorem consequat etiam.</p>
  </li>
  <li>
    <span class="date"><strong>2</strong></span>
    <h3><a href="#">Ipsum sed blandit nisl consequat</a></h3>
    <p>Blandit phasellus lorem ipsum dolor tempor sapien tortor hendrerit adipiscing feugiat lorem. Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore. Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
  </li>
  <li>
    <span class="date"><strong>3</strong></span>
    <h3><a href="#">Magna tempus lorem feugiat</a></h3>
    <p>Dolore consequat sed phasellus lorem sed etiam nullam dolor etiam sed amet sit consequat.</p>
  </li>
  <li>
    <span class="date"><strong>4</strong></span>
    <h3><a href="#">Dolore tempus ipsum feugiat nulla</a></h3>
    <p>Feugiat lorem dolor sed nullam tempus lorem ipsum dolor sit amet nullam consequat.</p>
  </li>
  <li>
    <span class="date"><strong>5</strong></span>
    <h3><a href="#">Blandit tempus aliquam?</a></h3>
    <p>Feugiat sed tempus blandit tempus adipiscing nisl lorem ipsum dolor sit amet dolore.</p>
  </li>
</ol>

dabblet.js

<div style="background-color:#000;">

 		 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" table layout;fixed;>
  				  <tr>
   					   <td valign="top" align="center" background="images/Sportsmanhub_Background.png" background-repeat:no-repeat; background-attachment:fixed; background-position:center; >




			<table width = "100%" border= "0" cellspaceing = "0" cellpadding = "0" bgcolor: "#000"; table layout:fixed;>
			<tr>
				<td>

				<table class="container" width="640" align="center" border= "0" cellspaceing="0" cellpadding="0" table layout: fixed;>
					<tr>

						<!--leave the date out seperate of the image, above the whole tabel-->
						<td valign = "top"  align= "center" class= "logo"  bgcolor ="#000" style= "padding: 10px 20px 0px 30px; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000;">
							<a href = "sportsmanshub.com"><img src= "images/top_logo.png" alt= "SportsMans Hub" width="685" height="185" border= "0"></a>
						</td>
					</tr>
					<tr>
						<td>
							<img src= "images/hot_news.png">
						</td>
					<tr>
						<td class="content" valign="top" bgcolor="#000" valign="top"  column-rule-width=60px style="padding: 5px 5px 5px 5px; border: 1px solid; border-color: #000; color:white; column-width=60px;">
							<p>Nulla accumsan dolor neque, sit amet fermentum metus adipiscing eu. Praesent sed vestibulum velit. Sed bibendum euismod leo vitae egestas? Mauris laoreet, eros sit amet laoreet luctus, leo turpis commodo erat, sed faucibus sem libero non dolor. <br><a href = "sportsmanshub.com"><img src="images/read_more.png" align = "right"></a></br></p>
						</td>
						<td colspan=2>
							
						</td>
					</tr>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
				</table>
			</table>

				</td>
			</tr>


				</td>
    	</tr>
  </table>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}