Код:
<style>
.beachcontainer {
width: 510px;
height: 400px;
background-color: #EDEDED;
padding: 10px;
}
.leftdiv {
width: 200px;
float: left;
background-image: url(http://se.uploads.ru/jC4Nu.gif);
height: 400px;
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
.leftdiv:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
opacity: 1;
}
.infodiv {
opacity: 0;
width: 180px;
height: 390px;
text-align: left;
font-family: century gothic;
font-size: 10px;
color: white;
padding: 20px;
padding-top: 170px;
transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
.infodiv:hover {
opacity: 1;
}
.rightdiv {
float: right;
height: 400px;
width: 290px;
}
.h1beach {
text-align: right;
padding-right: 10px;
margin-bottom: 0px;
font-style: italic;
letter-spacing: 4px;
text-transform: lowercase;
font-family: Times New Roman, Times;
font-size: 20px;
color: #75bfe1;
border: 0px;
float: right;
}
.h2beach {
background: none;
text-align: right;
padding-right: 5px;
letter-spacing: 8px;
font-family: Century Gothic;
font-variant: small-caps;
color: #b98944;
border: 0px;
margin-top: 0px;
font-size: 9px;
float: right;
}
.beach::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
.beach::-webkit-scrollbar-thumb { background-color: #bbc26e;}
b.beach {
background-color: black;
line-height: 16px;
font-size: 11px;
font-weight: bolder;
}
a.beachcredit, .beachcredit {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 9px;
font-family: century gothic;
text-align: right;
}
a.beachcredit {
color:#75bfe1;
}
.beachcredit {
color: #333;
}
a.beachcredit:hover {
color: #bbc26e;
}
</style>
<center>
<div style="width:520px;">
<div class="beachcontainer">
<div class="leftdiv">
<div class="infodiv">
<b class="beach">TAGS:</b> beach, breeze, summer<br>
<b class="beach">Word Count:</b> ###
</div>
</div>
<div class="rightdiv">
<span class="h1beach">i need you;</span><br>
<span class="h2beach">поиск нужных персонажей</span><br>
<div style="width:280px; height: 300px; float: left; overflow: auto; padding: 5px; text-align: left; color: #333; font-family: century gothic; font-size: 13px; letter-spacing: 2px; line-height: 16px; margin-bottom: 10px;" class="beach">
<center><p>Это люди, кажущиеся нам наивными, намного более чувствительны к этому миру. Нам бы, циникам, учиться у них смотреть на мир непредвзятым взглядом ребёнка, воспринимать его интуитивно-честно, не боясь повторится в своих идеях, а мы смеёмся над банальностью слов, слепые и потерявшие что-то важное.</p>
<p><b>ШАБЛОН ОФОРМЛЕНИЯ ЗАЯВКИ - СВОБОДНЫЙ</b></p></center>
</div>
<table height=50>
<tr>
<td width=50 bgcolor=#d3b891></td>
<td width=10></td>
<td width=50 bgcolor=#b98944></td>
<td width=10></td>
<td width=50 bgcolor=#bbc26e></td>
<td width=10></td>
<td width=50 bgcolor=#2b80a7></td>
<td width=10></td>
<td width=50 bgcolor=#75bfe1></td>
</tr>
</table>
</center>
вот это поворот, правда? никто не ожидал.
