занятые внешности и имена & биржа труда

[hideprofile][html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

/* Основной блок */
.forum-block {
max-width: 100%;
width: 100%;
height: 550px;
border-radius: 30px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
background: #efeada;
box-sizing: border-box;
font-family: Arial, sans-serif;
font-size: 10px;
color: #52796c;
}

/* Шапка с картинкой */
.forum-header {
height: 100px;
background: url('https://forumstatic.ru/files/001c/bd/b1/89805.png') no-repeat center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.forum-header h1 {
margin: 0;
padding: 0 20px;
text-align: center;
font-family: 'Yeseva One', serif;
font-size: 20px;
color: #c3c0aa;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.forum-header h1 span {
display: inline-block;
background: #3b584b;
padding: 10px 20px;
border-radius: 20px;
color: #c3c0aa;
text-shadow: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Радиокнопки – полностью скрыты */
.tab-input {
display: none !important;
}

/* Основное содержимое – одна колонка */
.forum-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px 30px 20px 30px;
min-height: 0;
height: 100%;
font-size: inherit;
color: inherit;
gap: 10px;
}

/* Кнопки-вкладки (метки) */
.tab-labels {
display: flex;
justify-content: center;
gap: 15px;
flex-shrink: 0;
height: 30px;
}

.tab-labels label {
display: inline-block;
padding: 6px 18px;
background: #b6c1b7;
color: #52796c !important;
font-family: 'Yeseva One', serif;
font-size: 13px;
text-decoration: none;
border-radius: 15px 15px 0 0;
transition: transform 0.2s ease, background 0.2s ease;
cursor: pointer;
box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
white-space: nowrap;
}

.tab-labels label:hover {
transform: translateY(-3px);
background: #a0b0a0;
}

/* Панели – скрыты по умолчанию */
.tab-panel {
display: none;
flex: 1;
background: rgba(215, 210, 199, 1);
border-radius: 10px;
padding: 10px;
overflow-y: auto;
min-height: 0;
transform: translateY(-15px);
}

/* Показываем панель по выбранной радиокнопке (суффикс -4) */
#tab-faces-4:checked ~ .forum-content .panel-faces,
#tab-names-4:checked ~ .forum-content .panel-names,
#tab-jobs-4:checked ~ .forum-content .panel-jobs {
display: block;
}

/* Активная кнопка (суффикс -4) */
#tab-faces-4:checked ~ .forum-content .tab-labels label[for="tab-faces-4"],
#tab-names-4:checked ~ .forum-content .tab-labels label[for="tab-names-4"],
#tab-jobs-4:checked ~ .forum-content .tab-labels label[for="tab-jobs-4"] {
background: #52796c;
color: #efeada !important;
transform: translateY(-5px);
}

/* Внутренние колонки для панелей 1 и 2 */
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: 100%;
}

.two-cols > div {
overflow-y: auto;
padding: 5px;
text-align: center;
}

/* Заголовки колонок – нестандартный тег h10 */
.two-cols h10 {
font-family: 'Yeseva One', serif;
font-size: 14px;
color: #52796c;
margin: 0 0 6px 0;
text-align: center;
display: block;
}

.two-cols ul {
margin: 0;
padding: 0;
list-style: none;
}

.two-cols ul li {
font-size: 10px;
padding: 2px 0;
border-bottom: 1px solid rgba(82, 121, 108, 0.15);
}

.two-cols ul li:last-child {
border-bottom: none;
}

/* Панель 3: Биржа труда – две колонки */
.job-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
height: 100%;
}

.job-place {
background: rgba(255,255,255,0.2);
border-radius: 6px;
padding: 6px 10px;
break-inside: avoid;
}

/* Заголовки мест – нестандартный тег h11 */
.job-place h11 {
font-family: 'Yeseva One', serif;
font-size: 13px;
color: #52796c;
margin: 0 0 3px 0;
display: block;
}

.job-place ul {
margin: 0;
padding: 0 0 0 16px;
list-style: disc;
}

.job-place ul li {
font-size: 10px;
color: #52796c;
}

/* Адаптивность */
@media (max-width: 600px) {
.forum-content {
padding: 10px 15px 10px 15px;
}
.tab-labels {
gap: 6px;
flex-wrap: wrap;
}
.tab-labels label {
padding: 4px 10px;
font-size: 11px;
}
.two-cols {
grid-template-columns: 1fr;
gap: 10px;
}
.job-list {
grid-template-columns: 1fr;
gap: 8px;
}
}
</style>

<div class="forum-block">

<div class="forum-header">
<h1><span>The Block Island</span></h1>
</div>

<input type="radio" name="tabs-4" id="tab-faces-4" class="tab-input" checked>
<input type="radio" name="tabs-4" id="tab-names-4" class="tab-input">
<input type="radio" name="tabs-4" id="tab-jobs-4" class="tab-input">

<div class="forum-content">

<div class="tab-labels">
<label for="tab-faces-4">Занятые внешности</label>
<label for="tab-names-4">Занятые имена</label>
<label for="tab-jobs-4">Биржа труда</label>
</div>

<div class="tab-panel panel-faces">
<div class="two-cols">
<div>
<h10>Man</h10>
<ul>
<li>Пример</li>
</ul>
</div>
<div>
<h10>Woman</h10>
<ul>
<li>Пример</li>
</ul>
</div>
</div>
</div>

<div class="tab-panel panel-names">
<div class="two-cols">
<div>
<h10>Имена</h10>
<ul>
<li>Пример</li>
</ul>
</div>
<div>
<h10>Фамилии</h10>
<ul>
<li>Пример</li>
</ul>
</div>
</div>
</div>

<div class="tab-panel panel-jobs">
<div class="job-list">
<div class="job-place">
<h11>Администрация и Мэрия</h11>
<ul>
<li>Смотритель: один человек.</li>
<li>Заместитель Смотрителя: один человек.</li>
<li>Члены городского совета: три человека.</li>
<li>Секретарь городского совета и директор по административным вопросам: один человек.</li>
<li>Заместитель секретаря городского совета: два человека.</li>
<li>Архивариус: один человек.</li>
<li>Муниципальный судья: один человек.</li>
<li>Секретарь по финансовым вопросам: один человек.</li>
<li>Сборщик налогов: один человек.</li>
<li>Секретарь оценочной комиссии: один человек.</li>
</ul>
</div>
<div class="job-place">
<h11>Полицейский департамент острова Блок</h11>
<ul>
<li>Шеф полиции: один человек.</li>
<li>Исполнительный ассистент: один человек.</li>
<li>Диспетчер: один человек.</li>
<li>Детектив: два человека.</li>
<li>Постоянные офицеры полиции: три человека.</li>
<li>Сезонные / резервные офицеры полиции: пять человек.</li>
</ul>
</div>
<div class="job-place">
<h11>Пожарно-спасательная служба острова Блок</h11>
<ul>
<li>Начальник пожарной охраны: один человек.</li>
<li>Помощник начальника пожарной охраны: один человек.</li>
<li>Администратор: два человека.</li>
<li>Капитан службы спасения: один человек.</li>
<li>Парамедики: три человека.</li>
<li>Капитан пожарной охраны: один человек.</li>
<li>Пожарные: три человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Инфраструктура</h11>
<ul>
<li>Административный ассистент: один человек.</li>
<li>Инспектор по зонированию и строительству: один человек.</li>
<li>Менеджер по эксплуатации объектов: один человек.</li>
<li>Директор Департамента общественных работ: один человек.</li>
<li>Смотритель Водной компании: один человек.</li>
<li>Директор Земельного траста: один человек.</li>
<li>Егерь: три человека.</li>
<li>Смотритель гавани: один человек.</li>
<li>Помощники смотрителя: два человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Радиостанция "The Voice of Block Island"</h11>
<ul>
<li>Главный редактор: один человек.</li>
<li>Радиоведущий: два человека.</li>
<li>Ведущий передачи: частичная занятость, уточняйте.</li>
<li>Корреспондент: два человека, частичная занятость.</li>
<li>Звукорежиссер: два человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Общественная библиотека острова</h11>
<ul>
<li>Директор библиотеки: один человек.</li>
<li>Архивариус: один человек.</li>
<li>Библиотекарь: два человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Католическая церковь Святого Андрея</h11>
<ul>
<li>Пастор и казначей: за Падре.</li>
<li>Дьякон: один человек.</li>
<li>Директор по религиозному образованию: один человек.</li>
<li>Смотритель: один человек.</li>
</ul>
</div>
<div class="job-place">
<h11>Епископальная церковь Святой Анны у моря</h11>
<ul>
<li>Приходской священник: один человек.</li>
<li>Приходской администратор: один человек.</li>
<li>Старший староста: один человек.</li>
<li>Младший староста: один человек.</li>
<li>Казначей: один человек.</li>
</ul>
</div>
<div class="job-place">
<h11>Юго-Восточный маяк</h11>
<ul>
<li>Смотритель-резидент: один человек.</li>
</ul>
</div>
<div class="job-place">
<h11>Медицинский центр</h11>
<ul>
<li>Главврач: один человек.</li>
<li>Управляющий клиникой: один человек.</li>
<li>Практикующая медсестра: два человека.</li>
<li>Врач общей практики: два человека.</li>
<li>Врач неотложной помощи: один человек.</li>
<li>Психиатр: один человек.</li>
<li>Патологоанатом: один человек.</li>
<li>Приходящий специалист: три человека, частичная занятость.</li>
</ul>
</div>
<div class="job-place">
<h11>Школа острова Блок</h11>
<ul>
<li>Суперинтендант: один человек.</li>
<li>Директор школы: один человек.</li>
<li>Помощник директора: один человек.</li>
<li>Социальный работник: один человек.</li>
<li>Школьная медсестра: один человек.</li>
<li>Учителя: ограничено преподаваемыми предметами.</li>
</ul>
</div>
<div class="job-place">
<h11>Детский сад</h11>
<ul>
<li>Директор: один человек.</li>
<li>Ведущий воспитатель: два человека.</li>
<li>Помощник воспитателя: два человека.</li>
<li>Повар: один человек, частичная занятость.</li>
</ul>
</div>
<div class="job-place">
<h11>Частный учебный центр "Beacon House"</h11>
<ul>
<li>Владелец: один человек.</li>
<li>Директор: один человек.</li>
<li>Репетитор: шесть человек, частичная занятость.</li>
</ul>
</div>
<div class="job-place">
<h11>Закусочная "Old Island"</h11>
<ul>
<li>Владелец: один человек.</li>
<li>Повар: два человека.</li>
<li>Официант: три человека.</li>
<li>Бармен-кассир: три человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Антикварная лавка "Fog & Lantern"</h11>
<ul>
<li>Владелец и оценщик: The Ashworth Family.</li>
<li>Помощник в магазине: один человек.</li>
<li>Реставратор: за Arawn.</li>
</ul>
</div>
<div class="job-place">
<h11>Книжная лавка "The Long Play"</h11>
<ul>
<li>Владелец и книжный куратор: один человек.</li>
<li>Кондитер: один человек, частичная занятость.</li>
<li>Бариста: один человек.</li>
<li>Продавец: один человек.</li>
<li>Помощник в лавке: два человека, частичная занятость.</li>
</ul>
</div>
<div class="job-place">
<h11>Джаз-лаунж-клуб "The Gilded Siren"</h11>
<ul>
<li>Владелец: Тэлбот.</li>
<li>Управляющий: один человек.</li>
<li>Арт-директор и куратор музыкальной программы: один человек.</li>
<li>Постоянный музыкант: четыре человека.</li>
<li>Старший хостес: один человек.</li>
<li>Хост/хостес: два человека.</li>
<li>Главный миксолог: один человек.</li>
<li>Бармен: два человека.</li>
<li>Сомелье: один человек.</li>
<li>Обслуживающий персонал: три человека.</li>
<li>Руководитель службы безопасности: один человек.</li>
<li>Охрана: три человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Музыкальный клуб "The Hull"</h11>
<ul>
<li>Владелец и промоутер: один человек.</li>
<li>Администратор: два человека.</li>
<li>Менеджер сцены: один человек.</li>
<li>Старший бармен: один человек.</li>
<li>Бармен: три человека, сезонная должность.</li>
<li>Официант: три человека.</li>
<li>Начальник охраны: один человек.</li>
<li>Вышибала: два человека, сезонная должность.</li>
</ul>
</div>
<div class="job-place">
<h11>Таверна "The Old Salt"</h11>
<ul>
<li>Трактирщик: один человек.</li>
<li>Шеф-повар: один человек.</li>
<li>Повар: два человека.</li>
<li>Бармен: два человека.</li>
<li>Работник зала: три человека.</li>
<li>Вышибала: два человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Стейк-хаус «The Iron Oak»</h11>
<ul>
<li>Владелец: Элеонора Ван Аллен.</li>
<li>Шеф-повар: один человек.</li>
<li>Су-шеф: два человека.</li>
<li>Менеджер зала: один человек.</li>
<li>Менеджер бара: один человек.</li>
<li>Официант: два человека.</li>
</ul>
</div>
<div class="job-place">
<h11>Конный клуб "Sunrise"</h11>
<ul>
<li>Владелец: синистер.</li>
<li>Администратор: один человек.</li>
<li>Тренер: синистер, + два человека.</li>
<li>Конюх: три человека.</li>
<li>Волонтер: два человека.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
[/html]

The Block Island

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

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

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

занятые внешности и имена & биржа труда

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

Поделиться1Вчера 15:16:37