��

mybb@mybb.ru (Vandra) — Thu, 03 Jul 2025 11:28:36 +0300

[html]
<style>

/* �� . �� ? �� : https://cssgradient.io/
�� , �� . �� . �� ! */

:root {
/* �� "��" � "��" */
--date-place-text-bg: linear-gradient(180deg, #ffffff, #60b0eb);

/* �� : �� . �� : �� . */
--ep-bg-grad:
linear-gradient(to top, #272B30 2%, transparent 60%),
radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%), transparent;

/* �� : center / �� - left / �� - justify */
--ep-desc-talign: left;

/* �� */
--ep-desc-bg: #342d1d47;

/* �� */
--ep-desc-clr: #fff9f0;

/* �� */
--ep-desc-width: 50%;

}

@font-face {
font-family: 'Corbel';
src: url('https://forumstatic.ru/files/001c/17/76/83460.ttf')
}

.arc-episode-wrapper {
width: 98%;
height: auto;
min-height: 270px;
position: relative;
margin-left: 10px;
box-shadow: 0 0 18px 2px #04030147;
border-radius: 10px;
overflow: hidden;
}

.arc-episode-wrapper>img {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
object-fit: cover;
}

.arc-episode-wrapper::before {
content: '';
background: var(--ep-bg-grad);
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

.arc-episode-strip {
position: absolute;
right: 0px;
top: 25px;
background: linear-gradient(to left, #211d1a94, #a3a3a347);
backdrop-filter: blur(5px);
width: 100%;
height: 57px;
box-shadow: 0 0 12px 2px #bba52f1f;
z-index: 2;
}

.arc-date-place {
display: flex;
flex-direction: row;
position: absolute;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
top: 5px;
right: 10px;
width: 50%;
height: 46px;
list-style: none !important;
padding: 0 !important;
margin: 0;
overflow: hidden;
font: 500 16px corbel;
}

.arc-date-place li {
font: 500 14px corbel;
background: none;
color: #f5efe6;
filter: drop-shadow(0px 0px 1px #00000060);
position: relative;
}

.arc-date-place li::before {
content: attr(data-title);
height: 20px;
font: 600 16px corbel;
position: absolute;
left: 50%;
transform: translatex(-50%);
top: -20px;
text-transform: uppercase;
background: var(--date-place-text-bg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.arc-episode-chars {
display: flex;
justify-content: flex-start;
align-items: center;
/* gap: 10px; */
width: 340px;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
left: 15px;
transition: ease-in-out .4s;
flex-direction: row;
flex-wrap: wrap;
z-index: 2;
}

.arc-episode-chars a {
display: block;
width: 100px;
height: 100px;
box-shadow: 0 0 8px 2px #7b7b7b57;
border-radius: 2px;
scale: .8;
position: relative;
overflow: hidden;
transition: ease-in-out .3s;
border-bottom: none;
}

.arc-episode-chars a::after {
content: attr(data-charname);
position: absolute;
display: flex;
height: 20px;
width: 100px;
color: #ffffff;
background: #4c4c4c5e;
justify-content: center;
align-items: center;
backdrop-filter: blur(4px);
border-radius: 0 0 2px 2px;
text-transform: uppercase;
font: 600 12px corbel;
letter-spacing: 1.5px;
transform: translate(0px, 0px);
bottom: -40px;
transition: ease-in-out .4s;
}

.arc-episode-chars a:hover::after {
transition-delay: .2s;
transform: translateY(-40px);
}

.arc-episode-chars a:hover {
scale: 1;
}

.arc-episode-chars a img {
object-fit: cover;
width: 100%;
height: 100%;
}

.arc-episode-desc_01 {
position: absolute;
width: 50%;
text-align: var(--ep-desc-talign);
font: 200 14px corbel;
color: var(--ep-desc-clr);
bottom: 0px;
right: 0px;
padding: 10px 20px;
background: var(--ep-desc-bg);
backdrop-filter: blur(6px);
box-shadow: -4px -3px 14px 0px #ffd2892b;
border-top-left-radius: 10px;
z-index: 2;
}

.arc-episode-desc_02 {
position: relative;
width: var(--ep-desc-width);
text-align: var(--ep-desc-talign);
font: 200 14px corbel;
color: var(--ep-desc-clr);
bottom: 0px;
left: 50%;
transform: translatex(-50%);
padding: 10px 20px;
background: var(--ep-desc-bg);
backdrop-filter: blur(6px);
box-shadow: -4px -3px 14px 0px #ffd2892b;
border-radius: 10px 10px 0 0;
z-index: 2;
}

@media screen and (min-width: 320px) and (max-width: 540px) {

.arc-episode-wrapper {
height: auto;
width: -webkit-fill-available;
overflow: hidden;
}

.arc-date-place {
right: 0px;
width: 100%;
}

.arc-episode-desc_01,
.arc-episode-desc_02 {
width: 100%;
padding: 5px 15px;
box-sizing: border-box;
border-radius: 10px;
position: relative;
}

.arc-episode-chars {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
margin-top: 85px;
left: 0px;
top: 0px;
transition: ease-in-out .4s;
flex-direction: row;
flex-wrap: wrap;
}

}

</style>

<div class='arc-episode-chars'>

<a href='#' data-charname='��'><img src='https://i.imgur.com/OnBGANj.png' /> </a>
<a href='#' data-charname='��'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
<a href='#' data-charname='��'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
<a href='#' data-charname='��'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
<a href='#' data-charname='��'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>
<a href='#' data-charname='��'> <img src='https://i.imgur.com/OnBGANj.png' /> </a>

</div>

<div class='arc-episode-desc_01'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel,
porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula
vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut
libero fermentum, non consequat lectus egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel,
porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula
vitae, accumsan sapien. Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut
libero fermentum, non consequat lectus egestas.
</div>
</section>[/html][hideprofile]

Vandra ��(�):

��

mybb@mybb.ru (TheLord) — Sun, 01 Jun 2025 18:47:39 +0300

� ��, �� . �� , �� , �� .

��

mybb@mybb.ru (TheLord) — Sun, 01 Jun 2025 16:47:10 +0300

��

mybb@mybb.ru (TheLord) — Sun, 01 Jun 2025 16:46:43 +0300

��, ��

��

mybb@mybb.ru (Vandra) — Sun, 01 Jun 2025 15:55:58 +0300

123

��

mybb@mybb.ru (TheLord) — Sat, 31 May 2025 20:37:22 +0300

� �� ?

��

mybb@mybb.ru (TheLord) — Sat, 31 May 2025 20:14:36 +0300

��

***

mybb@mybb.ru (TheLord) — Sat, 31 May 2025 20:08:47 +0300

�� !

�� , ��

mybb@mybb.ru (TheLord) — Sat, 31 May 2025 18:27:32 +0300

��

1232

mybb@mybb.ru (Vandra) — Fri, 23 May 2025 18:06:42 +0300

123123

Test

������ �����

���� ��� ��������

��������

������

�������� ���������

������� �������

������

***

���� � ������������ ������� ���������, ������� ������� �� ������� ����

1232

��

��

��

��

��

��

��

�� , ��