вакансии

Код:
<!--HTML-->
<job_block_main>


<div class="tabs">
  <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
  <label for="tab-btn-1">закон и порядок</label>
  <input type="radio" name="tab-btn" id="tab-btn-2" value="">
  <label for="tab-btn-2">медицина</label>
  <input type="radio" name="tab-btn" id="tab-btn-3" value="">
  <label for="tab-btn-3">образование</label>
  <input type="radio" name="tab-btn" id="tab-btn-4" value="">
  <label for="tab-btn-4">культура</label>
  <input type="radio" name="tab-btn" id="tab-btn-5" value="">
  <label for="tab-btn-5">бизнес</label>
  <input type="radio" name="tab-btn" id="tab-btn-6" value="">
  <label for="tab-btn-6">сми</label>
  <input type="radio" name="tab-btn" id="tab-btn-7" value="">
  <label for="tab-btn-7">криминал</label>
  <input type="radio" name="tab-btn" id="tab-btn-8" value="">
  <label for="tab-btn-8">разное</label>
  

<div id="content-1">

<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>


<div id="content-2">

<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>

</div>

<div id="content-3">
   <job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>

<div id="content-4">
<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>

<div id="content-5">
<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
 </div>

<div id="content-6">
<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>

<div id="content-7">
<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>

<div id="content-8">
<job_block_right>

<job_position>
<name_company>name company</name_company>

<company_description>С другой стороны сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Не следует, однако забывать, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации.</company_description>

<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>
<pw><name_position>name position</name_position> <name_worker>name surname</name_worker></pw>

</job_position>

<job_position>
<name_company>name company</name_company>
<name_position>name position</name_position> <name_worker>name surname</name_worker> 
</job_position>

</job_block_right>
</div>

</div>


</job_block_main>


<style>

job_block_main:before {
content: "workplaces";
    display: block;
    position: absolute;
    font-size: 30px;
    top: -26px;
    color: #d38d7b;
    text-shadow: 0 0 4px #96574745;
    height: 25px;
    overflow: hidden;
    left: 15px;
    filter: blur(0.6px);
    text-transform: uppercase;
}

job_block_main {
    display: block;
    width: 770px;
    height: auto;
    border-radius: 20px;
    border: 1px solid #b08c7900;
    background: linear-gradient(16deg, #f5c5ab, #fff0d5);
    box-shadow: inset 0 0 0px 1px #fff, inset 0 0 6px 3px #fff2df69, 0 0 0px 1px #b9836347, 0 0 7px 1px #b9836361;
    margin: 25px auto 10px auto !important;
    padding: 10px 10px 14px 5px;
    position: relative;
}

job_block_right {
    height: 210px;
    display: block;
    overflow: auto;
    width: 567px;
}

job_position {
   display: block;
    width: auto;
    height: auto;
    margin: 15px 15px 10px 15px !important;
}

name_company {
    display: block;
    text-transform: uppercase;
    color: #aa6351;
    text-shadow: 0 0 2px #9d574687;
    padding: 3px 0px 3px 0px;
    border-radius: 5px;
    width: max-content; 
    height: 30px;
}

name_company:after {
content: "";
    display: block;
    width: 500px;
    height: 1.5px;
    background: linear-gradient(45deg, #f6d1b6, transparent);
    margin: 5px 0px 0px 0px;
}

name_worker {
    background: #f8d6bcc4;
    color: #aa6351;
    text-shadow: 0 0 2px #9d574687;
    border-radius: 5px;
    padding: 0px 10px 2px 10px;
    position: relative;
    left: 20px;
}

name_position:after {
content: "»";
    position: relative;
    left: 10px;
}

pw {
    display: block;
    margin-bottom: 15px!important;
}

company_description {
    display: block;
    width: 500px;
    text-align: justify;
    font-size: 11px;
    margin: 0 0 15px 0 !important;
    color: #ae8176;
    height: auto;
}

name_position {
    color: #aa6351;
    text-shadow: 0 0 2px #9d574687;
}


 .tabs {
    font-size: 0;
    position: relative;
  }

  .tabs>input[type="radio"] {
    display: none;
  }

  .tabs>div {
    display: none;
    padding: 10px 15px;
    font-size: 13px;
    width: 540px;
    float: right;
    background: #fafafa;
    height: 230px;
    position: absolute;
    top: 10px;
    left: 190px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #c5936b69;
  }

  #tab-btn-1:checked~#content-1,
  #tab-btn-2:checked~#content-2,
  #tab-btn-3:checked~#content-3,
  #tab-btn-4:checked~#content-4,
  #tab-btn-5:checked~#content-5,
  #tab-btn-6:checked~#content-6,
  #tab-btn-7:checked~#content-7,
  #tab-btn-8:checked~#content-8 {
    display: block;
  }

  .tabs>label {
    display: flex;
    user-select: none;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.8;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
    position: relative;
    top: 1px;
    width: 140px;
    text-transform: uppercase;
    margin: 10px 0px 10px 15px;
    background: linear-gradient(16deg, #f5c5ab, #fff0d5);
    box-shadow: inset 0 0 0px 1px #ffeee1, inset 0 0 6px 3px #fff2df66, 0 0 0px 1px #b9836338, 2px 4px 7px 1px #b9836361, -2px -4px 6px 0px #ffebe094;
    border-radius: 5px;
    color: #a15545;
    text-shadow: 0 0 2px #ad7f5a9e;
  }

  .tabs>label:not(:first-of-type) {
    border-left: none;
  }

  .tabs>input[type="radio"]:checked+label {
    background-color: #fff;
    border-bottom: 1px solid #fff;
  }

job_block_right::-webkit-scrollbar {
    width: 4px;
    border-radius: 10px;
}

job_block_right::-webkit-scrollbar-thumb {
    background-color: #fafafa;
    border-radius: 10px;
    box-shadow: inset 0 0 2px 1px #c1c1c138;
}

job_block_right::-webkit-scrollbar-track {
    background-color: #f7cdb3;
    border-radius: 10px;
    box-shadow: inset 0 0 2px 1px #d5a07bb5;
}

</style>
moi test

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

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

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

вакансии

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

Поделиться12023-04-04 14:22:39
