[html]
<style>
.hb-wrapper {
    width:99%;
    height: 300px;
    background: linear-gradient(to top, #272B30 2%, transparent 80%),
                       radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 70%),
                       url(https://i.imgur.com/K43LGXY.png) center / cover no-repeat;
    position: relative;
    margin-left: 10px;
    box-shadow: 0 0 8px 2px #396a8b57;
    border-radius: 10px;
    overflow:hidden;
}

.hb-logo {
    display: flex;
    flex-shrink: 0;
    position: absolute;
    right: 0px;
    top: 50px;
    justify-content: flex-end;
    background: #9cabb529;
    padding: 10px;
    backdrop-filter: blur(9px);
    width: 100%;
    height: 57px;
    object-fit: cover;
}

.hb-logo > img {
    height: 55px;
    position: relative;
    margin-right: 145px;
}

.hb-chars {
display:flex;
gap:30px;
position:absolute;
top:85px;
left:70px;
transition:ease-in-out .4s;
}

.hb-chars a {
display:block;
width:130px;
height:130px;
box-shadow: 0 0 8px 2px #396a8b57;
scale: .8;
position:relative;
overflow:hidden;
transition:ease-in-out .4s;
}

.hb-chars a::after {
    content: attr(data-charname);
    position: absolute;
    display: flex;
    height: 30px;
    width: 130px;
    color: #c4d5dd;
    background: #6b869d5e;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    font: 200 13px arial;
    letter-spacing: 1.5px;
    transform: translate(0px, 0px);
    bottom: -40px;
    transition:ease-in-out .4s;
}

.hb-chars a:hover::after {
    transition-delay: .4s;
    transform: translate(0px, -40px);
}

.hb-chars a:hover {
scale: 1;
}

.hb-chars a.senua {
background:url('https://i.imgur.com/ci3un9D.jpeg') center / cover;
}

.hb-chars a.thorgestr {
background:url('https://i.imgur.com/OGsHx49.jpeg') center / cover;
}

.hb-desc {
    position: absolute;
    width: 50%;
    text-align: justify;
    font: 200 13px arial;
    color: #c4d5dd;
    bottom: 0px;
    right: 0px;
    padding: 10px 20px;
    margin: 10px 15px 5px;
    background: #1d2a3447;
    backdrop-filter: blur(6px);
    box-shadow: -4px -3px 3px 0px #25282d38;
}

</style>

<section class="hb-wrapper">
<div class='hb-logo'><img src='https://i.imgur.com/G6nK4Hm.png'  /></div>

<div class='hb-chars'>
<a href='#' data-charname='Senua' class='senua'></a>
<a href='#' data-charname='Thorgestr' class='thorgestr'></a>
</div>

<div class='hb-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. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit. In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.
</div>

</section>

[/html][hideprofile]

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

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