Код:
<!--HTML-->
<div class="guestbook">
<div class="guestbooktop">
<div class="guestcover">
<span>forum name test</span>
<span class="info">городская мистика — рейтинг — эпизоды</span>
<div>Он не знал, что это за городок, потому что на дороге не было никаких знаков с названием. Указатель – сосновую доску с выцветшей от времени краской – еще лет двадцать назад сбил один дядька, который решил оприходовать за одну ночь сразу двоих любовниц. Его голова покоилась на груди Водки, а рука – на бедре у Виски, когда он утратил контроль над своим автомобилем. Указатель с названием города до сих пор валялся в нескольких футах от дороги, в густых зарослях пуэрарии, покоричневевший от крови, которая давным-давно высохла.</div>
</div>
</div>
<div class="faces_names">
<div class="guestblock"> внешности
<div>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
</div>
</div>
<div class="guestblock"> имена и роли
<div>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
<span>name surname / <a href="ссылка">nickname</a></span>
</div>
</div>
</div>
<div class="guestbookbottom">
<div class="guestcode"><strong class="legend"><a href="javascript://" onclick="select_text($(this).parent().next().find('pre').get(0));return!1">Выделить код</a></strong><div class="blockcode"><div class="scrollbox"><pre>Имя Фамилия внешности на англ. / <a href="ссылка_на_профиль">ник</a></pre></div></div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Nunito:wght@400;600;700;800&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
.guestbook {
background:#141414;
width: 550px;
border: 20px solid #e7e7e7;
margin: auto;
position: relative
}
.guestbooktop {
background: url(https://forumstatic.ru/files/001a/da/fe/37503.jpg) no-repeat top center;
background-size: cover;
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 25px), 0% 100%);
width: 100%;
height: 100%
}
.guestcover {
background: rgba(0,0,0,.5);
height: 100%;
color: #d3d2d2;
text-shadow: 1px 1px 1px #000;
padding: 20px 20px 50px 20px;
text-align: justify
}
.guestcover span {
display: block;
text-align: center;
font: normal 30px tinos;
text-transform: uppercase;
letter-spacing: 5px;
border: 1px solid rgba(255,255,255,.1);
padding: 10px 0
}
.guestcover .info {
font: 500 7px nunito;
background: rgba(0,0,0,.5);
padding: 5px 10px;
margin: 10px 0;
border: 0;
letter-spacing: 2px
}
.guestcover div {
font: 500 11px/18px nunito;
padding-right: 5px;
overflow-y: auto;
max-height: 70px
}
.faces_names {
margin-top: 15px;
display: flex;
justify-content: space-between
}
.guestblock {
font: 800 13px nunito;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
width: 270px;
color: #d3d2d2
}
.guestblock > div {
overflow-y: auto;
max-height: 150px
}
.guestblock span {
font: 500 10px nunito;
text-transform: none;
letter-spacing: 0px;
display: block;
margin: 5px
}
.guestblock span:first-child {
margin-top: 10px
}
.guestbookbottom {
background: url(https://forumstatic.ru/files/001a/da/fe/37503.jpg) no-repeat bottom right;
background-size: cover;
clip-path: polygon(0% 25px, 100% 0%, 100% 100%, 0% 100%);
width: 100%;
height: 100px;
margin-top: 15px
}
.guestcode {
top: 30px;
position: relative;
width: calc(100% - 30px);
margin: auto
}
.guestbookbottom .blockcode {background: rgba(0,0,0,.8);
padding: 35px 0 10px 0;
color: #d3d2d2;
text-align: center;
}
.guestbookbottom strong.legend {
color: #e7e7e7;
background: #444853;
font-family: nunito;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
padding: 3px 0px;
margin-top: 5px !important;
margin-left: 5px;
position: absolute;
display: block;
width: calc(100% - 10px);
text-align: center
}
.guestbookbottom .legend a {color: #e7e7e7}
.guestbookbottom .legend a:hover {color: #888}
.guestbookbottom .scrollbox{width: auto !important;}
.guestbookbottom pre {font-family: montserrat !important;
font-size: 9px;
}
</style>
