<!--HTML--><link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>


<center>

<div class="gonewith">
<div class="thewind">
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tr>
<td>

<div class="scarlett">
<img class="image2" src="150x150IMAGEHERE">
<img class="image1" src="150x150IMAGEHERE">
</div>

</td>
<td rowspan="2">

<div class="rhett">
<img class="image1" src="150x300IMAGEHERE">
<img class="image1" src="150x300IMAGEHERE">
</div>

</td>
<td>
<div class="butler">

<img class="image1" src="100x150IMAGEHERE">
<img class="image1" src="100x150IMAGEHERE">

</div>
</td>
<td>
<div class="butler">

<img class="image1" src="100x150IMAGEHERE">
<img class="image1" src="100x150IMAGEHERE">

</div>
</td>

</tr>
<tr>
<td>
<div class="scarlett">

<img class="image2" src="150x150IMAGEHERE">
<img class="image1" src="150x150IMAGEHERE">

</div>
</td>
<td>
<div class="butler">

<img class="image1" src="100x150IMAGEHERE">
<img class="image1" src="100x150IMAGEHERE">

</div>
</td>
<td>
<div class="butler">

<img class="image1" src="100x150IMAGEHERE">
<img class="image1" src="100x150IMAGEHERE">

</div>
</td>
</tr>
</table>
</div>
<div class="ohara"></div>

<div class="ashleyw">follow</div>

<div class="melanie">
<div class="wilkes">USERNAME</div>
<div class="tara"><b>USERNAME</b><div class="plantation">status thing here</div></div>



<div class="gonewithbuttons">
<div class="posterss" style="border-right:1px solid #999;">1.2k<br>
<span class="postersss">posts</span>
</div>

<div class="posterss" style="border-right:1px solid #999;">120<br>
<span class="postersss">followers</span>
</div>

<div class="posterss"">438<br>
<span class="postersss">following</span>
</div>



</div>
</div>




</div>
</div>
</div>




</center>
<style type="text/css">
.gonewith {
   width: 500px;
   background-color: #eee;
   position: relative;
   height: 450px
   }




.thewind {
   width: 500px;
   height: 500px;
   background-color: #eee
   }







/*TOP IMAGE TABLE */
.scarlett {
   position: relative;
   width: 150px;
   height: 150px;
   overflow:hidden;
   }

.scarlett img {
   position: absolute;
   top: 0;
   left: 0;
   -moz-transition: opacity 1.1s ease;
   -o-transition: opacity 1.1s ease;
   -webkit-transition: opacity 1.1s ease;
   transition: opacity 1.1s ease
   }














.scarlett:hover .image1 {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0
   }

.rhett {
   position: relative;
   width: 150px;
   height: 300px;
   overflow:hidden;
   }

.rhett img {
   position: absolute;
   top: 0;
   left: 0;
   -moz-transition: opacity 1.1s ease;
   -o-transition: opacity 1.1s ease;
   -webkit-transition: opacity 1.1s ease;
   transition: opacity 1.1s ease
   }

.rhett:hover .image1 {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0
   }

.butler {
   position: relative;
   width: 100px;
   height: 150px;
   overflow:hidden;
   }

.butler img {
   position: absolute;
   top: 0;
   left: 0;
   -moz-transition: opacity 1.1s ease;
   -o-transition: opacity 1.1s ease;
   -webkit-transition: opacity 1.1s ease;
   transition: opacity 1.1s ease
   }

.butler:hover .image1 {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0
   }

/*PROFILE PIC*/

.ohara {
   width: 100px;
   height: 100px;
   border: 5px solid white;
   background-image: url(http://placehold.it/100);
   position: absolute;
   top: 260px;
   left: 20px;
   overflow:hidden;
   }


.ashleyw {
   width: 100px;
   background-color: #6F97B6;
   height: 15px;
   border-left: 5px solid white;
   border-right: 5px solid white;
   border-bottom: 5px solid white;
   position: absolute;
   top: 369px;
   left: 20px;
   font-family: Helvetica;
   text-align: center;
   line-height: 15px;
   text-transform: capitalize;
   font-size: 10px;
   letter-spacing: 1px;
   font-weight: bold;
   color: #fff;
   -moz-box-shadow: inset 1px 1px 1px #1C5380;
   -webkit-box-shadow: inset 1px 1px 1px #1C5380;
   box-shadow: inset 1px 1px 1px #1C5380;
   text-shadow: 1px 1px 0 #C5380
   }

.melanie {
   width: 500px;
   height: 150px;
   background-color: #f0f0f0;
   border-bottom: 1px solid #999
   }

.wilkes {
   font-family: oswald;
   font-size: 16px;
   color: #222;
   font-weight: 300;
   position: absolute;
   top: 335px;
   left: 150px;
   line-height: 100%
   }

.tara {
   font-family: helvetica;
   font-size: 10px;
   color: #222;
   font-weight: 300;
   position: absolute;
   top: 370px;
   left: 150px;
   line-height: 100%
   }

.plantation {
   margin-left: 5px;
   font-family: helvetica;
   font-size: 10px;
   letter-spacing: 0.5px;
   display: inline-block
   }

.gonewithbuttons {
   position: absolute;
   right: 20px;
   padding: 5px;
   top: 310px;
   height: 40px;
   width: 160px;
   background-color: #eee;
   color: #333;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   border-bottom: 1px solid rgba(0, 0, 0, 0.25)
   }

.posterss {
   width: 50px;
   padding: 5px 0;
   height: 20px;
   font-family: helvetica;
   font-size: 13px;
   font-weight: bold;
   text-align: center;
   display: inline-block;
   line-height: 90%;
   margin-top: 5px
   }

.postersss {
   font-family: helvetica;
   text-transform: lowercase;
   color: #999;
   line-height: 90%;
   font-size: 9px
   }

.hovergram {
   width: 120px;
   height: 150px;
   position: relative;
   margin: 10px
   }

.gridimgg {
   width: 100px;
   height: 100px;
   background-image: url(http://placehold.it/100);
   position: absolute;
   left: 15px;
   bottom: 20px;
   border: 5px solid white;
   z-index: 99
   }

.theborderson {
   width: 0;
   height: 0;
   background-color: white;
   ransition-duration: 0.5s;
   position: absolute;
   left: 55px;
   top: 55px;
   overflow: hidden
   }

.hovergram:hover .theborderson {
   width: 120px;
   height: 150px;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   background-color: white;
   left: 10px;
   top: 0
   }

.margaret {
   width: 480px;
   height: 324px;
   overflow: auto
   }



.mitchell {
   line-height: 90%;
   font-size: 10px;
   text-transform: uppercase;
   line-height: 30px;
   height: 20px;
   font-weight: bold;
   color: #999;
   text-align: center
   }



.vivien {
   width: 90px;
   position: absolute;
   left: 15px;
   bottom: 10px;
   line-height: 90%;
   font-size: 10px;
   text-transform: uppercase;
   line-height: 30px;
   height: 20px;
   font-weight: bold;
   color: #999;
   text-align: center
   }


</style>