<!--HTML--><center><div class="gramcracker">
<div class="gramcracker1">
<div class="gramcrackertop">
<div><i class="fa fa-search"></i></div>
<i class="fa fa-cloud"></i>
icloudgram</div>
<div class="gramcrackertop2">
<div class="gramcrackertopimg">

<img src="http://78.media.tumblr.com/7f1a3144a2bc2bcac406afc402abc794/tumblr_p2d1vp17x31v4xmuio2_400.png">

</div>
<div class="gramcrackertopname">

name surname

</div>
<div class="gramcrackertoptag">

@profile

</div>
<div class="gramcrackertopblurb">

По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. 
</div></div>
<div class="gramcrackertop3">

<b>000</b> POSTS 
<b>000</b> FOLLOWERS 
<b>000</b> FOLLOWING

</div>
<div class="gramcrackermid">





<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/96367303b0bce19e1465d0ffb550fe03/tumblr_p2d1vp17x31v4xmuio6_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 72 
<i class="fa fa-comment-o"></i> 12
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/d1ad04fa37fbe9980443493a9a27be2c/tumblr_p2d1vp17x31v4xmuio7_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 7 
<i class="fa fa-comment-o"></i> 129
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/3a5f01ce3168493b6eec0da12edc846b/tumblr_p2d1vp17x31v4xmuio8_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 125 
<i class="fa fa-comment-o"></i> 43
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/c7d742138592de458815646211582e08/tumblr_p2d1vp17x31v4xmuio4_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 342 
<i class="fa fa-comment-o"></i> 12
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/20386be76acb74e2f0e8c2ff95e45e1e/tumblr_p2d1vp17x31v4xmuio1_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 3 
<i class="fa fa-comment-o"></i> 9
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/fffec876d7f208216aa63487b94c4cca/tumblr_p2d1vp17x31v4xmuio5_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 186 
<i class="fa fa-comment-o"></i> 62
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/1c6442e2b1c97579ae069dcbf723f485/tumblr_p2d1vp17x31v4xmuio3_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 26 
<i class="fa fa-comment-o"></i> 82
</div></div>

<div class="gramcrackerimg">
<img src="http://78.media.tumblr.com/93bb9b608a4af061210d2fb545299392/tumblr_p2d1vp17x31v4xmuio9_400.png">
<div class="gramcrackerimg2">
<i class="fa fa-heart-o"></i> 000 
<i class="fa fa-comment-o"></i> 000
</div></div>





</div>
<div class="gramcrackerbot">
<div class="gramcrackerbot1"><i class="fa fa-plus"></i>FOLLOW</div>
<div class="gramcrackerbot2"><i class="fa fa-archive"></i></div>
<div class="gramcrackerbot2"><i class="fa fa-bell"></i></div>
<div class="gramcrackerbot3"><i class="fa fa-home"></i></div>
</div>
</div>
</div></center>


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cincel:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

<style>
.gramcracker { 
    padding: 19px;
    width: 554px;
    letter-spacing: 0px;
    color: #777777;
    text-align: justify;
}
.gramcracker1 { border:solid 1px #e5e5e5;padding:5px;background-color:#ffffff; }
.gramcrackertop { background-color:#ececec;border:solid 1px #e5e5e5;padding:35px;font:bold 35px Montserrat;line-height:30px;letter-spacing:-3px; }
.gramcrackertop i { padding-right:5px;color:#777777; }
.gramcrackertop div { height:28px;width:165px;border-radius:20px;border:solid 1px #e5e5e5;background-color:#f7f7f7;padding:0px 10px;font-size:10px;color:#cccccc;line-height:28px!important;float:right;margin:1px;text-align:right;cursor:text; }
.gramcrackertop div i { font-size:10px;line-height:28px;color:#cccccc; }
.gramcrackertop2 { border-left:solid 1px #e5e5e5;border-right:solid 1px #e5e5e5;background-color:#f7f7f7;padding:35px;height:120px; }
.gramcrackertopimg { height:100px;width:100px;padding:9px;background-color:#f3f3f3;border:solid 1px #e3e3e3;float:left;border-radius:100%;margin-right:20px; }
.gramcrackertopimg img { height:100px;width:100px;border-radius:100%; }
.gramcrackertopname { font:40px Oswald;line-height:30px;padding-top:10px;position:relative; }
.gramcrackertoptag { 
    font: bold 10px Roboto;
    line-height: 10px;
    padding: 14px 0px 10px 0px;
    text-transform: uppercase;
}
.gramcrackertopblurb { font:11px Roboto;text-align:left; }
.gramcrackertop3 { border:solid 1px #e5e5e5;background-color:#f3f3f3;font:bold 10px Roboto;line-height:10px;text-align:center;letter-spacing:.5px;padding:25px 25px 25px 10px; }
.gramcrackertop3 b {     color: #bd6792;padding-left:15px; }
.gramcrackermid { padding:35px;padding-right:25px;border-left:solid 1px #e5e5e5;border-right:solid 1px #e5e5e5;background-color:#f7f7f7;height:230px; }
.gramcrackerimg { height:100px;width:100px;padding:4px;background-color:#f3f3f3;border:solid 1px #e5e5e5;float:left;margin-right:10px;margin-bottom:10px; }
.gramcrackerimg img { height:100px;width:100px;position:absolute; }
.gramcrackerimg2 { height: 100px;    width: 93px;    position: relative;    z-index: 1;    background-color: rgba(121, 121, 121, 0.66);    color: #ffffff;
    text-shadow: 1px 1px 0px rgba(0,0,0,.1);    font: bold 10px Roboto;    line-height: 100px;    text-align: center;    white-space: nowrap;    padding-right: 7px;    opacity: 0;    -webkit-transition-duration: .3s;    transition-duration: .3s;    -moz-transition-duration: .3s;}
.gramcrackerimg:hover .gramcrackerimg2 { opacity:1; }
.gramcrackerimg2 i { padding-left:7px; }
.gramcrackerbot {    background-color: #b5b5b5;    color: #ffffff;    text-shadow: 1px 1px 0px rgba(0,0,0,.1);    height: 30px;    padding: 25px;}
.gramcrackerbot1 { float:left;background-color:#ffffff;border-radius:3px;font:bold 10px Roboto;line-height:10px;padding:10px;color:#777777;text-shadow:none;cursor:pointer; }
.gramcrackerbot1 i { color:#7d90b5;margin-right:7px; }
.gramcrackerbot2, .gramcrackerbot3 { float:right;font-size:25px;line-height:25px!important;border-left:solid 1px rgba(255,255,255,.2);height:25px;margin:-5px 0px -5px 20px;padding:8px 0px 9px 20px;cursor:pointer; }
.gramcrackerbot3 { border:none; }
</style>