[html]<div id= "act1">

<div class= "text">

Сегодня тот самый день, когда мир оживает яркими красками, и у вас есть уникальная возможность стать обладателем популярной внешности!   Мы запускаем невероятную акцию на внешности, которые по какой-то причине все еще свободны, словно звезды, ждущие своего часа, чтобы засиять.<br>
В качестве подарка вы можете выбрать одно из ниже представленных оформлений, а также получить 500 жетонов на счёт после принятия в игру в теме <a href="/viewtopic.php?id=7">связь с амс</a> <br><br>

<b>В главных ролях акции:</b><br>
choi beomgyu (txt), yang jungwon (enhypen), lee know (stray kids), kim seungmin (stray kids), ning yizhuo (aespa), yeh shuhua (i-dle)<br><br>

<div class="skins-container">
    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/507529.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/236508.png" alt="icon"></div>
        <div class="skin-name">first</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/203247.png" alt="avatar"></div>
        <div class="skin-text">tell your wishes, what you dream of from night to sunrise, I’ll be there</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/243104.png" alt="plaque"></div>
    </div>

    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/433019.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/147527.png" alt="icon"></div>
        <div class="skin-name">second</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/97541.png" alt="avatar"></div>
        <div class="skin-text">tell your wishes, what you dream of from night to sunrise, I’ll be there</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/562101.png" alt="plaque"></div>
    </div>

    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/276027.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/342897.png" alt="icon"></div>
        <div class="skin-name">third</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/606876.png" alt="avatar"></div>
        <div class="skin-text">tell your wishes, what you dream of from night to sunrise, I’ll be there</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/457435.png" alt="plaque"></div>
    </div>
</div>

</div>
</div>

<style>
#act1 {
    width: 900px;
    margin: 0 auto;
    background: url(https://upforme.ru/uploads/001c/6a/04/5/404615.png) no-repeat scroll center top;
    background-color: var(--bgclr2);
    padding-bottom: 10px;
    border-radius: 10px;
}
#act1 .text {
    position: relative;
    margin: 0px 35px 0px 35px;
    padding-top: 220px;
    text-align: center;
    padding-bottom: 10px;
}

.skins-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 10px;
}
.skin {
    position: relative;
    background: var(--bgclr2);
    width: 100%;
    max-width: 210px;
    aspect-ratio: 210/188;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.skin > img {
    width: 100%;
    height: auto;
    display: block;
}
.ico {
    position: absolute;
    width: 25px;
    height: 25px;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    background: var(--bgclr2);
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ico img {
    width: 17px;
    height: 17px;
}
.skin-name {
    position: absolute;
    width: 190px;
    top: 30px;
    left: 10px;
    background:var(--bgclr2);
    border-radius: 10px;
    font-family: 'Verdana', sans-serif;
    font-size: 12px;
    color: #333;
    font-weight: bold;
    text-align: center;
    text-transform: lowercase;
    padding-top: 10px;
    z-index: 2;
}
.skin-text {
    position: absolute;
    width: 90%;
    bottom: 40px;
    left: 2%;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-size: 10px;
    color: #1b1b1b;
    z-index: 2;
    padding: 5px;
}
.skinplash {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.skinplash img {
    width: 100%;
    height: auto;
    display: block;
}
.skinava {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    overflow: hidden;
    z-index: 1;
    border-radius: 10px;
}
.skinava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

<script>
document.querySelectorAll('.skin>img, .ico>img, .skinplash>img').forEach(i => {
    i.onclick = function() {
        const temp = document.createElement('textarea');
        temp.value = `<img src="${this.src}">`;
        document.body.appendChild(temp);
        temp.select();
        document.execCommand('copy');
        document.body.removeChild(temp);
       
        const notice = document.createElement('div');
        notice.textContent = 'скопировано!';
        notice.style.cssText = 'position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--btclr3);color:#fff;padding:5px 10px;border-radius:3px;z-index:9999;font-size:12px';
       
        this.closest('.skin').appendChild(notice);
        setTimeout(() => notice.remove(), 1500);
    };
    i.style.cursor = 'pointer';
});
</script>
[/html]
[hideprofile]