[html]<style>.bunnies {
position: relative;
width: 350px;
height: 475px;
background: transparent;
margin-top: 10px;
}
.bunny {
float: left;
}
.bunny [type=radio] {
display: none;
}
[type=radio]:checked ~ label {
color: #4e4546;
background-color: #ededed;
z-index: 2;
transition: 1s ease;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;
text-decoration: none;
}
.bunny label {
display: block;
width: 25px;
height: 25px;
text-align: center;
font-family: jost;
font-size: 11px;
color: #4e4546;
background: transparent;
padding: 5px;
border-radius: 25px;
margin-right: 15px;
margin-top: -3px;
line-height: 25px;
transition: 1s ease;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;
text-decoration: underline;
}
.bunnycontent {
position: absolute;
background: #f5f5f5;
top: 40px;
left: -164px;
width: 670px;
height: 403px;
overflow: auto;
color: black;
}
[type=radio]:checked ~ label ~ .bunnycontent {
z-index: 1;
}
.hshprest {
width: 667px;
height: 400px;
border-radius: 20px;
border: 1px solid #e4e4e4;
position: relative;
}
.prestleft {
width: 286px;
border-right: 1px solid #e4e4e4;
height: 400px;
position: absolute;
display: block;
}
.prestlefttable {
width: 190px;
position: absolute;
display: inline;
top: 72px;
left: 50px;
}
.lefttablezag {
font-family: jost;
font-weight: bold;
color: #494949;
font-size: 13px;
letter-spacing: 0.4px;
text-transform: lowercase;
}
.lefttableopis {
font-family: jost;
color: #bebebe;
text-transform: lowercase;
font-size: 11px;
letter-spacing: 0.4px;
line-height: 12px;
}
.prestrighttable {
width: 320px;
position: absolute;
display: block;
left: 317px;
padding-top: 30px;
}
.righttablezag {
font-family: jost;
font-weight: bold;
font-size: 18px;
letter-spacing: 0.4px;
text-align: center;
}
.righttablesong {
color: #969696;
font-family: jost;
font-size: 11px;
text-align: center;
}
.prestrightinfo {
text-align: justify;
margin-top: 10px;
color: #b9b9b9;
font-family: 'Jost';
text-transform: lowercase;
font-size: 10px;
letter-spacing: 0.4px;
margin-bottom: 10px;
}
.prestrightplashka {
background: #ededed;
width: 200px;
text-align: center;
padding: 10px 0px 10px 0px;
border-radius: 12px;
margin-left: 10px;
margin-top: 15px !important;
}
.righttable2 {
width: 250px;
margin-left: 10px;
MARGIN-TOP: 5PX;
}
.righttablegraff {
background: #ededed;
padding: 5px;
border-radius: 15px;
}
.righttableicon {
PADDING: 5PX;
BACKGROUND: #ededed;
BORDER-RADIUS: 15PX;
}
.righttablemoney {
PADDING: 5PX;
BACKGROUND: #ededed;
BORDER-RADIUS: 15PX;
FONT-FAMILY: JOST;
FONT-SIZE: 11PX;
PADDING-TOP: 12PX;
PADDING-BOTTOM: 12PX;
FONT-WEIGHT: BOLD;
TEXT-ALIGN: CENTER;
LETTER-SPACING: 0.4PX;
}</style>
<center>
<link href="https://fonts.googleapis.com/css?family=Alegreya|Nunito" rel="stylesheet">
<div class="bunnies">
<div class="bunny" style="margin-left: 105px">
<input type="radio" id="bunny-1" name="bunny-group-1" checked="">
<label for="bunny-1" style="font-size: 120%;">1.</label>
<div class="bunnycontent" style="overflow: hidden">
<div class="hshprest">
<div class="prestleft">
<div class="prestlefttable">
<table>
<tbody><tr><td><img src="https://i.imgur.com/EK9R8yc.png"></td><td><div class="lefttablezag">балаклава</div> <div class="lefttableopis">трое суток носить маску персонажа-преступника</div></td></tr>
<tr><td><img src="https://i.imgur.com/0hYdOt5.png"></td><td><div class="lefttablezag">грязные деньги</div> <div class="lefttableopis">потратить в банке 350$ на пакости</div></td></tr>
<tr><td><img src="https://i.imgur.com/l18hLrU.png"></td><td><div class="lefttablezag">взлом сигнализации</div> <div class="lefttableopis">поучаствовать в любых пяти конкурсах</div></td></tr>
<tr><td><img src="https://i.imgur.com/AJsuw79.png"></td><td><div class="lefttablezag">хранилище</div> <div class="lefttableopis">30 сообщений во флуде предлагать игрокам ограбить банк</div></td></tr>
<tr><td><img src="https://i.imgur.com/cR6FiQl.png"></td><td><div class="lefttablezag">заложники</div> <div class="lefttableopis">угрожать кому-нибудь расправой в посте</div></td></tr>
</tbody></table>
</div>
</div>
<div class="prestright">
<div class="prestrighttable">
<table>
<tbody><tr><td width="10%"><img src="https://i.imgur.com/d5f1wdk.png"></td><td><div class="righttablezag">идеальное ограбление</div><div class="righttablesong"> < the boyz - stealer > </div></td></tr>
</tbody></table>
<div class="prestrightinfo">
сохраняйте спокойствие, поднимите руки, вот так, как при ограблении. очень хорошо. дамы и господа, меня зовут палермо, у меня для вас две новости: хорошая и плохая. плохая в том, что банк испании подвергся атаке. а хорошая - напали на него мы!
</div>
<div class="prestrightplashka"><img src="https://i.imgur.com/ck1YWuO.png"></div>
<div class="righttable2"><table>
<tbody><tr><td valign="top"><div class="righttablegraff"><img src="https://i.imgur.com/WEuXDKD.png"></div></td><td valign="top"><div class="righttableicon"><img src="https://i.imgur.com/njAQ6ei.png"></div> <br> <div class="righttablemoney">500$</div></td></tr>
</tbody></table></div>
</div>
</div>
</div>
</div>
</div>
<div class="bunny">
<input type="radio" id="bunny-2" name="bunny-group-1">
<label for="bunny-2">2.</label>
<div class="bunnycontent">
<div class="hshprest">
<div class="prestleft">
<div class="prestlefttable">
<table>
<tbody><tr><td><img src="https://i.imgur.com/aVfm1Ri.png"></td><td><div class="lefttablezag">выбор жертвы</div> <div class="lefttableopis">обмануть кого-то в снс и не признаться</div></td></tr>
<tr><td><img src="https://i.imgur.com/snnV570.png"></td><td><div class="lefttablezag">анонимный звонок</div> <div class="lefttableopis">составить топ-10 злодейских песен</div></td></tr>
<tr><td><img src="https://i.imgur.com/JsNxVjF.png"></td><td><div class="lefttablezag">взлом кредитки</div> <div class="lefttableopis">получить 3 плашки от других игроков</div></td></tr>
<tr><td><img src="https://i.imgur.com/upVc9SW.png"></td><td><div class="lefttablezag">сокрытие улик</div> <div class="lefttableopis">трое суток носить маску персонажа-преступника</div></td></tr>
<tr><td><img src="https://i.imgur.com/z6mxzDx.png"></td><td><div class="lefttablezag">покинуть страну</div> <div class="lefttableopis">оставить 30 реклам</div></td></tr>
</tbody></table>
</div>
</div>
<div class="prestright">
<div class="prestrighttable">
<table>
<tbody><tr><td width="10%"><img src="https://i.imgur.com/d5f1wdk.png"></td><td><div class="righttablezag">крупное мошенничество</div><div class="righttablesong"> < rihanna — bitch better have my money > </div></td></tr>
</tbody></table>
<div class="prestrightinfo">
власть людям дает вовсе не полицейский жетон и не оружие, власть людям дает ложь. и чем больше эта ложь, тем большей властью ты обладаешь. если ты всех заставил поверить в то, что является ложью, — вот тогда это власть. если ради кого-то будут врать, ради того, чтобы всё, во что верят, не развалилось как карточный домик, — у тебя власть.
</div>
<div class="prestrightplashka"><img src="https://i.imgur.com/z10HpQq.png"></div>
<div class="righttable2"><table>
<tbody><tr><td valign="top"><div class="righttablegraff"><img src="https://i.imgur.com/Po75udm.png"></div></td><td valign="top"><div class="righttableicon"><img src="https://i.imgur.com/KPhwOc1.png"></div> <br> <div class="righttablemoney">500$</div></td></tr>
</tbody></table></div>
</div>
</div>
</div>
</div>
</div>
<div class="bunny">
<input type="radio" id="bunny-3" name="bunny-group-1">
<label for="bunny-3">3.</label>
<div class="bunnycontent">
<div class="hshprest">
<div class="prestleft">
<div class="prestlefttable">
<table>
<tbody><tr><td><img src="https://i.imgur.com/3gYDLlb.png"></td><td><div class="lefttablezag">подготовка</div> <div class="lefttableopis">составить топ-10 сериалов про убийц</div></td></tr>
<tr><td><img src="https://i.imgur.com/dKy3zBG.png"></td><td><div class="lefttablezag">преследование</div> <div class="lefttableopis">поставить 100 плюсов с текстом «ты мой»</div></td></tr>
<tr><td><img src="https://i.imgur.com/xDPx9lA.png"></td><td><div class="lefttablezag">поймать жертву</div> <div class="lefttableopis">подарить 3 граффити разным людям</div></td></tr>
<tr><td><img src="https://i.imgur.com/NnwR4a7.png"></td><td><div class="lefttablezag">убийство</div> <div class="lefttableopis">написать во флуде пять причин вашей ненависти</div></td></tr>
<tr><td><img src="https://i.imgur.com/VrGNTSs.png"></td><td><div class="lefttablezag">закопать труп</div> <div class="lefttableopis">упомянуть полицию в своем отыгрыше</div></td></tr>
</tbody></table>
</div>
</div>
<div class="prestright">
<div class="prestrighttable">
<table>
<tbody><tr><td width="10%"><img src="https://i.imgur.com/d5f1wdk.png"></td><td><div class="righttablezag">скрытое убийство</div><div class="righttablesong"> < marilyn manson — kill4me > </div></td></tr>
</tbody></table>
<div class="prestrightinfo">
моя сестра отгородилась от мира, чтобы он не увидел, насколько она восприимчива. я отгородился от мира, чтобы он не увидел, насколько я невосприимчив. есть масса способов остановить сердце: электрошок, плохое питание, перерезанная аорта (это мой любимый), но заставить сердце биться — это у меня впервые.
</div>
<div class="prestrightplashka"><img src="https://i.imgur.com/09leWHd.png"></div>
<div class="righttable2"><table>
<tbody><tr><td valign="top"><div class="righttablegraff"><img src="https://upforme.ru/uploads/001b/a7/a4/2/206164.png"></div></td><td valign="top"><div class="righttableicon"><img src="https://i.imgur.com/d1XJnqr.png"></div> <br> <div class="righttablemoney">500$</div></td></tr>
</tbody></table></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>[/html]
