[html]

<style>
.panda-gram {
    width: 590px;
    height: 765px;
    background: #fafafa;

}

.lafirst-line {
    display: inline-flex;
    padding: 0px 10px;
    width: 360px;
}

.lanavbar{
    position: relative;
    width: 590px;
    height: 51px;
    display: flex;
    justify-content: center;
    padding: 0px 0;
    background-image: url('https://forumupload.ru/uploads/001c/28/10/2/514648.png');
}
 
   
  .laprofname {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #434343;
    font-size: 19px;
    position: relative;
    top: -40px;
    left: -175px;
    cursor: pointer;
}
 
  .laverifb img {
    height: 15px;
width: 15px;
    position: relative;
    top: -35px;
    left: -170px;
}

.laverifb img {
    height: 15px;
    width: 15px;
}

.laiconprof {
    width: 106px;
    height: 104px;
    border-radius: 100%;
  background: linear-gradient(130deg, #5543d6, #d52472, #fec053);
  padding: 2px;
    position: relative;
    left: -90px;
    top: 15px;
  cursor: pointer;
}

 
.laiconprof img {
    height: 100px;
    width: 100px;
    border: solid 2px #ffffff;
    border-radius: 100%;
}

.laappinfobox {
height: 130px;
width: 320px;
padding: 25px 0px;
position: absolute;
margin-top: 0px;
margin-left: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.laappinfobox info {

display: block;
height: 60px;
width: 370px;
text-align: center;
font-family: "Montserrat", sans-serif;
color: #464a4d;
letter-spacing: 0.5px;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
line-height: 110%;

}

.laappinfobox b {
  margin-top: 10px;
   padding: 3px;
border-radius: 2px;
font-size: 16px;
    font-family: "Montserrat", sans-serif;
display: block;
font-weight: 800;

}

.laprofinfo {
    text-align: justify;
    width: 370px;
    position: absolute;
    margin-top: -25px;
    margin-left: 168px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    color: #464a4d;
    line-height: 15px;
}

.laprofinfo b {
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
}

.laprofinfo a {
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
color: #0195f6!important;
}

.lamaini{
    padding: 0px 0;
    margin-top: 45px;
    margin-left: 15px;
}

.lawrapper{
    width: 580px;
    display: grid;
    grid-template-columns: 100% 50%;
    grid-gap: 20px;
}

 
.lastatus-wrapper{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    overflow-x: auto;

}

.lamaini_links{
    width: 100%;
    padding: 0px 10;
    display: flex;
    justify-content: center;
    margin-top: 0px;
    margin-left:60px;
}

.lafollowus {
    border: 0px solid;
    width: 170px;
    height: 22px;
    font-weight: 700;
    background: #0195f6;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    border-radius: 8px;
    font-size: 11px;
    letter-spacing: 0.5px;
    position: relative;
    top: 30px;
    left: 0px;
    padding: 6px 0px 0px 0px;
}

.lafollowus:hover {
    -webkit-transition: background 0.5s 0s cubic-bezier(0.91, 0.34, 1, 1);
    -moz-transition: background 0.5s 0s ease;
    -o-transition: background 0.5s 0s ease;
    transition: background 0.5s 0s ease;
    background: #2995dc;
    color: #ededed;
}

.lawriteus {
    border: 0px solid;
    width: 170px;
    height: 22px;
    font-weight: 700;
    background: #b8b8b8;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    border-radius: 8px;
    font-size: 11px;
    letter-spacing: 0.5px;
    position: relative;
    top: 30px;
    left: 10px;
    padding: 6px 0px 0px 0px;
}

.lawriteus:hover {
    -webkit-transition: background 0.5s 0s cubic-bezier(0.91, 0.34, 1, 1);
    -moz-transition: background 0.5s 0s ease;
    -o-transition: background 0.5s 0s ease;
    transition: background 0.5s 0s ease;
    background: #2995dc;
    color: #ededed;
}

.larecom {
    border: 0px solid;
    width: 25px;
    height: 22px;
    font-weight: 500;
    background: #b8b8b8;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    border-radius: 8px;
    font-size: 8px;
    letter-spacing: 0.5px;
    position: relative;
    top: 30px;
    left: 20px;
    background-image:     url(https://forumupload.ru/uploads/001c/1e/85/2/621936.png);
    background-position: center;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    padding: 6px 4px 0px 4px;
}

.lahighl {
    flex: 0 0 auto;
    width: 85px;
    max-width: 85px;
    align-items: center;
    margin-right: 2px;
}
 

.lahighl-pic{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    padding: 2px;
border: solid 1px #dedede;
  filter: grayscale(100%);
-webkit-filter: grayscale(90%);
-webkit-transition: all 0.4s ease;
}

.lahighl-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: px solid #fff;
    cursor: pointer;
}
.lahighl-pic:hover {
filter: grayscale(0%);
filter: gray;
-webkit-filter: grayscale(0%);
filter: none;
transition: 0.4s ease;
}
 
.lahighlname{
  width: 100%;
  overflow: hidden;
  text-align: center;
  margin-top:5px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #303031;
  text-overflow: ellipsis;
}

.lapanel {
  background-image: url('https://forumupload.ru/uploads/001c/28/10/2/526459.png');
  width: 590px;
  height: 39px;
  margin-top: 0px;
  cursor: pointer;

}
 
.lawrphotos_insta {
  width: 588px;
  max-height: 392px;
  position: relative;
  top: -5px;
  margin-left: auto;
  margin-right: auto;
  overflow: scroll;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;

}

.lawrphotos_insta::-webkit-scrollbar {
  display: none;

}

.laphoto_insta {
  width: 194px;
  height: 194px;
  margin: 1px;   
  position: relative;
  background-position: center;
  background-size: cover;
}

.lanumbers_insta {
  width: 180px;
  height: 100%;
  position: absolute;
  top: 0px;
  opacity: 0;
  padding-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  background-color: rgb(0, 0, 0, 0.4);
  cursor: pointer;
}

.lalikes_insta {
  width: 20px;
  height: 20px;
  margin: 0px 3px 0px 14px;
  background-image: url(https://images2.imgbox.com/af/48/rOreolzd_o.png);
  background-size: cover;
}

.lacomments_insta {
  width: 20px;
  height: 20px;
  margin: 0px 3px 0px 14px;
  background-image: url(https://images2.imgbox.com/c4/9e/vtEGxCJm_o.png);
  background-size: cover;
}

.lapost-conts {
  width: 590px;
  max-height: 600px;
  position: relative;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}
 
  .laphoto_insta:hover > .lanumbers_insta {
  opacity: 1;

</style>

<center>
<div class="panda-gram">
<div class="lanavbar"></div>
<div class="lafirst-line">
<div class="laiconprof"><img src="https://forumupload.ru/uploads/001c/28/10/2/297245.png"></div><!-- аватар профиля, размер не менее 100px -->
  <div class="laprofname">username</div><!-- название вашего профиля -->

  <div class="laverifb"><img src="https://forumupload.ru/uploads/001c/28/10/2/359409.png"></div>  <!-- значок верификации, можно удалить -->
 
<div class="laappinfobox"><section class="lamaini_links"><info><b>150</b>публикации </info><info><b>16,5 млн.</b>подписчики</info><info><b>1</b>подписки</info></div></div><!-- количество публикаций, подписчиков и подписок, меняйте цифры на свое усмотрение -->

<div class="laprofinfo"><b>ФИО персонажа</b><br>
информация о персонаже, любое желаемое описание;
<a href="ССЫЛКА">ссылка</a> при необходимости</div> <!-- сюда вводите желаемый текст, используйте <br> для переноса на следующую строку -->

<section class="lamaini_links">
<a href="ССЫЛКА НА ПРОФИЛЬ/АНКЕТУ"><div class="lafollowus">Подписаться</div></a>
<a href="ССЫЛКА НА ЛС"><div class="lawriteus">Сообщение</div></a>
<div class="larecom"></div></section>
<!-- можно добавить ссылки на свои профиль / анкету / личную тему и личные сообщения или же оставить их пустыми -->

<section class="lamaini">
 
<div class="lawrapper"><div class="lastatus-wrapper">  <!-- раздел кружков хайлайтов, если хотите удалить, то стирайте фрагмент от <div class до </div> (перед </section>) -->

<div class="lahighl"><div class="lahighl-pic"><img src="https://forumupload.ru/uploads/001c/28/10/2/872585.png"></div><p class="lahighlname">название</p></div> <!-- заменяйте ссылку на картинку и пишите название, для добавления кружка копируйте блок -->

<div class="lahighl"><div class="lahighl-pic"><img src="https://forumupload.ru/uploads/001c/28/10/2/872585.png"></div><p class="lahighlname">название</p></div>

</div> 
</section>

<div class="lapanel"></div><div class="lawrphotos_insta"><div class="lapost-conts">

<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 62тыс.
<span class="lacomments_insta"> </span> 10
</div></div>
<!-- меняем картинку и цифры просмотров/комментариев (чтобы добавить новое фото скопируйте блок полностью -->
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 62тыс.
<span class="lacomments_insta"> </span> 10
</div></div>
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 22тыс.
<span class="lacomments_insta"> </span> 14
</div></div>
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 2тыс.
<span class="lacomments_insta"> </span> 20
</div></div>
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 12тыс.
<span class="lacomments_insta"> </span> 120
</div></div>
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 162тыс.
<span class="lacomments_insta"> </span> 220
</div></div>
 
<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 162тыс.
<span class="lacomments_insta"> </span> 220
</div></div>

<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 162тыс.
<span class="lacomments_insta"> </span> 220
</div></div>

<div class="laphoto_insta"style="background-image:
url(https://forumupload.ru/uploads/001c/28/10/2/744878.png)">
<div class="lanumbers_insta">
<span class="lalikes_insta"> </span> 162тыс.
<span class="lacomments_insta"> </span> 220
</div></div>

 
</div></div>

[/html]

[html]
<style>
.lppgram-post {
    width: 550px;
    background: #1b1b1b;
    border: solid 1px #1b1b1b;
}

  .lppgram-post img {
  width: 550px;
  height: 550px; 
  position: relative;
  background-position: center;
  object-fit: cover;
}

 
.lpp-header {
    display: inline-flex;
    width: 550px;
    padding: 15px;
}

.iconsmallp {
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background: #c92d8e;
    box-shadow: 0 -50px 80px -40px #56b1ff inset;
    padding: 2px;
    cursor: pointer;
}

.iconsmallp img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: solid 1px #1b1b1b;
    padding: 0px;
    cursor: pointer;
    margin: 0px 0 0 0px;
    object-fit: cover;

}

.lpp-user {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #c8c8c8;
    font-size: 14px;
    position: relative;
    top: 15px;
    left: 10px;
}
 
 
    .verif img {
    height: 15px;
width: 15px;
    position: relative;
    top: 17px;
    left: 15px;
}

.verif img {
    height: 15px;
    width: 15px;
}

.followlpp {
    border: 0px solid;
    width: 130px;
    height: 20px;
    cursor: pointer;
    font-weight: 600;
    background: #8047c7;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    position: absolute;
    margin-top: 13px;
    margin-left: 390px;
    padding: 6px 0px 0px 0px;
}

.followlpp:hover {
    -webkit-transition: background 0.5s 0s cubic-bezier(0.91, 0.34, 1, 1);
    -moz-transition: background 0.5s 0s ease;
    -o-transition: background 0.5s 0s ease;
    transition: background 0.5s 0s ease;
    background: #6f41a7;
    color: #ededed;
}

.buttonspp {
    width: 550px;
    height: 42px;
    background-image: url('https://forumupload.ru/uploads/001c/28/10/2/663905.png');

}

.buttonspp2 {
    width: 32px;
    height: 42px;
    background-image: url('https://forumupload.ru/uploads/001c/28/10/2/104607.png');
    position: left;
    margin-top: -42px;
    margin-left: -465px;
    cursor: pointer;
}
 
.buttonspp2:hover {
    -webkit-transition: background 0.4s 0s ease;
    -moz-transition: background 0.4s 0s ease;
    -o-transition: background 0.4s 0s ease;
    transition: background 0.3s 0s ease;
    width: 32px;
    height: 42px;
    background-image: url('https://forumupload.ru/uploads/001c/28/10/2/776355.png');
    cursor: pointer;
}

.likesp {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #a9a9a9;
    font-size: 12px;
    width: 500px;
    text-align: left;
    position: relative;
    left: 5px;
    }

.lpp-txt {
    width: 490px;
    text-align: justify;
    line-height: 130%;
    font-size: 11px;
    font-family: "Montserrat", sans-serif;
    left: 15px;
    padding-top: 5px;
    color: #a9a9a9;
}

.lpp-txt span {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #c8c8c8;
    font-size: 12px;
}

 
  .lpp-txt a{
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
color: #8e63c3!important;
}

 
.lpp-comments {
    width: 500px;
    text-align: left;
    position: relative;
    top: 4px;
    left: 5px;
    font-family: "Montserrat", sans-serif;
    padding-bottom: 10px;
    font-size: 12px;
    color: #6a6a6a;
}

.lpp-ago{
    width: 500px;
    text-align: left;
    position: relative;
    font-family: "Montserrat", sans-serif;
    top: 4px;
    left: 5px;
    padding-bottom: 20px;
    font-size: 11px;
    color: #6a6a6a;
}

</style>

<center><div class="lppgram-post"><div class="lpp-header"><div class="iconsmallp">
<img src="https://forumupload.ru/uploads/001c/28/10/2/44913.png"></div> <!-- аватар профиля, размер не менее 42px -->

<div class="lpp-user">username</div><!-- название вашего профиля -->

  <div class="verif"><img src="https://forumupload.ru/uploads/001c/28/10/2/593689.png"></div><!-- значок верификации, можно удалить -->

<div class="followlpp">Подписаться</div></div>

<div class="post-content"><img src="https://forumupload.ru/uploads/001c/28/10/2/111451.png"></div> <!-- заменяйте ссылку на картинку не менее 550px -->
<div class="buttonspp"></div><div class="buttonspp2"></div>

<div class="likesp"><b>Нравится:</b> <b>666</b></div> <!-- заменить цифры -->

<div class="lpp-txt"><span>username</span> сюда вставляется текст вашего поста, его можно делать любой длинны и при необходимости можно в него можно добавить обращение к другому пользователю со ссылкой, которая будет выглядеть так: <a href="ССЫЛКА НА ПРОФИЛЬ ИЛИ АНКЕТУ ДРУГОГО ПЕРСОНАЖА">@name</a><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <!-- сюда вводите название вашего профиля и желаемый текст, используйте <br> для переноса на следующую строку -->

<div class="lpp-comments">Смотреть все комментарии (00)</div> <!-- замените цифры количества комментариев -->

<div class="lpp-ago">10 часов назад</div> <!-- впишите дату публикации поста персонажем -->

</div></center>[/html]