[html]
<style>
.punbb {
    margin-left: 0px !important;
}

.container4{
  margin:0px;
  min-width:900px;
    height: 630px;
  background-color:var(--bg2);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--bg3) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg3) 50%,transparent calc(50% + 1px));
  background-size:50px 50px;
 
  --cat-img: url(https://i.pinimg.com/564x/5f/33/40/5f33 … 6b19fb.jpg);
  --cat-render: url(https://forumupload.ru/uploads/001b/74/c7/2/99418.png);
 
    --bg1: #e7e3c5;
    --bg2: #a7a2da;
    --bg3: #42007b;
    --dark: #9d98b5;
    --dark2: #311772;
    --green: #d9b9c5;
 
  --fontDisplay: Bodoni Moda, serif;
  --fontBody: Cormorant, serif;
}
.container4 a { text-decoration:none;color:var(--green1)!important; }

.morn-cat {
width:800px;
min-height:610px;
background-image:var(--cat-img);
    background-position: -90px -350px;
    background-size: 1100px auto;
margin:80px auto;
position:relative;
border-radius:35px;
box-shadow:0px 0px 0px 5px var(--bg1);
filter:drop-shadow(0px 0px 10px var(--bg3));
color:var(--dark2) !important;
font-family:var(--fontBody);
}

.morn-cat::before {
content:'';
display:block;
background-image:var(--cat-render);
height: 785px;
    width: 800px;
    position: absolute;
    z-index: 2;
    top: -173px;
    left: -130px;
    background-size: 570px auto;
    pointer-events: none;
    background-repeat: no-repeat;
}

.morn-cat::after {
content:'dark kingdom';
display:block;
position:absolute;
right:0px;
top:-52px;
font:800 60px var(--fontDisplay);
text-transform:uppercase;
line-height:60px;
color:var(--bg1) !important;
letter-spacing:3px;
}

.morn-guide {
position:absolute;
    top: 30px;
    left: 220px;
text-shadow:0px 0px 0px 2px var(--bg1);
display:flex;
width:550px;
}

.morn-guide-name {
font:italic 800 80px var(--fontDisplay);
line-height:70px;
color:var(--dark) !important;
position:relative;
z-index:1;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding:20px 0px 5px 0px;
margin-top:-20px;
}

.morn-guide-name span {
display:block;
padding-left:58px;
}

.morn-guide-desc {
background-color:rgba(221,222,212,.75);
background-image:
    linear-gradient(45deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px));
 
background-size:15px 15px;
padding:28px 28px 28px 48px;
border-radius:25px;
flex-grow:1;
text-align:justify;
letter-spacing:.35px;
font-size:26px;
line-height:22px;
margin-left:-30px;
border:solid 5px var(--bg1);
}

.morn-guide-link {
position:absolute;
    left: 430px;
top:230px;
display:flex;
gap:16px;
}

.morn-guide-link a {
display:block;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-size:200%;
padding:12px;
border-radius:10px;
font:800 11px /10px var(--fontBody);
text-transform:uppercase;
position:relative;
letter-spacing:3.6px;
box-shadow:0px 0px 0px 3px var(--bg1);
}

.morn-guide-link a::before {
content:'';
display:block;
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
background-color:var(--dark);
border-radius:7px;
mix-blend-mode:overlay;
}

.morn-guide-link a div {
position:relative;
color:var(--bg3) !important;
text-shadow:0px 0px 3px var(--dark);
}

.morn-boreds {
display:grid;
grid-template-columns:repeat(1, 1fr);
gap:25px;
position:absolute;
z-index:3;
top:320px;
left:275px;
width:476px;
}

.morn-bored {
height:205px;
background-color:var(--color-white);
border-radius:20px;
box-shadow:0px 0px 0px 5px var(--bg1);
position:relative;
padding:25px;
}

.morn-bored::before {
content:'';
display:block;
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
background-image:
    linear-gradient(45deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px));
 
background-size:15px 15px;
border-radius:18px;
opacity:1;
}

.morn-bored-desc {
letter-spacing:.35px;
font-size:16px;
line-height:22px;
position:relative;
z-index:1;
margin:12px 0px 23px 0px;
text-transform:lowercase;
text-align:justify;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: var(--color-main);
}

.morn-bored-desc div {
    height: 100px;
    overflow: auto;
    padding: 10px;
    background: var(--color-white);
}

.morn-bored-mid {
display: inline-grid;
    background: var(--color-white);
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
z-index: 7;
}

.morn-bored-icon {
    display: flex;
    gap: 5px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 16px;
background: var(--color-white);
z-index: 7;
}

.morn-bored-icon i {
display:block;
}

.morn-bored-icon i img {
display:block;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
box-shadow:0px 0px 0px 2px var(--bg1);
border-radius:10px;
height:45px;
width:45px;
margin:2px;
display:flex;
justify-content:center;
align-items:center;
}

.morn-bored-recent {
font:800 16px / 20px var(--fontBody);.
text-transform:uppercase;
text-align:ri ght;
letter-spacing:.25px;
background: var(--color-white);
z-index: 7;
margin-top: 8px;
    margin-bottom: -12px;
}
.morn-bored-recent a {
display:block;
color:var(--dark);
}
.morn-bored-recent-1 {
font:900 14px / 16px var(--fontDisplay);
text-transform:uppercase;
display:block;
margin:4px 0px 8px 0px;
color:var(--dark2)!important;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent!important;
}
.morn-bored-name {
margin:0px -10px -5px -28px;
display:grid;
grid-template-columns:auto 40px;
gap:15px;
position:relative;
z-index:1;
}

</style>

<div class="container4">
<div class="morn-cat">
  <div class="morn-guide">
    <a href="#" class="morn-guide-name">Гостевая<span>книга</span></a>
    <div class="morn-guide-desc">
      рейтинг 18+<br>
эпизоды
    </div>
  </div>
    <div class="morn-guide-link">
      <a href="#"><div>Акции</div></a>
      <a href="#"><div>ФАК</div></a>
      <a href="#"><div>Правила</div></a>
    </div>
  <div class="morn-boreds">
    <div class="morn-bored">
      <div class="morn-bored-mid">
        <div class="morn-bored-icon">
          <i><img src=https://forumupload.ru/uploads/001b/e8/5e/4/874494.jpg></i>Администратор; связь; ответы
          <i><img src=https://forumupload.ru/uploads/001b/e8/5e/4/874494.jpg></i>Администратор; связь; ответы
        </div>
        <div class="morn-bored-recent">
          <a href="#" class="morn-bored-recent-1">Забронированы</a>
        </div>
      </div>
      <div class="morn-bored-desc"><div>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
Имя - Игрок - Дата<br>
</div></div>
    </div>

     
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>

</div>
[/html]
[hideprofile]

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

Подпись - это небольшая приписка, прилагаемая к вашим сообщениям. Это может быть все, что вам нравится. Например, ваша любимая цитата. В подписи можно использовать встроенные теги BBCode и/или HTML, если это разрешено администратором. Что разрешено, можно увидеть слева, при редактировании подписи.