[hideprofile]
|
[html]
<style>
:root{
--promo-radius: 10px;
--promo-color: var(--bgpostauthor);
--promo-title-bg: rgba(0,0,0,.55);
--card-w: 240px;
--card-h: 360px;
--accent: #d9f0f4;
}
.promo {
width: 84%;
margin: 24px auto;
border-radius: var(--promo-radius);
overflow: visible;
position: relative;
box-shadow: 0 6px 10px rgba(0,0,0,.25);
background: var(--white1);
}
.promo__top {
height: 280px;
background:
linear-gradient(to top, var(--white1) 0%, rgba(0,0,0,0) 30%),
url("https://forumstatic.ru/files/001c/25/14/66964.jpg") center/cover no-repeat;
}
.promo__title {
position: absolute;
top: -24px;
right: 20px;
/*transform: rotate(-90deg);*/
font-size: 20px !important;
letter-spacing: .5px;
padding: 10px 16px;
background: #fff;
box-shadow: 0 6px 10px rgba(0,0,0,.4);
border-radius: 5px;
}
.promo__cards {
display: grid;
grid-template-columns: repeat(3, var(--card-w));
justify-content: center;
gap: 18px;
margin-top: -30px;
padding: 0px 18px 24px;
}
.card {
width: var(--card-w);
height: var(--card-h);
perspective: 1400px;
}
.card__inner{
width: 100%; height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
border-radius: 14px;
box-shadow: 0 6px 10px rgba(0,0,0,.25);
}
.card:hover .card__inner{ transform: rotateY(180deg) }
.card__face{
position:absolute; inset:0;
border-radius: 14px;
overflow: hidden;
backface-visibility: hidden;
background: #fff;
display:flex; flex-direction:column;
}
.card__face--front{
background: #fff;
}
.card__image {
position: relative;
height: 45%;
background: var(--accent);
border-radius: 8px 8px 0 0;
overflow: visible;
z-index: 1;
}
.card__image img {
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
user-select: none;
border: 8px solid #fff;
}
.card__title{
margin-top: 70px;
text-align: center;
padding: 12px 14px;
font-weight: 800;
font-size: 18px;
letter-spacing: .4px;
}
.card__award {
display: grid; text-align: center; justify-content: center; margin-top: -20px;
}
.card__award img {
height: 70px;
}
.card__face--back{
transform: rotateY(180deg);
background: radial-gradient(120% 120% at 50% 10%, #fff 0%, var(--accent) 90%);
padding: 16px;
gap: 10px;
}
.card__back-title{
font-weight: 800; font-size: 18px; margin: 2px 6px 6px;
}
.card__text{
font-size: 11px; line-height: 1; opacity: .95;
}
/* адаптив: на узких экранах 2 и 1 колонка */
@media (max-width: 860px){
.promo__cards{ grid-template-columns: repeat(2, var(--card-w)); }
}
@media (max-width: 560px){
.promo__cards{ grid-template-columns: 1fr; }
.card{ width: min(100%, 360px); justify-self:center }
}
</style>
<section class="promo">
<div class="promo__top"></div>
<h2 class="promo__title">01.11.25 — 31.12.25</h2>
<div class="promo__cards">
<!-- Карта 1 -->
<article class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<div class="card__image"><img src="https://forumstatic.ru/files/001c/25/14/16426.jpg" alt="...">
</div>
<div class="card__title">Noah Frost</div>
<div class="card__award"><img src="https://img.pokemondb.net/sprites/scarlet-violet/normal/1x/weavile.png"></div>
<div style="margin-top: 5px;font-size: 10px;text-align: center;">Weavile [lv. 30]</div>
</div>
<div class="card__face card__face--back">
<div class="card__back-title">Ноа Фрост</div>
<p class="card__text"><b>Внешность:</b><br>Chongyun (Genshin Impact)</p>
<p class="card__text">Фрост имеет искреннюю непереносимость всего несправедливого в мире. Если бы он услышал о существовании команды Охота, то непременно попытался бы вступить в её ряды.<br><br>Очень дорожит сборником шуток и смешных рассказов, подаренный его старшим братом. Наверное, тот желал, чтобы Ноа улыбался почаще и больше социализировался, но это то, над чем ещё необходимо работать.</p>
</div>
</div>
</article>
<!-- Карта 2 -->
<article class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<div class="card__image"><img src="https://forumstatic.ru/files/001c/25/14/44109.png" alt="...">
</div>
<div class="card__title">Riley Rains</div>
<div class="card__award"><img src="https://img.pokemondb.net/sprites/scarlet-violet/normal/1x/ninetales-alolan.png"></div>
<div style="margin-top: 5px;font-size: 10px;text-align: center;">Alolan Ninetales [lv. 30]</div>
</div>
<div class="card__face card__face--back">
<div class="card__back-title">Райли Рейнс</div>
<p class="card__text"><b>Внешность:</b><br>Mirajane Strauss (Fairy Tail)</p>
<p class="card__text">В своём родном городе Сноупонте (Синно) Райли часто играла роль снежной девы на деревенских праздниках и церемониях. Белоснежные волосы, безупречное лицо и образцовые манеры. Всё это ей вполне нравилось и было частью её культуры, но недавно что-то в ней переменилось. Решив, что слишком молода, чтобы привязывать себя к одному месту, она отправилась в путешествие в Канто, чтобы встретить новых людей, получить массу новых впечатлений и... может быть, набить тату?</p>
</div>
</div>
</article>
<!-- Карта 3 -->
<article class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<div class="card__image"><img src="https://forumstatic.ru/files/001c/25/14/22538.png">
</div>
<div class="card__title">No Name</div>
<div class="card__award"><img src="https://forumstatic.ru/files/001c/25/14/31433.png"></div>
<div style="margin-top: 5px;font-size: 10px;text-align: center;">На выбор [lv. 30]</div>
</div>
<div class="card__face card__face--back">
<div class="card__back-title">Без имени</div>
<p class="card__text">Имя, пол и внешность на ваш выбор.</p>
<p class="card__text">Данная опция не ограничена количеством, то есть по данной акции может прийти несколько человек. Единственное условие — выбранный покемон должен иметь ледяной тип или смешанный тип, один из которых ледяной.</p>
</div>
</div>
</article>
</div>
</section>
[/html]