Kód:
<style>
.beachcontainer {
width: 500px;
height: 400px;
background-color: #FDFED6;
padding: 10px;
}
.leftdiv {
width: 200px;
float: left;
background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1488386965_49.jpg);
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: #000000;
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: #bbc26e;
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">site:</b> jegvirag.gportal.hu<br>
<b class="beach">design:</b> JégVirág
</div>
</div>
<div class="rightdiv">
<span class="h1beach">JégVirág Design</span><br>
<span class="h2beach">jegvirag.gportal.hu</span><br>
<div style="width:280px; height: 300px; float: left; overflow: auto; padding: 5px; text-align: left; color: #000000; font-family: century gothic; font-size: 10px; letter-spacing: 2px; line-height: 16px; margin-bottom: 10px;" class="beach">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus nisi id sodales hendrerit. Mauris sollicitudin augue vel diam congue, ac bibendum enim venenatis. Praesent consectetur enim at massa cursus lobortis. Maecenas sed ipsum blandit, vehicula nisl eu, tincidunt nulla. Nullam ultrices, leo quis aliquet tincidunt, mauris est molestie purus, id rutrum sem enim sit amet est.</p>
<p>Suspendisse nec diam ut enim ultrices sollicitudin fermentum ac leo. Fusce at tellus consequat, ullamcorper sem at, molestie ipsum. Mauris eu nibh et odio blandit bibendum et a sapien. Sed ut metus turpis. Maecenas ultricies, risus at hendrerit semper, sem risus mollis nisi, sit amet sodales orci nulla non risus. Praesent blandit, sapien tincidunt pellentesque imperdiet, erat ipsum tincidunt nisl, vel ornare arcu elit quis sem. Pellentesque ac ipsum id ligula pellentesque interdum id quis metus. Suspendisse dictum suscipit turpis sit amet placerat. Aliquam neque nisi, auctor sed risus et, faucibus condimentum libero. Ut imperdiet orci quis metus lacinia, eget lacinia ligula mollis.</p>
<p>Praesent posuere neque semper tincidunt imperdiet. Suspendisse faucibus malesuada diam at porta. Integer sed neque urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sit amet est et eros rhoncus mattis. Phasellus posuere justo mauris, et egestas augue interdum condimentum. Duis vitae mauris et mi rhoncus placerat id facilisis orci. In rutrum, arcu vel pretium facilisis, lorem odio pharetra lorem, eu venenatis nisl felis at nisi. Pellentesque ultrices magna urna, id accumsan massa tempus vitae. Morbi non porta nulla. Quisque orci augue, pellentesque sit amet laoreet eu, imperdiet consectetur ipsum.</p>
</div>
<table height=40>
<tr>
<td width=50 bgcolor=#FA929B></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=#F49DE4></td>
<td width=10></td>
<td width=50 bgcolor=#75bfe1></td>
</tr>
</table>
</div>
</div>
</div>
</center>
AJÁNLOM AZ OLDALT
Archívum