аукцион

[hideprofile][html]<style>@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Serif+Display:wght@700;800;900&display=swap");

.auction {
width: 836px;
height: 795px;
position: relative;
margin: 0 65px;
}

.auction__radio {
display: none;
}

/* header */

.auction__header {
width: 836px;
height: 150px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
border-radius: 10px;
}

.auction__bg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

/* tabs */

.auction__tabs {
width: 243px;
height: 27px;
position: absolute;
left: 12px;
top: 134px;
z-index: 10;
display: flex;
gap: 12px;
}

.auction__tab {
height: 27px;
box-sizing: border-box;
padding: 5px 24px;
border-radius: 999px;
font-family: "Noto Serif Display", serif;
font-size: 12px;
line-height: 17px;
font-weight: 700;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

.auction__tab:hover {
transform: translateY(-1px);
}

.auction__tab_lots {
width: 130px;
}

.auction__tab_rules {
width: 101px;
}

#auction-lots:checked ~ .auction__tabs .auction__tab_lots,
#auction-rules:checked ~ .auction__tabs .auction__tab_rules {
background: #a8bda7;
color: #fff;
box-shadow: 0 0 16px rgba(168, 189, 167, 0.55);
}

#auction-lots:checked ~ .auction__tabs .auction__tab_rules,
#auction-rules:checked ~ .auction__tabs .auction__tab_lots {
background: #f2f2f2;
color: #222;
box-shadow: none;
}

/* panels */

.auction__panel {
width: 836px;
height: 624px;
position: absolute;
left: 0;
top: 171px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition:
opacity 0.35s ease,
transform 0.35s ease,
visibility 0.35s ease;
}

#auction-lots:checked ~ .auction__panel_lots,
#auction-rules:checked ~ .auction__panel_rules {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

/* lots tab */

.auction__lots {
width: 836px;
height: 624px;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-auto-rows: 200px;
gap: 12px;
}

/* rules tab */

.auction__rules {
width: 836px;
height: 624px;
box-sizing: border-box;
padding: 20px 100px;
overflow: hidden;
border-radius: 10px;
background: #f2f2f2;
box-shadow: inset 0 0 100px #b3b3b3;
}

.auction__rules-title {
margin: 0;
padding: 0 0 4px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.28);
font-family: "Noto Serif Display", serif;
font-size: 24px;
line-height: 35px;
font-weight: 900;
color: #2d2d2d;
}

.auction__rules-text {
height: 545px;
box-sizing: border-box;
padding-top: 12px;
overflow-y: auto;
overflow-x: hidden;
line-height: 1.42;
color: rgba(0, 0, 0, 0.76);
scrollbar-width: none;
-ms-overflow-style: none;
}

.auction__rules-text::-webkit-scrollbar {
display: none;
}

.auction__rules-text p {
margin: 0 0 18px;
}

.auction__rules-text p:last-child {
margin-bottom: 0;
}

/* lot card */

.lot-card {
width: 200px;
height: 200px;
position: relative;
padding: 20px 24px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
background: #f2f2f2;
cursor: pointer;
transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.lot-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 100px #b3b3b3;
}

.lot-card_1:hover,
.lot-card_1:focus-within {
box-shadow: 0 9px 9px rgba(0, 0, 0, 0.25);
}

.lot-front,
.lot-back {
position: relative;
z-index: 1;
}

.lot-front {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.lot-img {
width: 80px;
height: 120px;
display: flex;
align-items: center;
}

.lot-img img {
width: 80px;
height: 88px;
object-fit: contain;
filter: drop-shadow(-8px 12px 8px rgba(0, 0, 0, 0.1));
}

.lot-title {
width: 100%;
font-family: "Noto Serif Display", serif;
font-size: 14px;
line-height: 1.4;
color: #000;
text-align: center;
word-break: break-word;
}

.lot-back {
display: none;
height: 160px;
overflow-y: auto;
overflow-x: hidden;
font-size: 11px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.6);
scrollbar-width: none;
-ms-overflow-style: none;
}

.lot-back::-webkit-scrollbar {
display: none;
}

.lot-card_1:hover .lot-front,
.lot-card_1:focus-within .lot-front {
display: none;
}

.lot-card_1:hover .lot-back,
.lot-card_1:focus-within .lot-back {
display: block;
}

.lot-card_0 {
opacity: 0.4;
pointer-events: none;
cursor: default;
}

.lot-card_0 .lot-img img {
filter: grayscale(1) opacity(0.65) drop-shadow(-8px 12px 8px rgba(0, 0, 0, 0.08));
}
.rules-heading {
width: 100%;
display: flex;
align-items: center;
padding-top: 0px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
box-sizing: border-box;
margin-bottom: 11px;
}

.rules-heading__title {
font-family: "Noto Serif Display", serif;
font-size: 24px;
line-height: 1.44;
font-weight: 900;
color: #000;
white-space: nowrap;
word-break: break-word;
}

</style>

<div class="auction__tabs">
<label class="auction__tab auction__tab_lots" for="auction-lots">список лотов</label>
<label class="auction__tab auction__tab_rules" for="auction-rules">правила</label>
</div>

<div class="auction__panel auction__panel_lots">
<div class="auction__lots">
<div class="lot-card lot-card_1">
<div class="lot-front">
<div class="lot-img">
<img src="https://forumstatic.ru/files/0018/1c/bd/99855.png">
</div>
<div class="lot-title">Янтарное Эхо</div>
</div>

<div class="lot-back">
Зелье мерцает глубоким янтарём и пахнет полынью, мёдом и тёплым пергаментом.
Один глоток проясняет мысли, усиливает память и помогает услышать слабые
отголоски чужих намерений. Действует ровно час; передозировка вызывает
сонливость, дрожь в пальцах и серебристый туман в глазах до самого утра.
</div>
</div>

<div class="lot-card lot-card_1">
<div class="lot-front">
<div class="lot-img">
<img src="https://forumstatic.ru/files/0018/1c/bd/99855.png">
</div>
<div class="lot-title">Янтарное Эхо</div>
</div>

<div class="lot-back">
Описание лота при наведении. Текст внутри карточки можно прокручивать,
но нативный скроллбар скрыт.
</div>
</div>

<div class="lot-back">Описание лота.</div>
</div>

<div class="lot-card lot-card_0">
<div class="lot-front">
<div class="lot-img">
<img src="https://forumstatic.ru/files/0018/1c/bd/99855.png">
</div>
<div class="lot-title">Янтарное Эхо</div>
</div>
</div>

<div class="auction__panel auction__panel_rules">
<div class="auction__rules">
<h2 class="auction__rules-title">Правила участия</h2>

<div class="auction__rules-text">
<div class="rules-heading">
<div class="rules-heading__title">Правила участия</div>
</div>
Магическая Британия стоит на распутье, но в этой активности ваши посты
способны повлиять на будущее сюжета. Уйдёт ли волшебное сообщество в
ещё большую изоляцию или начнёт плотнее сотрудничать с магглами?
Станет ли техномагия объектом ещё более жёстких преследований, или
активисты добьются её частичной (а может, и полной) легализации?
В этом соревновании каждый написанный вами пост — это голос за то,
какой станет Магическая Британия.<br><br>
Как участвовать?<br>
Выберите одну из трёх политических команд и официально запишите в неё
одного из своих персонажей.
Каждая команда представляет свой путь развития магического общества:<br>
» Ковенант — консерваторы, сторонники изоляции и старых традиций.<br>
» Конкорд — либералы, выступающие за умеренные реформы и сотрудничество
с миром магглов.<br><br>
» Радикалы — сторонники решительных перемен и пересмотра многих
существующих правил.
Если вы не читали матчасть или забыли программу фракций, вы можете
освежить её в памяти здесь.
Что делать в самой активности?<br><br>
Всё просто: писать посты и приносить ссылки на них в эту тему.<br>
Каждый пост = 1 балл в копилку той команды, за которую вы играете.
<br><br>
Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию! Учитываются только посты, ссылки на которые вы принесли сюда сами —
автоматического подсчёта нет, так что не забывайте поддерживать свою
фракцию!
Что даёт победа?<br>
Команда, набравшая больше всего постов, определит направление сюжетного
развития нашего мира в следующем сезоне.

Кроме этого:<br>
» все участники команды-победителя, которые принесли ей хотя бы 1 пост,
получат призы;<br>
» первая тройка лидеров во всех трёх командах тоже получит отдельные
призы и награды.
</div>
</div>
</div>
</div>[/html]

Zion_test

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

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

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

аукцион

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

Поделиться12026-05-20 21:08:22

Поделиться22026-05-20 23:32:40