твиттер
Код:
<!--HTML--><style type="text/css"> .merc_chirp { width: 500px; margin: 25px auto; -webkit-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); -moz-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .merc_chirp2 { width: 460px; padding: 20px; background-color: #23afbb; color: #fff; text-align: center; font-family: open sans condensed; font-size: 14px; } .merc_chirp3 { width: 500px; margin: auto; height: 200px; background-image:url(http://placehold.it/500x200); position: relative; z-index: 2; } .merc_chirp4 { width: 500px; overflow: hidden; background-color: #dcdcdc; } .merc_chirp5 { width: 150px; padding: 10px; background-color: #fbfbfb; margin-left: 10px; margin-top: -1px; position: relative; } .merc_chirp6 { width: 200px; padding: 10px; background-color: #fbfbfb; margin-left: 10px; margin-top: -1px; padding-bottom: 30px; } .merc_chirp7 { width: 100px; height: 100px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.8); background-image:url(http://placehold.it/100x100); margin-left: 50px; z-index: 4; top: 150px; position: relative; } .merc_chirp8 { font-family: open sans; font-size: 9px; text-align: justify; padding: 10px; color: #191919; line-height: 115%; padding-top: 50px; } .merc_chirp8 h1 { font-size: 11px; letter-spacing: 1px; color: #23afbb; } .merc_chirp9 { padding: 7px; font-family: open sans; font-size: 10px; text-align: center; padding-top: 5px; width: 50px; float: left; background-color: #fbfbfb; } .merc_chirp9 h1 { float: left; font-size: 10px; margin-top: 0px; margin-right: 2px; color: #23afbb; } .merc_chirp10 { width: 65px; height: 65px; background-image:url(http://placehold.it/65x65); } .merc_chirp11 { width: 200px; margin: auto; } /*** CHEEP ***/ .merc_cheep { width: 200px; padding: 20px; background-color: #dcdcdc; margin: 25px auto; -webkit-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); -moz-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); } .merc_cheep2 { padding: 10px; background-color: #fbfbfb; padding-top: 15px; } .merc_cheep3 { padding-top: 3px; } .merc_cheep4 { font-family: open sans; font-size: 9px; text-align: justify; padding: 10px; color: #525252; line-height: 95%; } .merc_cheep4 h1 { font-size: 11px; letter-spacing: 1px; color: #23afbb; margin-top: 8px; margin-bottom: 5px; } .merc_cheep5 { width: 50px; height: 50px; background-image:url(http://placehold.it/50x50); float: left; margin-right: 10px; margin-top: -10px; } .merc_cheep6 { font-family: open sans; font-size: 12px; text-align: justify; padding: 20px; color: #191919; line-height: 95%; } .merc_cheep7 { padding-left: 10px; padding-right: 10px; padding-bottom: 5px; background-color: #fbfbfb; text-align: center; word-spacing: 100px; } .merc_cred { text-align: center; font-family: calibri; font-size: 7px; text-transform: uppercase; } </style> <div class="merc_chirp"> <div class="merc_chirp2"><img src="http://i.imgur.com/xhd6gvE.png"> Twitter</div> <div class="merc_chirp3" style="background-image:url(http://placehold.it/500x200);"> <div class="merc_chirp7" style="background-image:url(http://placehold.it/100x100);"></div> </div> <div class="merc_chirp4"><table><tr valign="top"><td> <div class="merc_chirp5"> <div class="merc_chirp8"> <h1>@username</h1> статус </div> </div></td><td> <div class="merc_chirp6"> <div class="merc_chirp9"><h1>100</h1> Following<br /></div> <div class="merc_chirp9"><h1>100</h1> Followers<br /></div> <div class="merc_chirp9"><h1>100</h1> Favorites<br /></div> <div class="merc_chirp11"> <table><tr valign="top"> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td></tr><tr valign="top"> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td> <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td> </tr></table> </div> </div></td></tr></table> </div> </div>