[html]
<style>
.punbb {
margin-left: 0px !important;
}
.container5{
margin:0px;
min-width:900px;
height: 500px;
background-color:var(--color-white);
background-image:var(--image-bg);
--cat-img: url(https://i.pinimg.com/736x/ce/63/99/ce63 … 84bd54.jpg);
--cat-render: url(https://upforme.ru/uploads/001c/1e/87/2/817353.png);
--bg1: var(--color-dark);
--bg3: var(--color-main);
--dark2: var(--color-main);
--fontDisplay: Bodoni Moda, serif;
--fontBody: Cormorant, serif;
}
.container5 a { text-decoration:none;color:var(--color-dark)!important; }
.morn-cat {
width:800px;
min-height:489px;
background-image:var(--cat-img);
background-position: -90px -350px;
background-size: cover;
margin:30px auto;
position:relative;
border-radius:35px;
box-shadow:0px 0px 0px 5px var(--bg1);
filter:drop-shadow(0px 0px 10px var(--color-main));
color:var(--color-main) !important;
font-family:var(--fontBody);
background-position: bottom
}
.morn-cat::before {
content:'';
display:block;
background-image:var(--cat-render);
height: 785px;
width: 800px;
position: absolute;
z-index: 2;
top: 91px;
left: -44px;
background-size: 330px auto;
pointer-events: none;
background-repeat: no-repeat;
}
.morn-cat::after {
content:'';
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(--color-white);
position:relative;
z-index:1;
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);
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 {
position:absolute;
left: 430px;
top:190px;
display:flex;
gap:16px;
}
.morn-guide-link a {
display:block;
background:linear-gradient(to bottom right,var(--color-white),var(--color-gray));
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(--color-main) !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:250px;
left:275px;
width:476px;
}
.morn-bored {
height:175px;
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:var(--image-bg);
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: 70px;
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(--color-white),var(--color-gray));
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(--color-white),var(--color-gray));
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="container5">
<div class="morn-cat">
<div class="morn-guide">
<div class="morn-guide-name">Гостевая<span>книга</span></div>
<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://upforme.ru/uploads/001c/1e/87/2/483919.png></i>Администратор; связь; ответы
<i><img src=https://upforme.ru/uploads/001c/1e/87/2/978022.png></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, если это разрешено администратором. Что разрешено, можно увидеть слева, при редактировании подписи.
