Вы можете добавить свое место работы, обратившись к АМС
[hideprofile][html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Биржа услуг / Benjamin</title>
<style>
/* ---------- ТВОЙ РУТ (без изменений, только :root) ---------- */
:root {
--ntln-bg: #313131;
--ntln-surface: #202020;
--ntln-text: #c8c8c8;
--ntln-text-soft: #f0f0f0;
--ntln-accent: #f8f8f8;
--ntln-hover: #65656540;
--ntln-highlight: #f4f4f4;
--ntln-shadow: 0 2px 8px color-mix(in srgb, currentColor 10%, transparent);
--ntln-font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--ntln-font-accent: 'Georgia', 'Times New Roman', serif;
--ntln-scroll: #a4a4a4;
}
/* Контейнер для табов (вертикальная навигация) */
.tabs-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
background: transparent;
display: flex;
gap: 20px;
font-family: var(--ntln-font-main);
color: var(--ntln-text);
}
/* Скрываем радио-кнопки */
.tabs-container input[type="radio"] {
display: none;
}
/* ---------- НАВИГАЦИЯ СБОКУ (ВЕРТИКАЛЬНАЯ) ---------- */
.tabs-nav {
flex-shrink: 0;
width: 220px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Стили кнопок (адаптированы под вертикаль) */
.tabs-nav label {
display: block;
padding: 15px 20px;
background: var(--ntln-surface);
color: var(--ntln-text);
font-weight: 500;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
user-select: none;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: var(--ntln-shadow);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tabs-nav label:hover {
background: var(--ntln-hover);
border-color: var(--ntln-accent);
color: var(--ntln-text-soft);
transform: translateX(5px);
}
/* Активная кнопка */
#tab1:checked ~ .tabs-nav [for="tab1"],
#tab2:checked ~ .tabs-nav [for="tab2"],
#tab3:checked ~ .tabs-nav [for="tab3"],
#tab4:checked ~ .tabs-nav [for="tab4"],
#tab5:checked ~ .tabs-nav [for="tab5"],
#tab6:checked ~ .tabs-nav [for="tab6"],
#tab7:checked ~ .tabs-nav [for="tab7"],
#tab8:checked ~ .tabs-nav [for="tab8"] {
background: var(--ntln-scroll);
color: var(--ntln-surface);
border-color: var(--ntln-accent);
transform: translateX(5px);
}
/* ---------- КОНТЕЙНЕР ДЛЯ КОНТЕНТА ---------- */
.tabs-content {
flex-grow: 1;
position: relative;
min-width: 0;
}
/* Стили для всех блоков */
.tab-panel {
display: none;
animation: fadeIn 0.5s ease;
}
/* Анимация появления */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Показываем активный блок */
#tab1:checked ~ .tabs-content #panel1,
#tab2:checked ~ .tabs-content #panel2,
#tab3:checked ~ .tabs-content #panel3,
#tab4:checked ~ .tabs-content #panel4,
#tab5:checked ~ .tabs-content #panel5,
#tab6:checked ~ .tabs-content #panel6,
#tab7:checked ~ .tabs-content #panel7,
#tab8:checked ~ .tabs-content #panel8 {
display: block;
}
/* ---------- СТИЛИ ДЛЯ КАРТОЧЕК ВНУТРИ ВКЛАДОК ---------- */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.category-card {
background: var(--ntln-surface);
border-radius: 12px;
padding: 20px;
border: 1px solid var(--ntln-hover);
box-shadow: var(--ntln-shadow);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.category-title {
font-family: var(--ntln-font-accent);
color: var(--ntln-accent);
font-size: 1.3rem;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ntln-hover);
letter-spacing: 0.5px;
}
.category-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.category-list li {
margin-bottom: 12px;
font-size: 14px;
color: var(--ntln-text);
line-height: 1.5;
}
.category-list li a {
color: var(--ntln-text-soft) !important;
text-decoration: none;
transition: all 0.2s ease;
font-weight: 500;
}
.category-list li a:hover {
text-decoration: underline;
}
/* ---------- АДАПТИВНОСТЬ (от 540px и ниже) ---------- */
@media (max-width: 540px) {
body {
padding: 10px;
align-items: flex-start;
}
.tabs-container {
flex-direction: column;
}
.tabs-nav {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.tabs-nav label {
white-space: normal;
text-align: center;
flex: 1 1 auto;
min-width: 120px;
padding: 12px 10px;
font-size: 14px;
}
.tabs-nav label:hover {
transform: translateY(-2px);
}
#tab1:checked ~ .tabs-nav [for="tab1"],
#tab2:checked ~ .tabs-nav [for="tab2"],
#tab3:checked ~ .tabs-nav [for="tab3"],
#tab4:checked ~ .tabs-nav [for="tab4"],
#tab5:checked ~ .tabs-nav [for="tab5"],
#tab6:checked ~ .tabs-nav [for="tab6"],
#tab7:checked ~ .tabs-nav [for="tab7"],
#tab7:checked ~ .tabs-nav [for="tab8"] {
transform: translateY(-2px);
}
.category-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="tabs-container">
<!-- Радио-кнопки для переключения табов -->
<input type="radio" name="tabs" id="tab1" checked>
<input type="radio" name="tabs" id="tab2">
<input type="radio" name="tabs" id="tab3">
<input type="radio" name="tabs" id="tab4">
<input type="radio" name="tabs" id="tab5">
<input type="radio" name="tabs" id="tab6">
<input type="radio" name="tabs" id="tab7">
<input type="radio" name="tabs" id="tab8">
<!-- Навигация (кнопки сбоку) -->
<div class="tabs-nav">
<label for="tab1">Закон</label>
<label for="tab2">Здравоохранение</label>
<label for="tab3">Образование</label>
<label for="tab4">СМИ</label>
<label for="tab5">Частный бизнес</label>
<label for="tab6">Фриланс</label>
<label for="tab7">Другое</label>
<label for="tab8">Фракции</label>
</div>
<!-- Контент табов -->
<div class="tabs-content">
<!-- Вкладка 1: закон -->
<div class="tab-panel" id="panel1">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Полиция</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=26">Gideon Ancrum</a> — детектив в отделе убийств</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">ФБР</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=9"> Jeremy Stone</a> — Специальный агент ФБР</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Суд</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 2: Здравоохранение -->
<div class="tab-panel" id="panel2">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Больница</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Ветеринарная клиника</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Пожарная служба</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Операторы 911</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 3: Образование -->
<div class="tab-panel" id="panel3">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Школа</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Колледж</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Университет</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 4: СМИ -->
<div class="tab-panel" id="panel4">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Газета, Журнал</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Блогеры</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 5: Бизнес -->
<div class="tab-panel" id="panel5">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Ruby's coffee</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=10">Ruby Torrance</a> — владелица кофейни</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Torrance's mystic shop</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=8">Theodora Torrance</a> — владелица магазина мистики/гадалка</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Компания name</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 6: Фриланс -->
<div class="tab-panel" id="panel6">
<div class="category-grid">
<div class="category-card">
<div class="category-title">IT и разработка</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=65">Caleb Morgan</a> — IT-специалист, хакер</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Дизайн и креатив</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">name</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 7: Другое -->
<div class="tab-panel" id="panel7">
<div class="category-grid">
<div class="category-card">
<div class="category-title">name</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=67">Lex Luther</a> — курьер</li>
<li><a href="https://phantomdance.rusff.me/profile.php?id=7">Morwenna Carter</a> — гонщица NASCAR, радиоведущая</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">name</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">name</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
<!-- Вкладка 8: Фракции -->
<div class="tab-panel" id="panel8">
<div class="category-grid">
<div class="category-card">
<div class="category-title">Дети звездного света</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — статус</li>
<li><a href="#">Name Surname</a> — статус</li>
<li><a href="#">Name Surname</a> — статус</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Церковь розы и креста</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Манускрипт</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Спектр</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">El Chupacabras</div>
<ul class="category-list">
<li><a href="https://phantomdance.rusff.me/profile.php?id=67">Lex Luther</a> — курьер</li>
<li><a href="https://phantomdance.rusff.me/profile.php?id=65">Caleb Morgan</a> — хакер</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Midnight Stalkers</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Цумэ-Го</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
<div class="category-card">
<div class="category-title">Крысиные Короли</div>
<ul class="category-list">
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
<li><a href="#">Name Surname</a> — профессия</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>[/html]
