[html]
<!--==Twitter==-->
<div class="twitter">
<div class="vkladki">
<img src="https://i.ibb.co/VWBfhLHb/image.jpg" alt="">
</div>
<div class="shapka">
<div class="prof_name"> <!--==Имя==-->
Maverick Doherty
</div>
<div class="kolvo_postov"> <!--==Количество постов==-->
2,796 posts
</div>
</div>
<div class="nazad">
<img src="https://i.ibb.co/N6K3KSH6/image.jpg" alt="000">
</div>
<div class="poisk">
<img src="https://i.ibb.co/GvrKRfTZ/image.jpg" alt="">
</div>
<!--==ОБЛОЖКА ПРОФИЛЯ==-->
<div class="oblojka">
<img src="https://i.pinimg.com/originals/49/fd/48/49fd4877cdf5b3ce037046fa807353de.jpg" alt="000"> <!--==Обложка профиля==-->
</div>
<!--==ШАПКА ПРОФИЛЯ==-->
<div class="text_box">
<div class="name"> <!--==Имя==-->
Maverick Doherty
</div>
<div class="nickname"> <!--==Никнейм==-->
@RickyDo
</div>
<div class="opisanie"> <!--==Описание профиля, одна строка==-->
Только маме не говорите, сколько у меня подписчиков
</div>
<div class="podpis4iki">
<b>3</b> Followingㅤㅤ<b>7.6K</b> Followers <!--==Подписки/подписчики, менять только числа==-->
</div>
<div class="dop">
Not followed by anyone you’re following
</div>
</div>
<!--==АВА ПРОФИЛЯ==-->
<div class="ava">
<img src="https://i.pinimg.com/736x/9f/49/75/9f49753a2f2b3b8ed70330f6b1a2e459.jpg" alt="000"> <!--==ссылка на аватарку, желательно квадратную==-->
</div>
<div class="more">
<div class="morere">
...
</div>
</div>
<div class="follow">
<div class="follow_2">
Follow
</div>
</div>
<div class="podval">
<div class="posts">
Posts
</div>
<div class="replies">
Replies
</div>
<div class="media">
Media
</div>
</div>
</div>
<style>
.twitter {
width: 655px;
height: 550px;
background-color: grey;
position: relative;
margin: 0 auto;
z-index: 1;
border-radius: 25px;
overflow: hidden;
}
.vkladki {
width: 55px;
height: 550px;
background-color: black;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
.vkladki img {
width: 55px;
height: 547px;
max-width: 100%;
border-right: 1px solid #656A6E;
box-sizing: border-box;
}
.shapka {
width: 600px;
height: 55px;
background-color: black;
position: absolute;
left: 55px;
z-index: 2;
}
.prof_name {
font-family: 'Arial Black', Arial, sans-serif;
font-size: 16px;
font-weight: bold;
position: absolute;
left: 73px;
top: 5px;
color: #E7E9EA;
z-index: 3;
}
.kolvo_postov {
font-family: 'Arial', Arial, sans-serif;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 73px;
top: 32px;
color: #656A6E;
z-index: 3;
}
.nazad {
width: 55px;
height: 53px;
background-color: black;
position: absolute;
left: 55px;
z-index: 2;
}
.nazad img {
width: 55px;
height: 55px;
max-width: 100%;
}
.poisk {
width: 88px;
height: 55px;
background-color: black;
position: absolute;
right: 30px;
z-index: 2;
}
.poisk img {
width: 88px;
height: 55px;
max-width: 100%;
}
.oblojka {
width: 600px;
height: 200px;
background-color: black;
position: absolute;
top: 55px;
left: 55px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.oblojka img {
max-width: 100%;
}
.text_box {
width: 600px;
height: 240px;
background-color: black;
position: absolute;
left: 55px;
bottom: 55px;
z-index: 2;
}
.name {
position: absolute;
top: 80px;
left: 15px;
font-family: 'Arial Black', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #E7E9EA;
z-index: 3;
}
.nickname {
position: absolute;
top: 105px;
left: 15px;
font-family: 'Arial', Arial, sans-serif;
font-size: 15px;
color: #656A6E;
z-index: 3;
}
.opisanie {
position: absolute;
top: 140px;
left: 15px;
font-family: 'Arial', Arial, sans-serif;
font-size: 15px;
color: #656A6E;
z-index: 3;
}
.podpis4iki {
position: absolute;
top: 170px;
left: 15px;
font-family: 'Arial', Arial, sans-serif;
font-size: 15px;
color: #656A6E;
z-index: 3;
}
.podpis4iki b {
font-family: 'Arial Black', Arial, sans-serif;
color: #E7E9EA;
}
.dop {
position: absolute;
top: 206px;
left: 15px;
font-family: 'Arial', Arial, sans-serif;
font-size: 15px;
color: #656A6E;
z-index: 3;
}
.ava {
width: 134px;
height: 134px;
background-color: black;
border-radius: 67px;
border: 4px solid black;
position: absolute;
top: 181px;
left: 70px;
z-index: 3;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.ava img {
max-width: 120%;
}
.more {
width: 38px;
height: 38px;
background-color: black;
border-radius: 19px;
border: 1px solid #E7E9EA;
position: absolute;
top: 265px;
right: 107px;
z-index: 3;
}
.morere {
font-family: 'Arial Black', Arial, sans-serif;
color: #E7E9EA;
position: absolute;
left: 12.5px;
top: 7px;
}
.follow {
width: 82px;
height: 38px;
background-color: white;
border-radius: 19px;
border: 1px solid white;
position: absolute;
top: 265px;
right: 17px;
z-index: 3;
}
.follow_2 {
font-family: 'Arial', Arial, sans-serif;
font-weight: bold;
font-size: 15px;
color: black;
position: absolute;
left: 17px;
top: 10px;
}
.podval {
width: 600px;
height: 55px;
background-color: black;
position: absolute;
left: 55px;
bottom: 0px;
z-index: 2;
}
.posts {
width: 200px;
height: 55px;
font-family: 'Arial black', Arial, sans-serif;
font-weight: bold;
font-size: 15px;
color: #E7E9EA;
position: absolute;
left: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
.replies {
width: 200px;
height: 55px;
font-family: 'Arial black', Arial, sans-serif;
font-weight: bold;
font-size: 15px;
color: #E7E9EA;
position: absolute;
left: 200px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
.media {
width: 200px;
height: 55px;
font-family: 'Arial black', Arial, sans-serif;
font-weight: bold;
font-size: 15px;
color: #E7E9EA;
position: absolute;
left: 400px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
</style>
[/html]
