Vorlage - Instagram - Druckversion

Code:

<link rel="stylesheet" type="text/css" href="http://eightletters.de/Instagram/instagram.css">

 <center>

 <div id="leiste"></div>

 <div id="hbg"><div style="height: 25px;"></div>

 <table cellspacing="0" cellpadding="0"><tr><td>

 <table cellspacing="0" cellpadding="0">

 <tr><td id="bild1" style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 <tr><td id="bild2"style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 </table></td>

 <td id="bild3" style="background-image: url('http://placehold.it/200x200');" ><div class="hover"</div></td>

 <td><table cellspacing="0" cellpadding="0">

 <tr><td id="bild4" style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 <tr><td id="bild5" style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 </table>

 </td>

 <td><table cellspacing="0" cellpadding="0">

 <tr><td id="bild6" style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 <tr><td id="bild7" style="background-image: url('http://placehold.it/100x100');" ><div class="hover"</div></td></tr>

 </table>

 </td>

 </tr>

 </table></div>

 <div id="ibg"><div id="pbg"><div id="profilbild"><img src="http://placehold.it/90x90" style="height: 90px; width: 90px; border-radius: 3px;">

 <a href="http://storming-gates.de/member.php?action=profile&uid=2" target="blank_"><img src="http://eightletters.de/Instagram/folgen.jpg" style="margin-top: 5px; border: 0px"></a></div><span class="username">username</span><br /><span class="rname">Vorname Nachname</span><div id="menui"><table><tr><td style="width: 33%; border-right: 1px solid #cccccc;"><center><span class="gross">xxx</span>

 <span class="klein">posts</span></center></td>

 <td style="width: 33%; border-right: 1px solid #cccccc; padding: 5px;"><center><span class="gross">xxx</span>

 <span class="klein">followers</span></center></td>

 <td style="width: 33%"><center><span class="gross">xxx</span>

 <span class="klein">following</span></center></td>

 </tr></table></div></div></div></center>

 

 <style text="text/css">.username { font-size: 21px; color: #111111; font-family: 'Helvetica'; position: relative; bottom: 120px; right: 55px;} /*

 

 */ .rname { font-size: 13px; color: #111111; font-family: 'Arial'; position: relative; bottom: 120px; right: 55px; font-weight: bold; letter-spacing: -1px;} /*

 

 */ #bild1 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild2 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild3 .hover { width: 200x; height: 200px; background-image: url('http://placehold.it/200x200');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild4 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild5 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild6 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; } /*

 

 */ #bild7 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

 </style>

Code:

<link rel="stylesheet" type="text/css" href="http://eightletters.de/Instagram/instagram.css">

 <center><div class="leisteb"></div>

 <div class="bbg">

 <div class="busername"><table><tr><td><img src="http://placehold.it/45x45" style="height: 45px; width: 45px"></td><td><span class="gross" style="color: #4a789a;">Username</span><br /><a href="http://storming-gates.de/member.php?action=profile&uid=2" target="blank_"><img src="http://eightletters.de/Instagram/folgen.jpg" style="border: 0px"></a></td><td style="width: 300px; text-align: right; padding-right: 10px;"><span class="kleinb" style="color:#999999;">vor xx Tagen</span></td></tr></table></div>

 <img src="http://placehold.it/430x430" style="height: 430px; width: 430px;">

 <div class="blikes"><span style="color: #999999; font-size: 15px;"> &hearts;</span> <span class="kleinb" style="color: #4a789a;">xxx Likes</span>

 <span class="kleinb" style="font-weight: normal; color: #000000"><span class="blau">Username</span> Hier könnt ihr eine Beschreibung posten. Hier können dann aber auch <span class="blau">#tags</span> stehen.</span></div>

 </div>

 </center>