[html]<header>
<script src="https://kit.fontawesome.com/35aa805fc5.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700;800&display=swap" rel="stylesheet">
</header>
<div id="group" class="carrie">
<div class="CarriePage1">
<carrie-hover>
<img src="https://forumupload.ru/uploads/001b/13/b6/121/278279.jpg">
</carrie-hover>
<div class="carrie-title">
<h1> <b>para<u>die</u>se</b> <br> zeke - levi </h1>
<h22>Гори, гори моя звезда!
Мы за тобой продолжим путь
Нас накрывает как всегда.
Любовь твою мне не вернуть</h22>
</div>
</div>
</div>
<style>
@font-face {
font-family: "blackwing";
src: url("https://files.jcink.net/uploads2/hllmth/fonts/Blackwing_FREE.otf");
}
/************************************
COLOR VARIABLE
************************************/
#group {
--Accent: #8784a5;
--AccentRGBA: rgba(135,132,165,.5);
}
.carrie {
--CarrieMainFont: inter, sans-serif;
--PlaceHolder2: yellow;
}
/************************************
CODE
************************************/
.carrie {
width: 550px;
height: 450px;
background: #f1f1f1;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 550px);
grid-template-rows: minmax(150px, 1fr);
position: relative;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #ccc;
color: #333;
font-family: var(--CarrieMainFont);
border-radius: 8px;
}
/************************************
PAGE ONE
************************************/
.CarriePage1 {
position: sticky;
left: 0;
z-index: 1;
display: grid;
grid-template-columns: 250px 260px;
grid-template-rows: 450px;
grid-gap: 20px;
box-sizing: border-box;
background: #222;
color: #ccc;
}
.CarriePage1 carrie-hover {
grid-row: 1 / all;
}
.carrie-title {
text-transform: uppercase;
align-self: end;
background: radial-gradient(rgba(255,255,255,.15), #00ffe74d, #007ac1c7);
margin-bottom: 70px;
}
.carrie-title h1 {
text-align: center;
font-size: 32px;
color: #fff;
font-weight: 300;
margin: 20px 0 0 0;
line-height: 31px;
}
.carrie-title h1 b {
font-size: 44px;
font-weight: 700;
background: linear-gradient(to top, #c37082 50%, transparent 50%);
line-height: 35px;
display: inline-block;
padding: 0 4px;
}
.carrie-title h22 {
margin: 0;
font-size: 7px;
text-transform: uppercase;
line-height: 12px;
text-align: justify;
padding: 0 30px;
padding-top: 10px;
overflow: hidden;
letter-spacing: 1px;
text-align-last: center;
word-spacing: 3px;
height: 50px;
color: #f1f1f1;
}
[/html]
