123
биржа труда и ковены
Сообщений 1 страница 2 из 2
Поделиться22026-07-29 12:01:55
[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]

