[html]

<style>

:root {
--ft-bg-blue:#597185;
--ft-bg-border-hover:#e8eef3;
--ft-bg-gray:#dce1e6;
--ft-bg-tab:#d0d9e0;
}

#funtalk-wrapper {
    display: flex;
    width: 100%;
    min-height: 600px;
    background: var(--ft-bg-gray);
    align-items: flex-start;
}

.tabcontent {
    width: 100%;
}

h1.funtalk-logo {
    background: #597185 url(https://i.imgur.com/ZY3Up84.png) no-repeat 1% / 80px;
    width: 100%;
    height: 69px;
    font-size: 5em;
    color: #bedef9;
    font-family: 'Corbel';
    padding: 19px 12px 3px 65px !important;
    border-bottom: 1px solid #ccc !important;
}

h1.funtalk-logo::before {
content:'UNTALK';
position:absolute;
margin: 0 0 0 0;
}

.funtalk-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
        width: 300px;
    min-height: 700px;
    background: var(--ft-bg-tab);
}

.tablinks {
    height: 60px;
    font-family: 'Corbel';
    font-size: 1.7em;
    font-weight: bold;
    text-align: left;
    color: #3a4753;
    padding-left: 40px;
    background: var(--ft-bg-tab);
    border: none;
    transition: ease-in-out .4s;}

button.active {
    background: var(--ft-bg-blue) !important;
color:  var(--ft-bg-tab);
}

.funtalk-menu button:hover {
background:var(--ft-bg-border-hover);
}

.tablinks:focus {
color:  var(--ft-bg-tab);
}

.tablinks:active{
color:  var(--ft-bg-tab);
}

.personal {
    position: absolute;
    right: 40px;
    width: 310px;
       text-align: center;
}

#personal-info {
    width: 60%;
    margin: 20% 35%;
}

#personal-info p {
color: #16212c;
    font-family: 'Corbel';
    font-size: 13px;
    padding: 12px;
}

.home-birth-date::before { content:'Дата рождения';}
.home-city::before {content:'Родной город';}
.home-status-family::before {content:'Семейное положение'; }
.home-work-title::before {content:'Место работы';}

#personal-info p::before {
    position: absolute;
    margin-left: -314px;
    width: 30%;
    text-align: right;
    font-weight: bold;
    font-size: 13px;
    font-family: 'Corbel';
    color: #596876;

}

.home-fate {
    width: 100%;
    height: 130px;
    overflow: hidden;
}

.home-fate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-avatar {
    border: 15px solid #5971854a;
    position: absolute;
    backdrop-filter: blur(4px);
    margin: -65px 0 0 6.4%;
    box-shadow: 0px 0px 9px 0px #59718536;
}
.home-avatar img{    transition: ease-in-out .4s;    box-shadow: 0px 0px 9px 0px #59718582;}

.home-avatar img:hover {
    transform: scale(1.2);
}

.home-name {
    font-family: 'Corbel';
    color: #384652;
    font-size: 2.1em;
    font-weight: bold;
}

.home-stat {
    font-family: 'Corbel';
    color: #737f8b;
    letter-spacing: 0.4px;
    font-size: 12px;
}

div.h3 {   
    font-family: 'Corbel';
    color: #384652;
    font-size: 2.7em;
    font-weight: bold;
    width: 100%;
    background: var(--ft-bg-border-hover);
    text-align: center;
    padding: 9px 0px 13px;
    margin: 15px 0px;
}

</style>

<h1 class="funtalk-logo" />
<div id="funtalk-wrapper">
<div class="funtalk-menu">
  <button  class="tablinks" onclick="openTab(event, 'Home')" id="defaultOpen">HOME</button >
  <button class="tablinks" onclick="openTab(event, 'Friends')">FRIENDS</button>
  <button class="tablinks" onclick="openTab(event, 'Subscribers')">SUBSCRIBERS</button>
  <button class="tablinks" onclick="openTab(event, 'Photos')">PHOTOS</button>
  <button class="tablinks" onclick="openTab(event, 'Presents')">PRESENTS</button>
</div>

<div id="Home" class="tabcontent">
<div class="home">
    <div class="home-fate"><img src="https://i.ibb.co/CvVR2MJ/1.jpg" alt="фоновая картинка"></div>
    <div class="home-avatar"><img src="https://i.ibb.co/CH6Zzxd/b90a716ce19919ed92f1de514ec41dd2.jpg" alt="аватар пользователя"></div>
    <div class="personal">
    <div class="home-name">Your name</div>
    <div class="home-stat">Write your status</div>
    </div>
<div id='personal-info'>
    <p class="home-birth-date">00/00/00</p>
    <p class="home-city">Валенштайн, очень большое описание, работает на любом поле.</p>
    <p class="home-status-family">свободен, очень большое описание, работает на любом поле.</p>
    <p class="home-work-title">Корпорация "Мистериум", очень большое описание, работает на любом поле.</p>
</div>
</div>
</div>

<div id="Friends" class="tabcontent">
        <div class="h3">My Friends</div>
<div class="my_friend">
    <div class="fr-ava"><img src="https://i.ibb.co/CH6Zzxd/b90a716ce19919ed92f1de514ec41dd2.jpg" width=100 height=100 alt="имя друга"></div>
    <div class="fr-name"><a href="URL">1 NAME</a></div>
    <div class="fr-group">friend's status/group</div>
    </div>
</div>

<div id="Subscribers" class="tabcontent">
        <div class="h3">Subscribers</div>
<div class="my_subscriber">
    <div class="ss-ava"><img src="https://i.ibb.co/CH6Zzxd/b90a716ce19919ed92f1de514ec41dd2.jpg" width=100 height=100 alt="имя друга"></div>
    <div class="ss-name"><a href="URL">1 NAME</a></div>
    <div class="ss-group">friend's status/group</div>
    </div>
</div>

<div id="Photos" class="tabcontent">
        <div class="h3">My Photos</div>
<div class="my_photo"><img src="https://i.ibb.co/CH6Zzxd/b90a716ce19919ed92f1de514ec41dd2.jpg" width=100 height=100 alt="title photo"></div>
</div>

<div id="Presents" class="tabcontent">
        <div class="h3">My Presents</div>
<div class="my_present"><img src="https://ir.ozone.ru/s3/multimedia-8/6572223464.jpg" width=50 height=50 alt="title photo"></div>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/80965.js" />
[/html][hideprofile]

Подпись автора

Текст Текст Текст