[dohtml]
<style type="text/css">
#shipper ::-webkit-scrollbar { width: 5px; }
#shipper ::-webkit-scrollbar-thumb { background-color: #abf700; border: 1px solid #000; }
#shipper ::-webkit-scrollbar-track { background-color: #000; }
#shipper {
width: 500px;
margin: 25px auto;
}
#shipper .top {
padding: 25px;
color: #fff;
text-align: left;
color: #fff;
padding-left: 40px;
padding-top: 35px;
font-size: 35px;
font-weight: bold;
font-family: poppins;
background-color: #000;
padding-bottom: 35px;
}
#shipper .middle {
width: 500px;
height: 300px;
overflow: hidden;
backgroud-image:url(http://placehold.it/500x300);
}
#shipper .bottom {
height: 80px;
background-color: #000;
width: 500px;
}
#shipper input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
display: none;
}
#shipper label {
cursor: pointer;
transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
}
#shipper .middle2 {
opacity: 0;
background: rgba(0,0,0,0.0);
width: 400px;
padding: 50px;
height: 200px;
line-height: 100px;
color: #000;
text-align: center;
transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
}
#shipper input[type=checkbox]:checked ~ .middle2 {
background: rgba(0,0,0,0.8);
opacity: 1;
}
#shipper .middle .middle2 {
width: 500px;
height: 300px;
overflow: auto;
text-align: justify;
color: #000;
font-family: arial;
font-size: 10px;
line-height: 110%;
}
#shipper .name {
width: 148px;
padding: 10px;
border: 1px solid #fff;
text-align: center;
border-bottom: 0px solid #000;
font-family: poppins;
font-size: 8px;
text-transform: uppercase;
font-weight: normal;
color: #fff;
letter-spacing: 1px;
}
#shipper .info {
width: 168px;
height: 168px;
overflow: auto;
border: 1px solid #fff;
}
#shipper .info h1 {
border-bottom: 1px solid #fff;
color: #fff;
font-family: poppins;
font-size: 8px;
letter-spacing: 1px;
font-weight: 300;
display: block;
padding: 4px;
text-transform: uppercase;
padding-bottom: 8px;
padding-left: 8px;
}
#shipper .info .image {
width: 168px;
height: 75px;
overflow: hidden;
}
#shipper .info .image img {
height: 80px;
}
#shipper .para {
width: 190px;
height: 200px;
padding: 10px;
margin-left: 20px;
}
#shipper .para2 {
width: 188px;
height: 200px;
overflow: auto;
padding-right: 2px;
font-family: times new roman;
font-size: 11px;
line-height: 125%;
text-align: justify;
color: #fff;
margin-top: -5px;
}
#shipper .para2 p {
text-indent: 0px;
}
#shipper .para2 p b {
font-family: poppins;
float: left;
color: #abf700;
margin: 3px auto;
margin-right: 10px;
margin-top: 1px;
font-weight: 300px;
margin-bottom: 0px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: 00px; margin-bottom: 25px; }
</style>
<link href='https://fonts.googleapis.com/css?family=Poppins:400,700,300' rel='stylesheet' type='text/css'>
<div id="shipper">
<div class="top">
<label for="toggle-1">+</label>
</div>
<div class="middle" style="background-image:url(500 x 300 image here);">
<input type="checkbox" id="toggle-1">
<div class="middle2">
<table><tr vAlign="top"><td>
<div class="name">
first last
</div>
<div class="info">
<div class="image"><img src="170x180 image" /></div>
<h1>age (in letters)</h1>
<h1>member group</h1>
<h1>career</h1>
</div>
</td><td>
<div class="para">
<div class="para2">
<p><b>+</b> fun fact</p>
<p><b>+</b> fun fact</p>
<p><b>+</b> fun fact</p>
<p><b style='font-size:23px; margin-top: 7px; margin-left: 0px; margin-right: 5px;'>F</b> friends</p>
<p><b style='font-size:23px; margin-top: 7px; margin-left: 0px; margin-right: 5px;'>E</b> enemies</p>
<p><b style='font-size:23px; margin-top: 7px; margin-left: 0px; margin-right: 5px;'>L</b> lovers</p>
</div></div>
</td></tr></table>
</div>
</div>
<div class="bottom"></div>
</div><div class="merc_cred"><a href="http://athousandfireflies.jcink.net/index.php?showuser=18">merc</a></div>[/dohtml]
![:]](/users/1517/23/33/60/smiles/992560175.png)
