- приветственные достижения
[html]
<script src="https://forumstatic.ru/files/0017/55/b9/39664.js" defer></script>
<style>
:root {--color_bg-all: #fafafa;--color_bg-radio-on: #d9a0a8;--color_bg-radio-off: #f5f5f5;--color_bg-radio-hover: #cdcdc8;}
.welcome_achievements {color:#42403f;}
.welcome_achievements li {list-style:none!important;}
/*табы*/
.warpper { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; margin-top: -45px !important; gap: 10px;}
.tabs { margin-right: 0px !important; margin-top: 0px !important; text-align: center; position: relative; top: -11px;}
.tab {width: fit-content; cursor: pointer; padding: 3px 20px 3px; margin: 0px 10px; display: inline-block; border-radius: 100px; background: var(--color_bg-radio-off); transition: all 0.2s ease-in-out !important;}
.tab:hover { background: var(--color_bg-radio-hover);}
.panels { min-height: 200px; border-radius: 3px; overflow: hidden; /* padding: 20px; */}
.panel {display:none;animation: fadein .8s;}
.panel-title{font-size:1.5em;font-weight:bold}
.welcome_achievements .radio {display:none!important;}
#one:checked ~ .panels #one-panel,#two:checked ~ .panels #two-panel, #three:checked ~ .panels #three-panel {display:block;}
#one:checked ~ .tabs #one-tab, #two:checked ~ .tabs #two-tab, #three:checked ~ .tabs #three-tab { background: var(--color_bg-radio-on); font-weight: 700; color: #fff; box-shadow: 0px 4px 20px 0px rgb(var(--accent400));}
/*достижения*/
.achievement_main { background:#fff; width: 649px; border-radius:4px; margin: 25px auto!important; box-shadow: 0px 4px 32.8px 0px rgba(129, 129, 117, 0.1);}
.achievement { padding-bottom: 16px; display: flex; justify-content: flex-start; margin-top: 0px !important;}
.achievement_list { width: 349px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #f1f1f1; padding: 10px 10px; height: auto; min-height: 310px; overflow-y: auto; overflow-x: hidden;}
.achievement_card { background: var(--color_bg-radio-off);opacity: 1;transition: all .2sease; width: auto; display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px;}
.achievement_card:hover {opacity: .75;transition: all .2sease;}
.achievement_card n {font-size:12px;border-right:2px solid #cdcdc8;padding:5px;color:#cdcdc8;}
.achievement_prize {width: 300px; height: auto; min-height: 310px; margin-left: 0px !important;}
.welcome_bg p {width: 649px; height: 160px; background: url(https://forumupload.ru/uploads/001c/64/16/7/296118.png) 0px -20px; border-radius: var(--br800); display: flex; flex-flow: wrap; gap: var(--4); align-content: center; justify-content: end; padding: 0 var(--16) 0 50% !important;margin:10px auto -20px;}
.welcome_achievements .info {width: 490px; margin: 10px auto 40px; padding:15px;border:1px solid #dbdbdb;border-radius:4px; line-height: 140%; background:#fafafa;outline: var(--6) solid #fff;-moz-box-shadow: 0px 5px 2px rgba(72 70 72 / 25%); box-shadow: 0px 3px 20px rgba(72 70 72 / 25%);text-align: justify;}
.welcome_achievements .title {width: fit-content; background:#fff;border:1px solid #dbdbdb;border-radius:10px; position: relative ;display: block; top: -28px; padding:0px 8px;margin-bottom:-23px;}
.welcome_achievements .achievement_prize strong {display: block!important; width: max-content; font-weight: 500; font-size: 0.9rem; line-height: 150%; text-transform: lowercase; padding: 2px 4px; background: #f5f5f5; border-radius: 3px; margin:10px auto;}
.achievement .copy_btn { font-weight: 500; font-size: 0.9rem; line-height: 100%; text-transform: lowercase !important; color: #fff; text-transform: lowercase; padding: 3px 10px; background: var(--color_bg-radio-on); border-radius: var(--br300); margin:10px auto;float:right;}
</style>
<div class="welcome_bg"><p></p></div>
<div class="welcome_achievements">
<div class="info"><div class="title">приветственные достижения</div>
<b>правила:</b><br>
— уровни собираются лишь единожды;<br>
— с твинков участвовать можно;<br>
— для сбора уровня публикуется отдельное сообщение;<br>
— можно собирать не по порядку;<br>
— прикрепляются ссылки на доказательства;<br>
— призы можно забрать только после выполнения всех условий.<br>
</div>
<div class="achievement_main">
<input class="radio" id="one" name="group" type="radio" checked>
<input class="radio" id="two" name="group" type="radio">
<input class="radio" id="three" name="group" type="radio">
<div class="tabs">
<label class="tab" id="one-tab" for="one">easy pack</label>
<label class="tab" id="two-tab" for="two">middle pack</label>
<label class="tab" id="three-tab" for="three">hard pack</label>
</div>
<div class="panels">
<!--------------- ИЗИ ПАК --------------->
<div class="panel" id="one-panel">
<div class="achievement">
<div class="achievement_list">
<!-- 1 -->
<div class="achievement_card">
<n><b>01</b></n>
<div><b>let's chat</b></span><br>
набрать 50 сообщений</div>
</div>
<!-- 2 -->
<div class="achievement_card">
<n><b>02</b></n>
<div><b>I like you</b></span><br>
поставить 100 позитива</div>
</div>
<!-- 3 -->
<div class="achievement_card">
<n><b>03</b></n>
<div><b>our story</b></span><br>
открыть эпизод</div>
</div>
<!-- 4 -->
<div class="achievement_card">
<n><b>04</b></n>
<div><b>on the front pages</b></span><br>
поставить 30 "это интересно"</div>
</div>
<!-- 5 -->
<div class="achievement_card">
<n><b>05</b></n>
<div><b>all you need is this...</b></span><br>
оставить 15 реклам</div>
</div>
<!--конец заданий-->
<!--копи-->
<button onclick="Copy('toCopy1')" title="Copy" class="copy_btn">скопировать задания</button>
<div id="toCopy1" style="display:none;">[*b]easy pack[*/b]
[*b]набрать 50 сообщений[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 100 позитива[*/b]
доказательства (ссылки, скрины и тд)
[*b]открыть эпизод[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 30 "это интересно"[*/b]
доказательства (ссылки, скрины и тд)
[*b]оставить 15 реклам[*/b]
доказательства (ссылки, скрины и тд)</div><!--копи-->
</div>
<div class="achievement_prize">
<!-- НАГРАДА ПРОФИЛЬ-->
<div class="post-author online" style="margin:30px auto 20px; box-shadow: 0px 4px 10px 0px rgba(129, 129, 117, 0.1);">
<ul style="padding: 12px;margin-top: 25px;">
<li class="pa-author" style="background: #fff; border-radius:8px;"><a style="color:#42403f!important;">sod's law</a><span class="indOnline"></span></li>
<li class="pa-avatar"><img src="https://i.imgur.com/a48aWa1.png"></li>
<li class="pa-fld6"><div id="lzv"><div class="text_lz"><center>you deserve this award</center></div></div></li>
<li class="pa-fld3" style="margin-left: 1px;margin-bottom: -6px;"><plashka><a style="background: linear-gradient(95deg, #c4c3c3 -0.22%, #c4c3c3 101.84%)!important; padding: var(--4);"><txt1>это игра в жизнь, это игра в любовь</txt1><txt2>в наших венах холодная кровь</txt2></a></plashka></li>
<div class="pa-row1"><li class="pa-posts"><span class="fld-name">Сообщений:</span> 1234</li><li class="pa-respect"><span class="fld-name"><a>Репутация</a>:</span> <span>+9876</span></li><li class="pa-fld4"><span class="fld-name">Валюта:</span>200</li></div>
<li class="pa-title" style="margin-bottom: -6px;"><b>easy pack</b> reward</li>
</ul>
<li class="pa-fld2"><bg><img src="https://forumstatic.ru/files/001c/6a/5d/98689.png"></bg></li>
<li class="pa-fld5"><icon><img src="https://i.ibb.co/q3rhKmNV/vecteezy-white-star-3d-inflated-cute-bubble-glossy-glass-for-decoration-49688576.png"></icon></li></div>
<!-- НАГРАДА остальное -->
<strong>+ 200 баллов на счет</strong>
</div>
</div></div><!-- конец 1 вкладки -->
<!--------------- МИДЛ ПАК --------------->
<div class="panel" id="two-panel">
<div class="achievement">
<div class="achievement_list">
<!-- 1 -->
<div class="achievement_card">
<n><b>01</b></n>
<div><b>let's chat</b></span><br>
набрать 250 сообщений</div>
</div>
<!-- 2 -->
<div class="achievement_card">
<n><b>02</b></n>
<div><b>do you like me?</b></span><br>
получить 200 репутации</div>
</div>
<!-- 3 -->
<div class="achievement_card">
<n><b>03</b></n>
<div><b>our story</b></span><br>
написать 1 пост ИЛИ 15 снс-постов</div>
</div>
<!-- 4 -->
<div class="achievement_card">
<n><b>04</b></n>
<div><b>I'm waiting for you</b></span><br>
оставить две заявки в хочу видеть</div>
</div>
<!-- 5 -->
<div class="achievement_card">
<n><b>05</b></n>
<div><b>let's have fun!</b></span><br>
поучаствовать в конкурсе</div>
</div>
<!--конец заданий-->
<!--копи-->
<button onclick="Copy('toCopy2')" title="Copy" class="copy_btn">скопировать задания</button>
<div id="toCopy2" style="display:none;">[*b]middle pack[*/b]
[*b]набрать 50 сообщений[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 100 позитива[*/b]
доказательства (ссылки, скрины и тд)
[*b]открыть эпизод[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 30 "это интересно"[*/b]
доказательства (ссылки, скрины и тд)
[*b]оставить 15 реклам[*/b]
доказательства (ссылки, скрины и тд)</div><!--копи-->
</div>
<div class="achievement_prize">
<!-- НАГРАДА ПРОФИЛЬ-->
<div class="post-author online" style="margin:20px auto; box-shadow: 0px 4px 10px 0px rgba(129, 129, 117, 0.1);">
<ul style="padding: 12px;margin-top: 25px;">
<li class="pa-author" style="background: #fff; border-radius:8px;"><a style="color:#42403f!important;">sod's law</a><span class="indOnline"></span></li>
<li class="pa-avatar"><img src="https://i.imgur.com/a48aWa1.png"></li>
<li class="pa-fld6"><div id="lzv"><div class="text_lz"><center>you deserve this award</center></div></div></li>
<li class="pa-fld3" style="margin-left: 1px;margin-bottom: -6px;"><plashka><a style="background: linear-gradient(95deg, #7f7f85 -0.22%, #82888d 101.84%)!important; padding: var(--4);"><txt1>kiss me under the paris twilight</txt1><txt2>kiss me out on the moonlit floor</txt2></a></plashka></li>
<div class="pa-row1"><li class="pa-posts"><span class="fld-name">Сообщений:</span> 1234</li><li class="pa-respect"><span class="fld-name"><a>Репутация</a>:</span> <span>+9876</span></li><li class="pa-fld4"><span class="fld-name">Валюта:</span>200</li></div>
<li class="pa-title" style="margin-bottom: -6px;"><b>middle pack</b> reward</li>
</ul>
<li class="pa-fld2"><bg><img src="https://i.ibb.co/KzhQjZv1/image.png"></bg></li>
<li class="pa-fld5"><icon><img src="https://i.ibb.co/Z42qfgw/moon.png"></icon></li></div>
<!-- НАГРАДА остальное -->
<strong>+ 200 баллов на счет</strong>
<strong>+ купон на выбор</strong>
</div>
</div></div><!-- конец 2 вкладки -->
<!--------------- ХАРД ПАК --------------->
<div class="panel" id="three-panel">
<div class="achievement">
<div class="achievement_list">
<!-- 1 -->
<div class="achievement_card">
<n><b>01</b></n>
<div><b>like it!</b></span><br>
создать соц. сеть</div>
</div>
<!-- 2 -->
<div class="achievement_card">
<n><b>02</b></n>
<div><b>this is my life</b></span><br>
опубликовать 1 пост в соц. сети</div>
</div>
<!-- 3 -->
<div class="achievement_card">
<n><b>03</b></n>
<div><b>????</b></span><br>
???</div>
</div>
<!-- 4 -->
<div class="achievement_card">
<n><b>04</b></n>
<div><b>end of chapter</b></span><br>
закрыть эпизод</div>
</div>
<!-- 5 -->
<div class="achievement_card">
<n><b>05</b></n>
<div><b>all you need is this...</b></span><br>
оставить 30 реклам</div>
</div>
<!--конец заданий-->
<!--копи-->
<button onclick="Copy('toCopy3')" title="Copy" class="copy_btn">скопировать задания</button>
<div id="toCopy3" style="display:none;">[*b]hard pack[*/b]
[*b]набрать 50 сообщений[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 100 позитива[*/b]
доказательства (ссылки, скрины и тд)
[*b]открыть эпизод[*/b]
доказательства (ссылки, скрины и тд)
[*b]поставить 30 "это интересно"[*/b]
доказательства (ссылки, скрины и тд)
[*b]оставить 15 реклам[*/b]
доказательства (ссылки, скрины и тд)</div><!--копи-->
</div>
<div class="achievement_prize">
<!-- НАГРАДА ПРОФИЛЬ-->
<div class="post-author online" style="margin:20px auto; box-shadow: 0px 4px 10px 0px rgba(129, 129, 117, 0.1);">
<ul style="padding: 12px;margin-top: 25px;">
<li class="pa-author" style="background: #fff; border-radius:8px;"><a style="color:#42403f!important;">sod's law</a><span class="indOnline"></span></li>
<li class="pa-avatar"><img src="https://i.imgur.com/a48aWa1.png"></li>
<li class="pa-fld6"><div id="lzv"><div class="text_lz"><center>you deserve this award</center></div></div></li>
<li class="pa-fld3" style="margin-left: 1px;margin-bottom: -6px;"><plashka><a style="background: linear-gradient(95deg, #1f2020 -0.22%, #111012 101.84%)!important; padding: var(--4);"><txt1>If you can't keep up, stay below</txt1><txt2>I'm too, too, too much for you</txt2></a></plashka></li>
<div class="pa-row1"><li class="pa-posts"><span class="fld-name">Сообщений:</span> 1234</li><li class="pa-respect"><span class="fld-name"><a>Репутация</a>:</span> <span>+9876</span></li><li class="pa-fld4"><span class="fld-name">Валюта:</span>200</li></div>
<li class="pa-title" style="margin-bottom: -6px;"><b>hard pack</b> reward</li>
</ul>
<li class="pa-fld2"><bg><img src="https://i.ibb.co/t5J3NRZ/image.png"></bg></li>
<li class="pa-fld5"><icon><img src="https://i.ibb.co/G4RGvLdK/cat.png"></icon></li></div>
<!-- НАГРАДА остальное -->
<strong>+ 200 баллов на счет</strong>
<strong>+ любой ключ на выбор</strong>
</div>
</div></div><!-- конец 3 вкладки -->
</div></div>
</div>
[/html]
<a href="ссылка на участника">ваш текст</a>
