Код:
<!--HTML--> <center><style> .shipwrecked { position: relative; width: 400px; height: 400px; } .allyouever { float: left; } .allyouever label { display: block; width: 55px; padding: 10px; position: relative; top: 400px; background-color: #7f8c91; color: #ECF1F2; font-size: 8px; text-transform: uppercase; font-family: helvetica; letter-spacing: 2px;} .allyouever [type=radio] { display: none; width: 60px; } .didwaswreckme { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #ECF1F2; padding: 0px 10px 0px 10px; height: 320px; width: 320px; font-family: arial; font-size: 10px; text-align: justify; overflow: auto; line-height: 150%; border: 10px solid #ECF1F2; border-top: 20px solid #ECF1F2; border-bottom: 20px solid #ECF1F2; } .didwaswreckme::-webkit-scrollbar { width: 7px; } .didwaswreckme::-webkit-scrollbar-track { background-color: #dddddd; } .didwaswreckme::-webkit-scrollbar-thumb { background-color: #A296A9; } .allyouever [type=radio]:checked ~ label { background-color: #A296A9; color: #ECF1F2; z-index: 2;} .allyouever [type=radio]:checked ~ label ~ .didwaswreckme { z-index: 1; } .inevermeant { width: 95px; padding: 15px 10px 15px 10px; background-color: #A296A9; color: #ECF1F2; text-align: center; font-size: 8px; text-transform: uppercase; font-family: helvetica; letter-spacing: 2px; opacity: 0.8; margin-left: 10px; position: relative; top: 280px; left: 30px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out;} .tostartawar { width: 280px; padding: 20px; background-color: #A296A9; color: #ECF1F2; text-align: center; font-size: 8px; text-transform: uppercase; font-family: helvetica; letter-spacing: 2px; opacity: 0.8; position: relative; top: 220px; left: 0px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out;} #ijustwantedyou { width: 320px; height: 320px; background-image: url(http://placehold.it/320x320); overflow: hidden;} #ijustwantedyou:hover .tostartawar { width: 200px; position: relative; left: 40px; top: 40px; } #ijustwantedyou:hover .inevermeant { position: relative; top: 50px; } .breakyourwalls { width: 240px; height: 10px; background-color: #A296A9; opacity: 0.8; position: relative; top: 290px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; left: 40px; padding: 10px 0px 10px 0px; } #ijustwantedyou:hover .breakyourwalls { position: relative; top: 60px; left: 40px; } .killinthese { width: 275px; padding: 20px; background-color: #7f8c91; color: #ECF1F2; text-align: center; font-size: 8px; text-transform: uppercase; font-family: helvetica; letter-spacing: 2px; } </style> <div style="width: 360px; height: 360px; padding: 20px; background-color: #705083;"> <div class="shipwrecked"> <div class="allyouever"><input type="radio" id="allyouever-1" name="allyouever-group-1" checked=""> <label for="allyouever-1">basics</label> <div class="didwaswreckme"> <div id="ijustwantedyou"> <div class="tostartawar">first middle last</div> <table cellpadding="0" cellspacing="0"><tbody><tr><td><div class="inevermeant">nickname</div></td><td><div class="inevermeant">sexuality</div></td></tr></tbody></table> <table cellpadding="0" cellspacing="0"><tbody><tr><td><div class="inevermeant" div="" style="width: 125px; margin-top: 10px;">member group</div></td><td><div class="inevermeant" div="" style="width: 65px; margin-top: 10px;">age</div></td></tr></tbody></table> <table cellpadding="0" cellspacing="0"><tbody><tr><td><div class="inevermeant" div="" style="margin-top: 10px;">trait</div></td><td><div class="inevermeant" div="" style="margin-top: 10px;">trait</div></td></tr></tbody></table> <div class="breakyourwalls"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="240" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#A296A9"><param name="FlashVars" value="mp3=http://a.tumblr.com/tumblr_mu2dce2e9m1rpeorto1.mp3&buttoncolor=ECF1F2&slidercolor=ECF1F2&loadingcolor=ECF1F2"></object> </div></div> </div></div> <div class="allyouever"><input type="radio" id="allyouever-2" name="allyouever-group-1"> <label for="allyouever-2" style="margin-left: 20px;">Friends</label> <div class="didwaswreckme"> <div class="killinthese">our hearts in vain</div><div style="width: 320px; height: 10px;"></div> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words </div></div> <div class="allyouever"><input type="radio" id="allyouever-3" name="allyouever-group-1"> <label for="allyouever-3" style="margin-left: 20px;">lovers</label> <div class="didwaswreckme"><div class="killinthese">i fell under your spell</div><div style="width: 320; height: 10;"></div> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words </div></div> <div class="allyouever"><input type="radio" id="allyouever-4" name="allyouever-group-1"> <label for="allyouever-4" style="margin-left: 20px;">enemies</label> <div class="didwaswreckme"><div class="killinthese">you let me burn</div><div style="width: 320; height: 10;"></div> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words <div style="text-align: right; text-transform: uppercase; padding-top: 5px;"><a href="http://shine.b1.jcink.com/index.php?showuser=5438">thanks emilie!</a></div> </div></div> </div></div> </center>