[html]<div class="sumeptemp">
<div class="sumepic"></div>
<div class="sumeptitle">Санджня раненного леса</div>
<div class="sumepdate">17 апрея ✦ Сумеру, Авидья</div>
<div class="sumepdesc">
<p>Недавняя <a href="https://genshintales.ru/viewtopic.php?id=1412" target="_blank">страшная гроза</a> повалила немало деревьев в Авидье, и вместе с их могучими корнями вскрылись глубокие подземные провалы. В одном из них обнаружились давно забытые туннели, и теперь Дозорные отправляются в экспедицию вместе с учёными из Вахуманы.</p>
</div>
<div class="sumepchar">
<p><a href="https://genshintales.ru/profile.php?id=194" target="_blank">Тинари</a> ✦ <a href="https://genshintales.ru/profile.php?id=320" target="_blank">Шерити</a>
</p>
</div>
</div>
<style>
* {
box-sizing: border-box;
}
@font-face {
font-family: "Genshin";
src: url("https://forumstatic.ru/files/0014/98/d3/50051.ttf")
format("truetype");
font-style: normal;
font-weight: normal;
}
body {
background: #e4d5cf;
}
.sumeptemp {
display: flex;
background: url(https://forumstatic.ru/files/0014/98/d3/20492.png);
background-size: cover;
width: 600px;
height: 245px;
filter: drop-shadow(-5px 5px 8px #000000ad);
margin: 20px 25px;
}
.sumepic {
display: flex;
position: absolute;
left: 341px;
top: 23px;
background: url("https://i.redd.it/genshin-impact-forest-sumeru-v0-vn8j52fzizha1.png?width=1920&format=png&auto=webp&s=d5bc24e0201fecc251fd71de2b0c6c7144c0088a");
background-size: cover;
background-position-x: 36%;
width: 251px;
height: 200px;
transform: rotate(2deg);
}
.sumeptitle {
display: flex;
position: absolute;
top: 22px;
left: 108px;
width: 220px;
text-align: center;
height: 52px;
font-family: "Genshin";
font-size: 16px;
font-style: italic;
font-weight: bold;
line-height: 110%;
align-content: center;
flex-wrap: wrap;
background: -webkit-linear-gradient(#668a70, #a1ac86);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
justify-content: center;
}
.sumepdate {
display: flex;
position: absolute;
top: 78px;
left: 108px;
width: 220px;
text-align: center;
font-family: "Genshin";
font-size: 10px;
line-height: 110%;
align-content: center;
flex-wrap: wrap;
justify-content: center;
color: #668a70;
}
.sumepdesc {
display: flex;
position: absolute;
width: 228px;
padding: 0 8px 0 0;
max-height: 68px;
left: 96px;
top: 100px;
font-family: "Genshin";
font-size: 12px;
color: #a1ac86;
line-height: 110%;
align-content: flex-start;
flex-wrap: wrap;
overflow-y: auto;
}
.sumepdesc a {
color: #668a70 !important;
text-decoration: none !important;
font-family: "Genshin" !important;
font-size: 12px !important;
}
.sumepdesc a:hover {
background: -webkit-linear-gradient(#668a70, #a1ac86) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sumepdesc p {
margin: 0px! important;
padding: 0px! important;
line-height: 110% !important;
text-align: start!important;
}
.sumepdesc::-webkit-scrollbar {
max-width: 4px;
}
.sumepdesc::-webkit-scrollbar-thumb {
width: 3px;
height: 5px;
background-color: #dae8cc;
border: 1px solid #d6d2c6;
}
.sumepdesc::-webkit-scrollbar-track {
background-color: #daddcd;
border: 1px solid #c7c1b7;
height: 40px;
}
.sumepchar {
display: flex;
position: absolute;
width: 150px;
height: 28px;
left: 138px;
top: 185px;
font-family: "Genshin";
font-size: 12px;
color: #a1ac86;
line-height: 110%;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-content: center;
}
.sumepchar p {
margin: 0px;
}
.sumepchar a {
font-family: "Genshin" !important;
font-size: 12px !important;
color: #a6976a !important;
text-decoration: none !important;
}
.sumepchar a:hover {
background: -webkit-linear-gradient(#668a70, #a1ac86) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
</style>
[/html]
Отредактировано Tighnari (2023-09-04 11:06:47)