одна фигня
[html]<style>
h1{display: none;}
.lstr{
width: 842px;
height: 621px;
background: url(https://forumstatic.ru/files/001c/79/96/91480.png) no-repeat center;
padding: 10px;
display: flex;
flex-direction: column;
border-radius: 20px;
background-size: cover !important;
align-items: center;
}
.vkl2{
background-color: #ffffff;
width: 700px;
height: 600px;
border-radius: 20px;
margin: 20px 120px 20px 20px;
}
.fn{
width: auto;
height: 100px;
border-radius: 20px;
background-size: cover !important;
background: var(--bg-main) 0px -100px;
}
.fn_ico {
width: 150px;
height: 150px;
border-radius: 20px;
position: absolute;
right: 270px;
top: 750px;
margin-left: 18px;
outline: 3px solid #e6e6e6 !important;
background-size: cover !important;
}
.fn knop{
width: 80px;
height: 80px;
border-radius: 20%;
position: relative;
top: 50px;
margin-left: 18px;
outline: 4px solid #e6e6e6 !important;
background-size: cover !important;}
.fn musics {
top: 9px;
display: block;
position: relative;
}
.fn o::before {
content: "«";
padding: 0 2px;
}
.fn o::after {
content: "»";
padding: 0 2px;
}
.fn o {
width: 600px;
height: auto;
display: block;
text-align: center;
padding: 6px;
font-size: 12px;
margin-left: 120px;
margin-top: 11px;
border-radius: 10px;
font-family: 'Cuprum';
color: #4f4e4e;
}
.fn n {
text-align: center;
padding: 6px;
width: 600px;
display: flex;
font-family: 'Akrobat';
margin-left: 102px;
color: #e6e6e6;
letter-spacing: 1px;
font-size: 25px;
text-transform: uppercase;
margin-top: -54px;
justify-content: center;
align-items: center;
}
.lspl pl{
display: flex;
width: 600px;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
overflow: auto;
margin-left: 70px;
margin-top: 5px;
overflow-y: auto;
overflow-x: hidden;
}
.lsic ic{
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
align-items: center;
width: 600px;
height: 50px;
margin-left: 70px;
margin-top: 5px;
overflow-y: auto;
overflow-x: hidden;
color: #fff;
font-size: 16px;
font-family: akrobat;
}
.lspr {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
align-items: center;
width: 600px;
margin-left: 55px;
margin-top: 5px;
overflow-x: hidden;
padding: 20px;
}
.vkl{
width: auto;
margin-top: 80px;
padding: 10px;
}
.ls_settings {
position: absolute;
width: 20px;
margin-top: -76px !important;
margin-left: 710px !important;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 20px;
}
.fa-cog:before, .fa-gear:before {
content: "\f013";
color: #e6e6e6;
}
/***вкладки***/
.tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.tab > input[type="radio"] {
display: none;
}
.tab-content {
display: none;
width: 100%;
margin-top: 20px;
max-height: 300px!important;
overflow-y: scroll;
}
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
.tab > label {
display: block;
padding: 0.5rem 1rem;
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
text-decoration: none;
color: #e6e6e6;
border: 0;
border-radius: 0.375rem;
background: #9b9b9b;
font-family: 'Akrobat';
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
}
.tab > input[type="radio"]:checked + label {
cursor: default;
color: #e6e6e6;
background-color: #ebb454;
font-family: 'Akrobat';
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<br><br>
<div class="lstr"><div class="vkl2"><div class="fn"><div class="fn_ico" style="background:url(https://upforme.ru/uploads/001c/1a/2f/300/567392.gif) left center; background-size: cover;"></div><div class="ls_settings"><a href="https://nycity.fun/admin_pages.php?edit_page=nathan_garcia"><i class="fa fa-cog fa-fw" aria-hidden="true"></i></a></div><n>НЭЙТАН ГАРСИЯ</n><musics><audio src="https://forumstatic.ru/files/001c/1a/2f/41831.mp3" controls="" style="width: 600px; height:13px ;margin-top:2px; margin-left:140px !important;"></audio></musics>
<o style="text-transform: uppercase!important; font-size: 12px;">I don't know what really, really happens at the end of the road</o>
</div>
<div class="vkl"><div class="tab">
<input checked id="tab-btn-1" name="tab-btn" type="radio" value="">
<label for="tab-btn-1">плашки</label>
<input id="tab-btn-2" name="tab-btn" type="radio" value="">
<label for="tab-btn-2">иконки</label>
<input id="tab-btn-3" name="tab-btn" type="radio" value="">
<label for="tab-btn-3">подарки</label>
<div class="tab-content" id="content-1">
<div class="lspl"><pl>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/39896.jpg); background-size: cover; width: 160px;"> <up>NEW YORK</up> <down>state of mind</down> </div>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/42062.png); background-size: cover; width: 160px;"> <up>МЕСТО ДЛЯ</up> <down>ВАШЕЙ НОВОЙ ПЛАШКИ</down> </div>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/42062.png); background-size: cover; width: 160px;"> <up>МЕСТО ДЛЯ</up> <down>ВАШЕЙ НОВОЙ ПЛАШКИ</down> </div>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/42062.png); background-size: cover; width: 160px;"> <up>МЕСТО ДЛЯ</up> <down>ВАШЕЙ НОВОЙ ПЛАШКИ</down> </div>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/42062.png); background-size: cover; width: 160px;"> <up>МЕСТО ДЛЯ</up> <down>ВАШЕЙ НОВОЙ ПЛАШКИ</down> </div>
<div class="l_pl light_text" style="background:url(https://forumstatic.ru/files/001c/1a/2f/42062.png); background-size: cover; width: 160px;"> <up>МЕСТО ДЛЯ</up> <down>ВАШЕЙ НОВОЙ ПЛАШКИ</down> </div>
</pl></div>
</div>
<div class="tab-content" id="content-2">
<div class="lsic"><ic>
<div class="ico"><a href="CСЫЛКА_НА_ЛИЧНУЮ_СТРАНИЦУ"><img src="https://forumstatic.ru/files/001c/1a/2f/14922.png" width="27"></a></div>
<div class="ico" alt="Место для новой иконки" title="Место для новой иконки"/>+</div>
<div class="ico" alt="Место для новой иконки" title="Место для новой иконки"/>+</div>
<div class="ico" alt="Место для новой иконки" title="Место для новой иконки"/>+</div>
<div class="ico" alt="Место для новой иконки" title="Место для новой иконки"/>+</div>
<div class="ico" alt="Место для новой иконки" title="Место для новой иконки"/>+</div>
</ic></div> </div>
<div class="tab-content" id="content-3">
<div class="lspr">
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
<div class="gift" alt="Место для вашего подарка" title="Место для вашего подарка"/>+</div>
</div>
</div></div></div></div></div>[/html]