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

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

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

.rogue-episode-wrapper::before{
content:'';
background: linear-gradient(to top, #272B30 2%, transparent 60%), radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%), transparent;
width:100%;
height:100%;
position:absolute;
z-index:1;
}

.rogue-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;
}

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

.rogue-date-place li:nth-child(odd) {
    height: 20px;
    font: 600 16px corbel;
    position: relative;
    text-transform: uppercase;
    background: linear-gradient(20deg, rgb(189, 163, 128), rgb(241 207 152), rgb(201, 168, 123));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rogue-date-place li:nth-child(even) {
    font: 500 14px corbel;
    background: none;
    color: #e7fbff;
    filter: drop-shadow(0px 0px 1px #00000060);
}

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

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

.rogue-episode-chars a::after {
    content: attr(data-charname);
    position: absolute;
    display: flex;
    height: 20px;
    width: 100px;
    color: #fefffa;
    background: #7a72465e;
    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;
}

.rogue-episode-strip::after {
content: '';
    background: url(https://forumstatic.ru/files/001c/17/76/55311.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 46px;
    height: 192px;
    display: block;
    top: -119px;
    right: 80px;
    z-index: 1;
    transform: rotate(-90deg);
}

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

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

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

.rogue-episode-desc {
    position: absolute;
    width: 50%;
    text-align: justify;
    font: 200 14px corbel;
    color: #fff9f0;
    bottom: 0px;
    right: 0px;
    padding: 10px 20px;
    /* margin: 10px 15px 5px; */
    background: #342d1d47;
    backdrop-filter: blur(6px);
    box-shadow: -4px -3px 14px 0px #ffd2892b;
    border-top-left-radius: 10px;
    z-index: 2;
}

.rogue-episode-desc::before {
    content: '';
    background: url(https://forumstatic.ru/files/001c/17/76/40760.png) no-repeat;
    background-size: 100%;
    clip-path: polygon(0 0, 43% 0, 43% 100%, 0% 100%);
    position: absolute;
    width: 345px;
    height: 118px;
    display: block;
    top: 4px;
    left: -128px;
    z-index: -6;
}

</style>

<section class="rogue-episode-wrapper">
    <img src='https://i.imgur.com/ENybzzr.png' /> <!--вставляем свою картинку на фон-->
    <div class='rogue-episode-strip'>
        <ul class="rogue-date-place">
            <li>Дата</li> <!-- можно подставить свои данные -->
            <li>dd.mm.yyyy</li> <!-- и здесь тоже -->
            <li>Место</li> <!-- и здесь -->
            <li>Country, City, District</li> <!-- и тут -->
        </ul>
    </div>

    <div class='rogue-episode-chars'>
        <!--
        В a href в кавычки вместо # вставляется ссылка на профиль. Всё просто.
        В data-charname для красоты оставлено место только под недлинное имя. То есть, если персонажа зовут Гаспар-Сильвестр Великий Лорд фон Длиннокабачковский, то лучше написать просто: Гаспар.
        В img src подставляется картинка любого размера. Она будет центрироваться.
        Кстати, участников может быть до 6. Они перенесутся на новую строку.
    -->
        <a href='#' data-charname='Warden'><img src='https://i.imgur.com/2kNgpbm.png' /> </a>
        <a href='#' data-charname='Kensei'> <img src='https://i.imgur.com/saIqX4s.png' /> </a>
        <a href='#' data-charname='Raider'> <img src='https://i.imgur.com/iO5wwcL.png' /> </a>
    </div>

    <!--Описание эпизода. Легко влезет 600 символов. Если нужно больше, включаем hideprofile. Скроллбара не будет >:] -->
    <div class='rogue-episode-desc'>
        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]

Подпись автора

Текст Текст Текст