Test

Объявление

60%
НАЗВАНИЕ ЭПИЗОДА - name

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Test » Шаблоны чистовик » биржа труда и ковены


биржа труда и ковены

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

1

123

0

2

[html]
<style>

section.labor {
width: 934px;
height: 545px;
    margin: auto !important;
    background-image: url(https://forumstatic.ru/files/001c/a5/43/23834.png);
    box-sizing: border-box;
    padding: 77px 20px 30px 30px ;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.labor * {
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

section.labor h5 {
    font-family: Inter;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 20px;
    text-transform: uppercase;
    color: rgba(224, 222, 220, 1);
}

section.labor .vtab-content {
  display: none;
  padding: 10px 0 0;
  margin-top: 10px;
}

section.labor .vtab-content.active {
  display: block;
}

section.labor .vtab-btn {
  padding: 3px 40px 3px;
  margin-right: 5px;
  cursor: pointer;
  background: rgba(179, 183, 187, 0.48);
  border: 0;
border-radius: 50px;
  line-height: 1;
  transition: background 0.3s;
    color: rgba(240, 240, 240, 1);
    font-family: var(--font-cat-title);
    font-style: italic;
    font-size: 14px;
    backdrop-filter: blur(2px);
}

section.labor .vtab-btn.active {
  background: rgba(232, 211, 189, 0.48);
}

section.labor .vtab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
justify-content: center;
}

section.labor div.occ-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    padding-right: 4px;
    overflow: auto;
    height: 100%;
    max-height: 400px;
}

section.labor div.occ-list > div {
    width: 416px;
    border-radius: 20px;
    border: 0.5px solid rgba(206, 211, 220, 1);
    background: rgba(179, 183, 187, 0.48);
    padding: 10px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

section.labor div.occ-list ttl {
background: rgba(206, 211, 220, 0.73);
width: 100%;
border-radius: 15px;
overflow: hidden;
display: block;
padding: 0px 6px 23px;
text-align: center;
    color: rgba(77, 75, 74, 1);
    font-family: var(--font-cat-title);
    font-style: italic;
    font-size: 14px;
position: relative;
margin-bottom: 10px;
}

section.labor div.occ-list ttl span {
    font-family: Inter;
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    text-transform: lowercase;
    display: block;
    background: rgba(231, 231, 231, 0.72);
    position: absolute;
    color: rgba(142, 140, 140, 1);
    width: 102%;
    padding-top: 4px;
    height: 20px;
    left: 0px;
    bottom: 0px;
}

section.labor div.occ-list > div occ {
font-size: 12px;
color: rgba(200, 197, 195, 1);
position: relative;
}
section.labor div.occ-list > div occ::before {
    content: '\e0b7';
    font-family: 'FontAwesome';
    line-height: 1;
    font-size: 10px;
    color: rgba(72, 81, 91, 1);
    margin-right: 3px;
}

section.labor .vtabs-wrapper,
section.labor .vtabs-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; }

section.labor .vtab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    flex-shrink: 0;
}

section.labor .vtab-content {
    display: none;
    padding: 10px 0 0;
    margin-top: 10px;
}

section.labor .vtab-content.active {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;     
    overflow: hidden;
}

section.labor div.occ-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    padding-right: 4px;
}

</style>

<section class='labor'><h5>биржа труда</h5>

<div class="vtabs-wrapper ">
  <div class="vtabs-cont">
    <div class="vtab-buttons">
      <button class="vtab-btn">Вкладка 1</button>
      <button class="vtab-btn">Вкладка 2</button>
      <button class="vtab-btn">Вкладка 3</button>
      <button class="vtab-btn">Вкладка 4</button>
    </div>
    <div class="vtab-content"><div class='occ-list'>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

</div></div>

    <div class="vtab-content"><div class='occ-list'>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>

</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

<div>
<ttl>название организации
<span>расшифровка названия</span></ttl>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
<occ>название должности: <a href="#">name surname</a></occ>
</div>

</div>

</div>
    <div class="vtab-content">Содержимое 3</div>
    <div class="vtab-content">Содержимое4</div>
  </div>
</div>

</section>

[/html][hideprofile]

0


Вы здесь » Test » Шаблоны чистовик » биржа труда и ковены


Рейтинг форумов | Создать форум бесплатно