[hideprofile]

[html]
<style>
.tabs__content {display: none;}
.tabs__content.active {display: block;}
.tabs {width: 490px; margin: auto!important; height: 200px; position: relative; top: 20px;}
ul.tabs__caption {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; position: relative;    justify-content: center; align-items: center; padding-bottom: 10px; padding: 0px 0px 10px 0px!important;}
.tabs__caption li {padding: 9px 15px; margin: 1px 0 0 5px!important; background: rgb(var(--coloracc)); color: rgb(var(--lightpun)); position: relative; border-radius: 15px; text-align: center;}
.tabs__caption .active {background: rgb(var(--pun_c)); color: rgb(var(--link2)); border: 1px solid rgb(var(--coloracc));}
</style>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
(function($) {
$(function() {
 
  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
  });
 
});
})(jQuery);
</script>

<div style="width: 500px;height: 550px;text-align: center;border-radius: 10px;background: rgb(var(--lightpun));margin:auto;">
<div style="width: 477px;height: 100px;border-radius:16px;background:url(https://i.pinimg.com/564x/75/63/f4/7563 … a38edc.jpg);position: absolute;margin: 11px auto 0 11px;background-size: cover;"></div>
<div style="width: 80px;height: 80px;border-radius:50%;background:url(https://i.pinimg.com/originals/de/74/07 … c875c0.gif);position: relative;margin: auto;top: 69px;outline: 8px solid rgb(var(--lightpun))!important;background-size: cover;"></div>

<div style="
    display: flex;
    position: relative;
    width: 477px;
    margin: 38px auto;
    color: rgb(var(--coloracc));
">
<div style="width: 30%;display: flex;justify-content: center;align-items: center;flex: auto;font-family: var(--font-extra);font-size: 16px;color: var(--link-color);flex-direction: column;">
<div style="
    font-family: Mulish;
    font-size: 16px;
    font-weight: 700;
">00</div>
<div style="
    font-family: Mulish;
    font-size: 10px;
    font-weight: 600;
">постов</div>
</div>

<div style="width: 30%;display: flex;justify-content: center;align-items: center;flex: auto;font-family: var(--font-extra);font-size: 16px;color: var(--link-color);flex-direction: column;">
<div style="
    font-family: Mulish;
    font-size: 16px;
    font-weight: 700;
"><i class="fa-solid fa-play"></i></div>
<div style="
    font-family: Mulish;
    font-size: 10px;
    font-weight: 600;
">taylor swift - anti-hero</div>
</div>
</div>

<div style="width: 141px;height: 37px;position: relative;margin: auto;top: -24px;color: rgb(var(--color1));">
  <div style="left: 15px;top: 0px;position: absolute;color: rgb(var(--coloracc));font-size: 14px;font-family: Mulish;font-weight: 700;word-wrap: break-word">Имя и Фамилия</div>
  <div style="left: 0px;top: 22px;position: absolute;text-align: center;font-size: 12px;font-family: Mulish;font-weight: 600;word-wrap: break-word">it's me hi i'm the problem</div>
</div>

<div style="width: 90%;height: 76px;position:relative;margin: -12px auto 10px auto;display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: nowrap;">

<div style="
    display: flex;
    flex-direction: column;
    width: 10%;
    align-content: center;
    align-items: center;
    margin: 8px!important;
">
<img src="https://forumstatic.ru/files/001b/fd/2b/74619.png">
coming
soon</div>

<div style="display: flex;flex-direction: column;width: 10%;align-content: center;align-items: center;margin: 8px!important;">
<img src="https://forumstatic.ru/files/001b/fd/2b/11693.png?v=1">
valentines day
bingo</div>

<div style="
    display: flex;
    flex-direction: column;
    width: 10%;
    align-content: center;
    align-items: center;
    margin: 8px!important;
">
<img src="https://forumstatic.ru/files/001b/fd/2b/74619.png">
coming
soon</div><div style="
    display: flex;
    flex-direction: column;
    width: 10%;
    align-content: center;
    align-items: center;
    margin: 8px!important;
">
<img src="https://forumstatic.ru/files/001b/fd/2b/74619.png">
coming
soon</div>
</div>

<div class="tabs">
 
  <ul class="tabs__caption">
    <li class="active">плашки</li>
    <li class="">иконки</li>
<li class="">хедеры</li>
  </ul>
 
  <div class="tabs__content active">

    <div class="shop_plashki">

<a href=""><div class="l_pl" style="background:url(https://i.imgur.com/dhYZcsa.jpg);"> <up>Frankly, my dear, </up> <down>I don’t give a damn.</down> </div></a>

<a href=""><div class="l_pl" style="background:url(https://i.imgur.com/dhYZcsa.jpg);"> <up>Frankly, my dear, </up> <down>I don’t give a damn.</down> </div></a>

<a href=""><div class="l_pl" style="background:url(https://i.imgur.com/dhYZcsa.jpg);"> <up>Frankly, my dear, </up> <down>I don’t give a damn.</down> </div></a>

<a href=""><div class="l_pl" style="background:url(https://i.imgur.com/dhYZcsa.jpg);"> <up>Frankly, my dear, </up> <down>I don’t give a damn.</down> </div></a>

</div>

  </div>
 
  <div class="tabs__content">
    <div class="shop_icons">
<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png">

<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png">

<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png"> </div>
  </div>

  <div class="tabs__content">
    <div class="shop_icons">
<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png">

<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png">

<img src="https://i.imgur.com/trtgSAo.png"> <img src="https://i.imgur.com/K6p6uEz.png"> <img src="https://i.imgur.com/zXY8A02.png"> <img src="https://i.imgur.com/L0eO69s.png"> <img src="https://i.imgur.com/9vganbW.png">

<img src="https://i.imgur.com/wx7QelP.png"> <img src="https://i.imgur.com/33JUKDL.png"> <img src="https://i.imgur.com/OhVR6nB.png"> <img src="https://i.imgur.com/rWA6dWm.png"> </div>
  </div> 

</div><!-- .tabs-->

</div>
[/html]