Test Instagram

<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">.zinstabox { width: 450px; text-align: left; background-color: #fafafa; border: 1px solid #eee; box-shadow: 4px 4px 0 #eee; line-height: 80%; } .zinstalogo { background-color: #fff; width: 400px; height: 30px; padding: 10px 25px 7px; background-image: url(https://i.imgbox.com/tldQusAq.png); background-repeat: no-repeat; background-position: left; background-size: 120px 30px; } .zinstabar { color: #aaa; background-color: #fafafa; width: 70px; padding: 3px 15px; font-size: 8px; font-family: roboto; font-weight: 400; letter-spacing: .5px; margin-top: 4px; float: right; border-radius: 10px; border: 1px solid #eee; line-height: 10px; } .zinstabio { padding: 25px; height: 80px; color: #333; font-family: roboto; font-weight: 300; font-size: 10px; } .zinstabio img { position: relative; left: 15px; float: left; margin-right: 50px; width: 80px; height: 80px; border-radius: 100%; } .zinstaname { margin-top: 10px; font-size: 13px; letter-spacing: .5px; } .zinstaname:after { content: "FOLLOWING"; margin-left: 10px; font-size: 7px; font-weight: 700; padding: 4px 12px; border: 1px solid #5fa1dd; color:#5fa1dd; border-radius: 3px; position: relative; top: -3px; } .zinstastat { margin-right: 15px; } .zinstapics {width: 380px; padding: 10px 8px; background-color: #fff; border: 1px solid #eee; border-radius: 5px; margin: 0 auto; } .zinstapic1, .zinstapic2 {width: 120px; height: 120px; background-size: 120px; background-repeat: no-repeat; background-position: center; overflow: hidden; } .zinstapic2 { margin-left: 5px; } .zcredit { margin-top: 10px; width: 30px; background-color: #fff; border: 1px solid #eee; box-shadow: 3px 3px 0 #eee; padding: 2px 5px; text-align: center;  cursor: pointer; } .zcredit a { font-family: montserrat; font-size: 10px; font-weight: 800; color: #dbdbdb;}</style>
<center><div class="zinstabox"><div class="zinstalogo"><div class="zinstabar">Search</div></div><div class="zinstabio"><img src="https://image.noelshack.com/fichiers/2018/13/3/1522266267-100x1002.png"> <div class="zinstaname">yourusername</div>
insta bio. keep it to one-two lines.
 
<span class="zinstastat"><b>###</b> posts</span><span class="zinstastat"><b>###</b> followers</span><span class="zinstastat"><b>###</b> following</span></div>
   
<div class="zinstapics"><table align="center" cellspacing="0"><tr><td><div class="zinstapic1" style="background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td></tr><tr><td><div class="zinstapic1" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td></tr><tr><td><div class="zinstapic1" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td><td><div class="zinstapic2" style="margin-top: 5px; background-image: url(https://image.noelshack.com/fichiers/2018/13/3/1522266410-150x150.png);"></div></td></tr></table></div>

</div><div class="zcredit"> &nbsp; <a href="http://sonderx.jcink.net/index.php?showuser=165"> z。</a> </div></center>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'><style type="text/css">.zinstapost { width: 400px; text-align: left; background-color: #fff; border: 1px solid #eee; box-shadow: 4px 4px 0 #eee; line-height: 120%; } .zinstascout { padding: 10px 20px; min-height: 30px; font-family: roboto; font-size: 12px; text-align: left; } .zinstadesc { padding: 20px 25px; border-top: 1px solid #eee; font-family: roboto; font-size: 10px; text-align: justify; } .zinstapost b { font-weight: 700; color: #13527f; } .zinstapost i { font-style: normal; color: #13527f; } .zinstasuser { width: 30px; height: 30px; border-radius: 100%; margin-right: 7px; float:left; }</style>
<center><div class="zinstapost"><div class="zinstascout"><img src="https://image.noelshack.com/fichiers/2018/13/3/1522267042-30x30.png" class="zinstasuser"> <b>yourusername</b> <br> 4 minutes ago</div><img src="https://image.noelshack.com/fichiers/2018/13/3/1522267148-400x400.png" style="width: 400px;"><div class="zinstadesc"><b>yourusername</b> post description. <i>#hashtag</i></div></div>
</center>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'><style type="text/css">.zinstacomm { width: 260px; padding: 20px; background-color: #fff; border: 1px solid #eee; box-shadow: 4px 4px 0 #eee; line-height: 120%; font-family: roboto; font-size: 10px; text-align: justify; } .zinstacomm b { font-weight: 700; color: #13527f; } .zinstauser { width: 50px; height: 50px; border-radius: 100%; margin-right: 7px; float:left; } .zinstaimg { width: 50px; height: 50px; float: right; } .zinstaent { width: 145px; height: 50px; overflow: hidden; display: inline-block; }</style><center><div class="zinstacomm"><img src="https://image.noelshack.com/fichiers/2018/13/3/1522267348-50x50.png" class="zinstauser">  <div class="zinstaent"> <b>commenterusername</b> comment here. </div> <img src="https://image.noelshack.com/fichiers/2018/13/3/1522267348-50x50.png" class="zinstaimg"></div></center>