[html]
<div class=chtototelo>
<div class=chtotofon2></div>
<div class=chtotonazvanie>приветственный набор</div>
<div class=chtototext>
добро пожаловать на сайд! нам тебя как раз и не хватало ♥
<br><br>после принятия анкеты можешь выбрать любой набор из двух вариантов и забрать его к себе на профиль. наводим красоту с порога ;з
<br><br>ранее зарегистрированные участники тоже могут забрать себе по одному оформлению из двух ниже перечисленных. всё, что нужно сделать, просто заполнить код, указать номер набора и ответить, ставим в профиль или нет.
<br><br><center>♥ ♥ ♥</center>
<table width="100%"><tr valign="top">
<td width="250px"><h1>слот 1</h1>
<center><div class="profile-card">
<div class="top-bar flash-glow">
<img src="https://i.ibb.co/HLxJdfY6/image.png" alt="плашка">
</div>
<div class="avatar flash-glow">
<img src="https://i.ibb.co/7dCS4Gzm/Browser-Preview-tmp.gif" alt="аватар">
</div>
<div class="nickname">SIDE EFFECT</div>
<br>
<div class="name-age">side effect, 90</div>
<div class="status-icon">
<img src="https://i.ibb.co/YTF6Ftzs/d5h3d5t-b40e6d31-52e5-4fd1-a6a2-f758dc67f16b.gif" alt="иконка">
</div>
<div class="stats">
<span>10000</span>
<span>+10 000</span>
<span>10 000</span>
<span>100</span>
</div>
<div class="bottom-bg flash-glow">
<img src="https://i.ibb.co/Gv0L64d5/image.png" alt="фон">
</div>
</div>
<style>
.profile-card {
width: 200px;
background: #f2f2f2;
border-radius: 10px;
overflow: hidden;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
padding: 10px;
position: relative;
}
.top-bar {
width: 180px;
margin: 0 auto;
}
.top-bar img {
width: 100%;
display: block;
border-radius: 6px;
object-fit: cover;
}
.avatar {
margin-top: 10px;
width: 140px;
height: 140px;
margin-left: auto;
margin-right: auto;
}
.avatar img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
display: block;
}
/* Блик */
.flash-glow {
position: relative;
overflow: hidden;
}
.flash-glow::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
transition: all 0.3s ease;
pointer-events: none;
}
.flash-glow:hover::before {
animation: flash-move 0.7s ease-out;
}
@keyframes flash-move {
0% { left: -75%; }
100% { left: 130%; }
}
.nickname {
font-size: 13px;
font-weight: bold;
margin: 5px 0 0 0;
}
.name-age {
font-size: 12px;
font-style: italic;
margin-bottom: 10px;
}
.status-icon img {
width: 24px;
height: 24px;
margin: 5px auto;
}
.stats {
display: flex;
justify-content: space-around;
font-size: 11px;
margin: 8px 0;
}
.bottom-bg img {
width: 100%;
height: auto;
display: block;
border-radius: 0 0 0px 0px;
}
</style></center>
</td>
<td> <br><br><img src="https://i.ibb.co/tMzqV61p/Browser-Preview-tmp.png" alt="разделитель"></td>
<td><h1>слот 2</h1>
<center><div class="profile-card">
<div class="top-bar flash-glow">
<img src="https://i.ibb.co/93ZCLnzq/2.png" alt="плашка">
</div>
<div class="avatar flash-glow">
<img src="https://i.ibb.co/7dCS4Gzm/Browser-Preview-tmp.gif" alt="аватар">
</div>
<div class="nickname">SIDE EFFECT</div>
<br>
<div class="name-age">side effect, 90</div>
<div class="status-icon">
<img src="https://i.ibb.co/nsZmnGKT/dce6d48-701535cc-5a83-4bbc-9f01-b6ee35fe6bb0.gif" alt="иконка">
</div>
<div class="stats">
<span>10000</span>
<span>+10 000</span>
<span>10 000</span>
<span>100</span>
</div>
<div class="bottom-bg flash-glow">
<img src="https://i.ibb.co/cSz7d5C8/2.png" alt="фон">
</div>
</div>
<style>
.profile-card {
width: 200px;
background: #f2f2f2;
border-radius: 10px;
overflow: hidden;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
padding: 10px;
position: relative;
}
.top-bar {
width: 180px;
margin: 0 auto;
}
.top-bar img {
width: 100%;
display: block;
border-radius: 6px;
object-fit: cover;
}
.avatar {
margin-top: 10px;
width: 140px;
height: 140px;
margin-left: auto;
margin-right: auto;
}
.avatar img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
display: block;
}
/* Блик */
.flash-glow {
position: relative;
overflow: hidden;
}
.flash-glow::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
transition: all 0.3s ease;
pointer-events: none;
}
.flash-glow:hover::before {
animation: flash-move 0.7s ease-out;
}
@keyframes flash-move {
0% { left: -75%; }
100% { left: 130%; }
}
.nickname {
font-size: 13px;
font-weight: bold;
margin: 5px 0 0 0;
}
.name-age {
font-size: 12px;
font-style: italic;
margin-bottom: 10px;
}
.status-icon img {
width: 24px;
height: 24px;
margin: 5px auto;
}
.stats {
display: flex;
justify-content: space-around;
font-size: 11px;
margin: 8px 0;
}
.bottom-bg img {
width: 100%;
height: auto;
display: block;
border-radius: 0 0 0px 0px;
}
</style></center>
</td>
<td></td>
</tr></table>
</div></div>[/html]
1. номер слота: 2. ставить в профиль или нет: