Биржа труда

Код:

<!--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: 240px;
    margin: 5px 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: #c2abb9; }
.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>
     </td>


     <td><p><b>Security</p></b>
       капитан оперативной группы - <a href='http://inequalityofsouls.rusff.me/profile.php?id=5'>Song Joong Ki</a>
      <br>кадет в пожарной Академии - <a href='http://inequalityofsouls.rusff.me/profile.php?id=100'>Lee Tae Yong</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>
     <br>студент - <a href='http://inequalityofsouls.rusff.me/profile.php?id=86'>Go Kyung Pyo</a>
      </td>


     <td><p><b>Sport</p></b>
      
      </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>управляющий отелем "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>
       <br>менеджер Lotte World - <a href='http://inequalityofsouls.rusff.me/profile.php?id=80'>Lee Chong Suk</a>
       <br>владелец bbq-кафе - <a href='http://inequalityofsouls.rusff.me/profile.php?id=86'>Go Kyung Pyo</a>
       <br>бариста в кафе - <a href='http://inequalityofsouls.rusff.me/profile.php?id=94'>Kim Min Seok</a>
<br>администратор в ночном клубе "Zero" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=93'>Kim Hyun Ah</a>
     </td>


     <td><p><b>Entertainment</p></b>
      русалка в океанариуме - <a href='http://inequalityofsouls.rusff.me/profile.php?id=21'>Park Kyung Ri</a>
       <br>модель - <a href='http://inequalityofsouls.rusff.me/profile.php?id=70'>Im Jin Ah</a>
       <br>модель - <a href='http://inequalityofsouls.rusff.me/profile.php?id=106'>Im Jae Bum</a>
       <br>танцовщица в клубе "Zero" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=79'>Kwon Yuri</a>
     <br>режиссер документальных фильмов - <a href='http://inequalityofsouls.rusff.me/profile.php?id=71'> Kim Ji Won</a>
       <br>журналист - <a href='http://inequalityofsouls.rusff.me/profile.php?id=97'>Lee Chae Rin</a>
      <br>оператор и фотокорреспондент KBS - <a href='http://inequalityofsouls.rusff.me/profile.php?id=99'>Ji Chang Wook</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=67'>Jung Taek Woon</a>
       <br>шпион Северной Кореи - <a href='http://inequalityofsouls.rusff.me/profile.php?id=72'>Kim Yu Gyeom</a>
       <br>стритрейсер - <a href=' http://inequalityofsouls.rusff.me/profile.php?id=79'>Kwon Yuri</a>
      <br>стритрейсер - <a href='http://inequalityofsouls.rusff.me/profile.php?id=103'>Min Yoon Gi</a>
      <br>гонщик - <a href='http://inequalityofsouls.rusff.me/profile.php?id=94'>Kim Min Seok</a>
     <br>наркоторговец - <a href='http://inequalityofsouls.rusff.me/profile.php?id=87'>Oh Sehun</a>
     </td>


     <td><p><b>Emergency services</p></b>
       кадет в пожарной Академии - <a href='http://inequalityofsouls.rusff.me/profile.php?id=100'>Lee Tae Yong</a>
      </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>клавишница в рок-группе "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>
        <br>вокалист в рок-группе "the void" - <a href='http://inequalityofsouls.rusff.me/profile.php?id=85'>Kim Tae Hyung</a>
       <br>тату-мастер и пирсер - <a href='http://inequalityofsouls.rusff.me/profile.php?id=82'>Byun Baek Hyun</a>
       <br>инстаграм-блогер - <a href='http://inequalityofsouls.rusff.me/profile.php?id=85'>Kim Tae Hyung</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>
      <br>библиотекарь - <a href='http://inequalityofsouls.rusff.me/profile.php?id=74'>Bae Joo Hyun</a>
      </td></tr></table>

     </p></div></div>
   </li>


 </ul>
</form>

Сначала указываем сферу, а потом заполняем простенький шаблон:

Код:

<br>профессия - <a href='ссылка на профиль'>name</a>

Inequality of Souls

Меню навигации

Пользовательские ссылки

Информация о пользователе

Биржа труда

Сообщений 1 страница 1 из 1

Поделиться12017-02-03 16:40:37