<!--HTML--><center>

<div style="width: 200px; height: 55px; font-family: calibri; font-size: 9px; text-transform: uppercase; background: #dedede; color: #555; padding: 5px; border-bottom: 3px solid #26a390; margin-bottom: 20px; box-shadow: 0 0 1px #999; text-align: justify;">
If you use my templates, do not use them as bases for your own codes. Minor changes are allowed (fonts, colors, backgrounds etc) but please  leave my credits intact. Also available in purple & pink! See first comment for codes.
</div>


<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>

<style>
.container {
width: 480px;
height: 325px;
background: url('http://i.imgur.com/IGFkcq2.png') repeat top left;
padding: 3px 16px 7px 5px;
box-shadow: 0 0 1px #555;
position: relative;
}
table, td {
color: #555;
font-size: 9px;
}
.details {
display: inline-block;
float: right;
font-family: verdana;
font-size: 10px;
text-align: justify;
background: #fff url('') no-repeat center center;
box-shadow: 1px 1px 2px #555;
position: relative;
overflow: hidden;
margin: 10px 20px 10px 0;
border: 5px solid #fff;
cursor: default;  
}
.details .mask, .details .content {
top: 0;
left: 0;
width: 175px;
height: 297px;
position: absolute;
overflow: hidden;
}
.details-info .mask { 
background-color: rgba(191, 191, 191, 0.3); 
opacity: 0;
transition: all 0.5s linear;
}
.details-info:hover .mask { 
opacity: 1;
}
.details img {
display: inline-block;
position: relative;
}
.details-info img { 
transform: scale(1);
transition: all .7s ease-in-out;
}
.details-info:hover img { 
opacity: 0;
transform: scale(1);
-webkit-transform: scale(1);  
}
.details h2 {
font-family: 'Satisfy', cursive;
font-size: 24px;
text-align: center;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 20px;
padding: 5px;
}
.details-info h2{
color: #26a390;
background: transparent;
margin: 2px 10px -7px 10px;
opacity: 0;
border-bottom: none;
transform: scale(0);
transition: all 0.5s linear;  
}
.details h3 {
font-family: 'Archivo Narrow', sans-serif;
font-size: 9px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 6px;
padding: 5px;
margin: -15px 0 0 2px;
}
.details-info h3{
color: #444;
background: transparent;
margin: 0 0 0;
opacity: 0;
border-bottom: none;
transform: scale(0);
transition: all 0.5s linear;   
}
.details h3.updates {
font-family: 'Archivo Narrow', sans-serif;
font-size: 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 9px;
background: rgba(0, 0, 0, 0.8);
padding: 5px;
}
.details-info h3.updates {
color: #333;
background: transparent;
opacity: 0;
border-bottom: none;
transform: scale(0);
transition: all 0.5s linear;  
}
.details p {
width: 167px;
color: #555555;
font-family: trebuchet ms, serif;
font-size: 9px;
font-style: normal;
text-align: center;
text-transform: uppercase;
background: #ccc;
padding: 2px 0 2px;
margin: 0 0 0 4px;
position: relative; 
}
.details-info p {
color: #555;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
p.interests {
color: #555;
font-family: calibri, serif;
font-size: 9px;
font-style: none;
text-align: left;
line-height: 9px;
background: transparent;
padding: 2px 0px 0px;
margin: 1px 2px 3px 5px;
position: relative;
}
p.interests:first-letter {
display: inline-block; 
float: left; 
color: #dcdcdc; 
font-family: georgia;
font-size: 20px;
background-color: #26a390;
padding: 8px;
margin: 1px 3px 0 0px;
}
.details small {
color: #555555;
font-family: trebuchet ms, serif;
font-size: 9px;
font-style: normal;
text-align: center;
text-transform: uppercase;
background: #ccc;
padding: 2px 5px 2px;
margin: 0 0 0 4px;    
}
.details table.table1 {
width: 175px;
text-align: center;
}
.details a.link {
width: 70px;
display: inline-block;
color: #dcdcdc;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
background: #26a390;
padding: 14px 5px;
margin: 1px 1px 0;  
box-shadow: 0 0 1px #1c6a60;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
}
.details a.link:hover {
color: #299a8a;
background: #dcdcdc;
box-shadow: 0 0 1px #999;
} 
.details-info a.link { 
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}                                                                            
.details-info:hover h2, .details-info:hover h3, .details-info:hover h3.updates,
.details-info:hover p,
.details-info:hover a.link { 
opacity: 1;
transform: scale(1);
}
.showcase {
width: 290px;
height: 320px;
font-size: 9px;
line-height: 9px;
background: transparent;
padding: 7px 0 5px 5px;
margin: 7px -5px 0 0;
overflow: hidden;
}
.showcase table {
table-layout: fixed;
margin: -1px 0 0;
border-spacing: 0.3rem;
}
.showcase td {
padding: 0.5rem;
}
.showcase h3 {
float: bottom;
color: #333;
font-family: 'Archivo Narrow', sans-serif;
font-size: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 6px;
background: transparent;
padding: 5px;
margin: 0 0 0;
border-bottom: none;
}
.archives td:nth-of-type(1) { 
width: 100px;
color: #dcdcdc; 
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
text-align: center; 
text-transform: uppercase;
text-shadow: 1px 0px 1px #146155;
background-color: #26a390;
padding: 5px;
box-shadow: 0 0 1px #1c6a60;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
transition: all 0.5s linear;
}
.archives td:nth-of-type(1):hover { 
color: #26a390; 
text-shadow: 0 0 0;
background-color: #ebebeb;
box-shadow: 0 0 1px #999;
}
.archives td:nth-of-type(2) {
color: #555;
font-family: calibri;
font-size: 11px;
text-align: justify;
line-height: 11px;
background-color: #dcdcdc;
padding: 5px;
box-shadow: 0 0 1px #aaa;
border-left: 3px solid #26a390;
}
.archives a {
color: #26a390;
text-transform: uppercase;
text-decoration: none;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
transition: all 0.5s linear;
}
.archives a:hover {
color: #1e8273;
}
.archives-info {
height: 285px;
padding-right: 4px;
overflow-y: auto;
}
.archives-info::-webkit-scrollbar {
width: 5px;
}
.archives-info::-webkit-scrollbar-track {
margin: 5px;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
.archives-info::-webkit-scrollbar-thumb {
background: #26a390;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.credit {
float: right; 
width: 10px; 
height: 40px; 
margin-top: -5px; 
margin-right: -15px; 
background: transparent;
</style>

<div class="container">
<div class="details details-info" style="margin-right: 0px;">  
<img src="http://i.imgur.com/FJHcMKk.png" />  
<div class="mask">  
<h2>Look a heading</h2>
<h3>Blah blah blah, Yada yada</h3> 
        
<table class="table1">
<td valign="top" width="50%">
<a href="#" class="link">Link</a>
</td>
<td valign="top" width="50%">
<a href="#" class="link">Link</a>
</td>
</table>
<h3>Whoever smelt it dealt it</h3>
<p>
Secondary titles yay
</p>
<p class="interests">
There once was a woman who lived in a shoe and owned eight cats, who wore boots with shorts and liked to sniff glue.
</p>
<p>
Surely you get the idea
</p>
<p class="interests">
One day her cats ran away and the woman cried in her garden. She cried and she cried, until she heard soft meows. 
</p>
     
<p class="interests">
And there were her babies, safe and sound. They brought her a dead bird. Usually she'd be displeased but she just scooped them up, dead bird and all.
</p>

<p class="updates">
Last updated: XX/XX/XX
</p>
</div>  
</div>


<div class="showcase">
<table class="archives">
<tr>
<td>
Tags or Quote goes here ohihihi
</td> 
<td valign="top" width="65%" height="295px">
<div class="archives-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
</div></td>
</tr>
</table>
</div>

<div class="credit">
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=62186"><img src="http://i.imgur.com/zZSYqdY.png?1"></a>
</div>
</div>
<br />