Код:
<!--HTML--> <link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Radio_Vertical.css"> <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900' rel='stylesheet' type='text/css'> <style> .jrad1container * { margin: 0px; padding: 0px; } ul { list-style: none; margin: 0px; padding: 0px; } .jrad1container input { display: none; } .jrad1container input[type=radio]:checked ~ .jrad1slide { height: 250px; } .jrad1container input[type=radio]:checked ~ label { background-color: #a77f95; border: none; text-decoration: none; color: #554964!important; font-size: 14px; letter-spacing: 1.5px; line-height: 140%; font-family: Playfair Display; } .jrad1container { width: 500px; height: auto; margin: 15px auto; } .jrad1container p {padding-bottom:5px!important;} .jrad1container label { display: block; float: left; height: 40px; width: 500px; overflow: hidden; background: #a77f95; text-align: center; font-size: 14px; font-family: Playfair Display; letter-spacing: 1.5px; color: #ecdde6; } .jrad1slide { display: block; width: 500px; height: 0px; overflow: hidden; padding: 0px; clear: both; position: relative; font-size: 14px; font-family: Playfair Display; text-align: justify; background-color: #ecdde6; transition: all 0.5s ease-in 0s; -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; } .jrad1content { width: 430px; height: 180px; margin: 0px auto; padding-right: 3px; overflow: auto; background-color: #ecdde6; } .jrad1content::-webkit-scrollbar { background: #5C65C0; width: 5px; border: 2px solid #af997b; } .jrad1content::-webkit-scrollbar-thumb { background: #413B6B; } .jrad1content::-webkit-scrollbar-corner { background: #af997b; } .jrad1slide h1 { width: 175px; text-align: center; margin: 0px; background-color: #af997b; padding: 5px; font-size: 14px; font-family: Playfair Display; text-transform: uppercase; color: #000; position: absolute; top: 180px; left: 50px; } .jrad1slide h2 { margin: 20px 0px 5px 0px; color: #413B6B; font-size: 14px; font-family: Playfair Display; text-transform: uppercase; text-align: center; } .jrad1slide h2::before, .jrad1slide h2::after { content: ""; width: 30px; height: 1px; background-color: #6F95FF; vertical-align: middle; display: inline-block; margin: 0px 10px; } .jrad1container p { padding-bottom:5px; } </style> <div class="jrad1container"> <form> <ul> <li> <input id="jrad11" type="radio" name="radio" checked> <label for="jrad11"></label> <div class="jrad1slide"> <img src="http://funkyimg.com/i/2q8qB.png" width="500" height="250"> </div> </li> <li> <input id="jrad21" type="radio" name="radio"> <label for="jrad21">Health care // Security</label> <div class="jrad1slide"> <h2>about name</h2> <div class="jrad1content"><p> <table> <tr valign="top"> <td><p><b>Health care</p></b> ординатор - <a href='http://inequalityofsouls.rusff.me/profile.php?id=3'>Park Bo Gum</a> <br>Ординатор - <a href='http://inequalityofsouls.rusff.me/profile.php?id=50'>Im Yoon Ah</a> </td> <td><p><b>Security</p></b> капитан оперативной группы - <a href='http://inequalityofsouls.rusff.me/profile.php?id=5'>Song Joong Ki</a> </td></tr></table> </p></div></div> </li> <li> <input id="jrad31" type="radio" name="radio"> <label for="jrad31">Education // Sport</label> <div class="jrad1slide"> <h2>relationships</h2><div class="jrad1content"><p> <table> <tr valign="top"> <td><p><b>Education</p></b> студентка - <a href='http://inequalityofsouls.rusff.me/profile.php?id=60'>Roseanne Park</a> <br>студент - <a href='http://inequalityofsouls.rusff.me/profile.php?id=73'>Jeon Jung Kook</a> </td> <td><p><b>Sport</p></b> игрок местной баскетбольной лиги - <a href='http://inequalityofsouls.rusff.me/profile.php?id=61'> Im Jae Bum</a> </td></tr></table> </p></div></div> </li> <li> <input id="jrad41" type="radio" name="radio"> <label for="jrad41">Servicing // Entertainment</label> <div class="jrad1slide"> <h2>about name</h2> <div class="jrad1content"><p> <table> <tr valign="top"> <td><p><b>Servicing</p></b> бармен - <a href='http://inequalityofsouls.rusff.me/profile.php?id=40'>Kim Jennie</a> <br>флорист - <a href='http://inequalityofsouls.rusff.me/profile.php?id=37'>Jung Soo Jung</a> <br>хозяйка цветочного магазина - <a href='http://inequalityofsouls.rusff.me/profile.php?id=43'>Amber Liu</a> <br>менеджер пиццерии- <a href='http://inequalityofsouls.rusff.me/profile.php?id=64'>Seo Kang Joon</a> <br>управляющий отелем "King's gate" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=62'>Koo Jun Hoe</a> <br>владелица ресторана "re.public" - <a href='http://inequalityofsouls.rusff.me/profile.php?section=essentials&id=65'>Lee Hyori</a> <br>владелец ночного клуба Zero - <a href='http://inequalityofsouls.rusff.me/profile.php?id=63'>Wang Jackson</a> <br>официантка в ресторане "re.public" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=58'>Lalisa Manoban</a> <br>ди-джей в клубе Zero - <a href='http://inequalityofsouls.rusff.me/profile.php?id=72'>Kim Yu Gyeom</a> <br>бармен - <a href='http://inequalityofsouls.rusff.me/profile.php?id=73'>Jeon Jung Kook</a> </td> <td><p><b>Entertainment</p></b> русалка в океанариуме - <a href='http://inequalityofsouls.rusff.me/profile.php?id=21'>Minatozaki Sana</a> <br>актёр - <a href='http://inequalityofsouls.rusff.me/profile.php?id=34'>Kim Myung Soo</a> <br>модель - <a href='http://inequalityofsouls.rusff.me/profile.php?id=34'>Kim Myung Soo</a> <br>модель - <a href='http://inequalityofsouls.rusff.me/profile.php?id=70'>Im Jin Ah</a> </td></tr></table> </p></div></div> </li> <li> <input id="jrad51" type="radio" name="radio"> <label for="jrad51">Criminality // Emergency services</label> <div class="jrad1slide"> <h2>about name</h2> <div class="jrad1content"><p> <table> <tr valign="top"> <td><p><b>Criminality</p></b> мошенник- <a href='http://inequalityofsouls.rusff.me/profile.php?id=33'>Kim Tae Hyung</a> <br>подпольный врач - <a href='http://inequalityofsouls.rusff.me/profile.php?id=67'>Jung Taek Woon</a> <br>шпион Северной Кореи - <a href='http://inequalityofsouls.rusff.me/profile.php?id=72'>Kim Yu Gyeom</a> </td> <td><p><b>Emergency services</p></b> profession - name </td></tr></table> </p></div></div> </li> <li> <input id="jrad61" type="radio" name="radio"> <label for="jrad61">Creation // Jurisprudence</label> <div class="jrad1slide"> <h2>about name</h2> <div class="jrad1content"><p> <table> <tr valign="top"> <td><p><b>Creation</p></b> балерина - <a href='http://inequalityofsouls.rusff.me/profile.php?id=4'>Hwang Mi Young</a> <br>фотограф - <a href='http://inequalityofsouls.rusff.me/profile.php?id=6'>Lee Chang Seon</a> <br>уличный музыкант - <a href='http://inequalityofsouls.rusff.me/profile.php?id=37'>Jung Soo Jung</a> <br>хореограф - <a href='http://inequalityofsouls.rusff.me/profile.php?id=59'>Hirai Momo</a> <br>клавишница в рок-группе "the void" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=58'>Lalisa Manoban</a> <br>бас-гитарист в рок-группе "the void" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=73'>Jeon Jung Kook</a> </td> <td><p><b>Jurisprudence</p></b> profession - name </td></tr></table> </p></div></div> </li> <li> <input id="jrad71" type="radio" name="radio"> <label for="jrad71">Economics // Other</label> <div class="jrad1slide"> <h2>about name</h2> <div class="jrad1content"><p> <table valign="top"> <tr valign="top"> <td><p><b>Economics</p></b> profession - name </td> <td><p><b>Other</p></b> пилот - <a href='http://inequalityofsouls.rusff.me/profile.php?id=35'>Kim Sung Gyu</a> <br>хакер - <a href='http://inequalityofsouls.rusff.me/profile.php?id=26'>Park Hyo Min</a> <br>модельер - <a href='http://inequalityofsouls.rusff.me/profile.php?id=68'>Huang Zi Tao</a> <br>кинолог-дрессировщик - <a href='http://inequalityofsouls.rusff.me/profile.php?id=67'>Jung Taek Woon</a> </td></tr></table> </p></div></div> </li> </ul> </form>