твиттер
Код:
<!--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>



