[hideprofile]
[html]
<div class="wrapper">
<div class="title-plate">
<h1>Пожиная лотосы, пожирая поедателей</h1>
</div>
<div class="info-plate"><span class="date-loc">29.03.501, Энканомия <br>Люмин ✦ Сора</span></div>
</div>
<style>
:root {
--bgp: url("https://i.gyazo.com/b280ddb16f5e50369db8ac11aad369c8.jpg");
/* ССЫЛКА НА КАРТИНКУ */
--pos: 0% 0%;
/* СДВИГ ИЗОБРАЖЕНИЯ ПО ГОРИЗОНТАЛИ И ВЕРТИКАЛИ */
}
@font-face {
font-family: "Genshin";
src: url("https://forumstatic.ru/files/0014/98/d3/50051.ttf");
font-style: normal;
font-weight: normal;
}
.wrapper,
.wrapper * {
box-sizing: border-box;
}
.wrapper {
width: 612px;
height: 338px;
background: var(--bgp) no-repeat;
background-size: cover;
background-position: var(--pos);
display: flex;
margin-left: 136px;
margin-top: 40px;
margin-bottom: 40px;
flex-direction: column;
}
.wrapper::before {
content: "";
background: url(https://forumupload.ru/uploads/001b/5c/7f/86/743926.png) no-repeat;
background-size: 100%;
width: 700px;
height: 407px;
position: absolute;
top: 2px;
left: 92px;
display: block;
}
.title-plate {
background: url(https://forumupload.ru/uploads/001b/5c/7f/86/445960.png) no-repeat;
background-size: 100%;
width: 100%;
height: 400px;
position: relative;
display: block;
margin: auto;
top: -38px;
}
.title-plate h1 {
font-family: "Genshin";
color: #f8e9ad;
width: 229px;
height: 51px;
overflow: hidden;
display: flex;
font-size: 18px;
font-weight: normal;
align-items: center;
position: relative;
top: 93px;
left: 218px;
text-shadow: 2px 2px 2px #806a43;
opacity: 92%;
text-align: center;
}
.info-plate {
background: url(https://forumupload.ru/uploads/001b/5c/7f/86/545953.png) no-repeat;
background-size: 100%;
width: 260px;
height: 100%;
position: relative;
display: block;
margin: auto;
bottom: -108px;
opacity: 88%;
}
.info-plate .date-loc {
--bgp: url("https://i.gyazo.com/f913dfc68f9b08d942d060d5965a686b.jpg");
--pos: 0% 0%;
box-sizing: border-box;
font-family: "Genshin";
color: #9eb5e1;
width: 229px;
height: 27px;
overflow: hidden;
display: flex;
font-size: 10px;
font-weight: normal;
align-items: center;
top: 5px;
left: 15px;
line-height: 110%;
text-align: center;
font-style: italic;
position: relative;
justify-content: center;
}
</style>
[/html]