[html]
<div id= "org">

<div class= "novname">подарки для новичков</div>

<div class= "text">
мы рады приветствовать новых игроков, а также тех, кто решил начать новую историю с чистого листа    вы можете выбрать один из предложенных ниже профилей в подарок. выбранный профиль будет поставлен к вам в профиль или на личную страницу <b>после подачи и одобрения анкеты</b>.<br>

<br> акция суммируется с акцией от амс. профили обновляются вместе с общей сменой дизайна.
<br> для получения профиля вы можете отписаться в этой теме</div></div>

<div class="skins-container">
    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/699606.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/658035.png" alt="icon"></div>
        <div class="skin-name">first</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/558936.png" alt="avatar"></div>
        <div class="skin-text">the darkness is already here</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/251301.png" alt="plaque"></div>
    </div>

    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/81003.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/870322.png" alt="icon"></div>
        <div class="skin-name">second</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/642123.png" alt="avatar"></div>
        <div class="skin-text">the darkness is already here</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/131592.png" alt="plaque"></div>
    </div>

    <div class="skin">
        <img src="https://upforme.ru/uploads/001c/6a/04/5/844483.png" alt="background">
        <div class="ico"><img src="https://upforme.ru/uploads/001c/6a/04/5/585963.png" alt="icon"></div>
        <div class="skin-name">third</div>
        <div class="skinava"><img src="https://upforme.ru/uploads/001c/6a/04/5/386494.png" alt="avatar"></div>
        <div class="skin-text">the darkness is already here</div>
        <div class="skinplash"><img src="https://upforme.ru/uploads/001c/6a/04/5/621220.png" alt="plaque"></div>
    </div>
</div>

<style>
.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;
}
@media (max-width: 600px) {
    .skins-container {
        flex-direction: column;
        align-items: center;
    }
    .skin {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .text {
        font-size: 13px;
    }
}
</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]