Kód:
<style>
@font-face {
font-family: 'western_bang_bangregular';
src: url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.eot');
src: url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.eot?#iefix') format('embedded-opentype'),
url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.woff2') format('woff2'),
url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.woff') format('woff'),
url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.ttf') format('truetype'),
url('http://kal.b1.jcink.com/uploads/kal/Western/western_bang_bang_webfont.svg#western_bang_bangregular') format('svg');
font-weight: normal;
font-style: normal; }
#sopabucontainer { width: 350px; height: 300px; padding: 25px; overflow: hidden;}
#sopabucontainer .sopabu { width: 330px; height: 250px; }
#sopabucontainer .sopabu02 { width: 330px; height: 250px; overflow: hidden; }
#sopabucontainer input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; display: none;}
#sopabucontainer label { cursor: crosshair; }
#sopabucontainer .sopabusub { width: 330px; height: 250px; }
#sopabucontainer input[type=checkbox]:checked ~ .sopabusub02 { opacity: 1; z-index: 1; top: -220px; }
#sopabucontainer .sopabuname { background-color: #978572; width: 320px; height: 20px; padding: 5px; }
#sopabucontainer .sopabuname02 { font-family: 'western_bang_bangregular'; padding: 5px; color: #fff; font-size: 22px; letter-spacing: 3px; text-transform:capitalize; }
#sopabucontainer .sopabusub02 { opacity: 0; background-image:url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1492501302_39.jpg); width: 330px; height: 250px; overflow: auto; position: relative; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; overflow: hidden; top: 0px; bottom: 0px; left: 0px; right: 0px; }
#sopabucontainer .sopabusubtext { padding: 20px; font-family: times; font-size: 9px; color: #000; text-align: justify; }
.sopabusubtext b { font-size: 11px; color: #1891B1; letter-spacing: 1px; }
.sopabusubtext i { font-size: 11px; color: #7FC7AF; letter-spacing: 1px; }
.sopabuhobandesc::-webkit-scrollbar { width: 8px; height: 5px; }
.sopabuhobandesc::-webkit-scrollbar-track { background-color: #fff; }
.sopabuhobandesc::-webkit-scrollbar-thumb { background-color: #f9f0e4; }
#sopabucontainer .sopabulink1 { width: 56px; height: 30px; background-color: #a87a6c; color: #fff; font-family: times; font-styling: italics; padding: 3px; text-align: center; line-height: 250%; margin-right: 3px;}
#sopabucontainer .sopabulink2 { width: 56px; height: 30px; background-color: #9f917b; color: #fff; font-family: times; font-styling: italics; padding: 3px; text-align: center; line-height: 250%; margin-right: 3px; }
#sopabucontainer .sopabulink3 { width: 56px; height: 30px; background-color: #a47a7c; color: #fff; font-family: times; font-styling: italics; padding: 3px; text-align: center; line-height: 250%; margin-right: 3px;}
#sopabucontainer .sopabulink4 { width: 56px; height: 30px; background-color: #8e7873; color: #fff; font-family: times; font-styling: italics; padding: 3px; text-align: center; line-height: 250%; margin-right: 3px;}
#sopabucontainer .sopabulink5 { width: 56px; height: 30px; background-color: #8f7383; color: #fff; font-family: times; font-styling: italics; padding: 3px; text-align: center; line-height: 250%; }
#sopabucontainer .sopabuhoban { opacity: .8; width: 140px; height: 20px; overflow: auto; float: left; font-family: 'western_bang_bangregular'; font-size: 20px; padding: 3px; background-color: #fff; margin: 2px; letter-spacing: 3px; color: #978572; text-align: center; }
#sopabucontainer .sopabuhobandesc { opacity: .7; float: left; width: 140px; height: 145px; overflow: auto; color: #000; font-family: times; padding: 3px; background-color: #fff; margin-left: 2px; margin-top: -2px; }
#sopabucontainer .sopabuhobanbox { width: 295px; height: 190px; padding: 2px; margin-bottom: 10px;}
</style>
<center>
<div id="sopabucontainer">
<div class="sopabu">
<label for="sopabutogglesig-1">
<div class="sopabuname"><div class="sopabuname02">
Katints!Katints!
</div></div>
</label>
<div class="sopabu02" style="background-image:url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1491895065_29.jpg);"></div>
</div>
<div class="sopabusub">
<input type="checkbox" id="sopabutogglesig-1">
<div class="sopabusub02">
<div class="sopabusubtext">
<div class="sopabuhobanbox">
<div class="sopabuhoban">Site Info</div>
<div class="sopabuhobandesc">Portálépítés és portáldíszítés kezdoknek és haladóknak!Rengetek leírás, scriptek , CSS ,HTML kódok!Nézz be te is! 2005.04.12.-én indult az oldal azóta várom a segítségre szoruló G-portálos.Ha bármi észrevételed van írhatsz e-mailt virag-78@gportal.hu vagy írhatsz a vendégkönyv be,meg a chat-be is.TANULJ,SZÉPÍTSD az oldaladat de a legfontosabb hogy közbe jól érezd magad!
Virág</div>
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1491149420_15.jpg", resizes" style="opacity: .7; width: 120px; margin-top: -10px; float: right; border-radius: 50%; border: 5px solid #978572;"></img>
</div>
<table border="0" style="width:100%; margin-left: -16px; margin-top: -14px;" cellpadding="0" cellspacing="0px">
<tr>
<td><a href="//jegvirag.gportal.hu/gindex.php?pg=36883089"><div class="sopabulink1">Főoldal</div></a></td>
<td><a href="//jegvirag.gportal.hu/gindex.php?pg=36644039"><div class="sopabulink2">Script</div></a></td>
<td><a href="//jegvirag.gportal.hu/gindex.php?pg=36675094"><div class="sopabulink3">Design</div></a></td>
<td><a href="http://users2.smartgb.com/g/g.php?a=s&i=g26-33486-46"><div class="sopabulink4">Vendi</div></a></td>
<td><a href="//jegvirag.gportal.hu"><div class="sopabulink5">credit</div></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</center>