[html]
<style>
.lpcargram-post {
width: 550px;
background: #1b1b1b;
border: solid 1px #1b1b1b;
}
.slideslp {
padding: 0;
width: 550px;
height: 550px;
display: block;
margin: 0 auto;
position: relative;
background-position: center;
object-fit: cover;
}
.slideslp * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slideslp input { display: none; }
.slidelp-container { display: block; }
.slidelp {
top: 0;
opacity: 0;
width: 550px;
height: 550px;
margin-left: -25px;
display: block;
position: absolute;
transform: scale(1);
animation : 0.2s;
transition: all .2s linear;
}
.slidelp img {
width: 100%;
height: 100%;
background-position: center;
object-fit: cover;
}
.navlp label {
width: 110px;
margin-left: -50px;
margin-top: 230px;
height: 0px;
display: none;
position: absolute;
opacity: 0.1;
z-index: 1;
cursor: pointer;
transition: opacity .2s;
color: #292929;
font-size: 60pt;
text-align: center;
line-height: 80px;
font-family: "Montserrat", sans-serif;
background-color: transparent;
}
.slidelp:hover + .navlp label { opacity: 0.5; }
.navlp label:hover { opacity: 1; }
.navlp .nextlp { right: 0; }
input:checked + .slidelp-container .slidelp {
opacity: 1;
transform: scale(1);
animation : 0.2s;
transition: opacity .2s linear;
}
input:checked + .slidelp-container .navlp label { display: block; }
.navlp-dots {
width: 100%;
margin-left: -40px;
bottom: 9px;
height: 22px;
display: block;
position: absolute;
text-align: center;
}
.navlp-dots .navlp-dot {
top: -5px;
width: 9px;
height: 9px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: #87929a;
opacity: 0.5;
}
.navlp-dots .navlp-dot:hover {
cursor: pointer;
background-color: #8047c7;
opacity: 0.7;
}
input#imglp-1:checked ~ .navlp-dots label#imglp-dot-1,
input#imglp-2:checked ~ .navlp-dots label#imglp-dot-2,
input#imglp-3:checked ~ .navlp-dots label#imglp-dot-3,
input#imglp-4:checked ~ .navlp-dots label#imglp-dot-4,
input#imglp-5:checked ~ .navlp-dots label#imglp-dot-5
{
background: #8047c7;
opacity: 1;
}
.lpcar-header {
display: inline-flex;
width: 550px;
padding: 15px;
}
.iconsmallpcar {
width: 42px;
height: 42px;
border-radius: 100%;
background: #c92d8e;
box-shadow: 0 -50px 80px -40px #56b1ff inset;
padding: 2px;
cursor: pointer;
}
.iconsmallpcar img {
width: 40px;
height: 40px;
border-radius: 100%;
border: solid 1px #1b1b1b;
padding: 0px;
cursor: pointer;
margin: 0px 0 0 0px;
object-fit: cover;
}
.lpcar-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;
}
.followlpcar {
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;
}
.followlpcar: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;
}
.buttonspcar {
width: 550px;
height: 42px;
background-image: url('https://forumupload.ru/uploads/001c/28/10/2/663905.png');
}
.buttonspcar2 {
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;
}
.buttonspcar2: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;
}
.likespcar {
font-family: "Montserrat", sans-serif;
font-weight: 400;
color: #a9a9a9;
font-size: 12px;
width: 500px;
text-align: left;
position: relative;
left: 5px;
}
.lpcar-txt {
width: 490px;
text-align: justify;
line-height: 130%;
font-size: 11px;
font-family: "Montserrat", sans-serif;
left: 15px;
padding-top: 5px;
color: #a9a9a9;
}
.lpcar-txt span {
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #c8c8c8;
font-size: 12px;
}
.lpcar-txt a{
font-weight: 500;
font-family: "Montserrat", sans-serif;
font-size: 11px;
color: #8e63c3!important;
}
.lpcar-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;
}
.lpcar-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="lpcargram-post"><div class="lpcar-header"><div class="iconsmallpcar">
<img src="https://forumupload.ru/uploads/001c/28/10/2/44913.png"></div> <!-- аватар профиля, размер не менее 42px -->
<div class="lpcar-user">username</div><!-- название вашего профиля -->
<!-- вместо этого текста можно вставить значок верификации -->
<div class="followlpcar">Подписаться</div></div>
<ul class="slideslp">
<input type="radio" name="radiolp-btn" id="imglp-1" checked />
<li class="slidelp-container">
<div class="slidelp">
<img src="https://i.pinimg.com/564x/0c/11/f1/0c11f183a3df6ec29d7d64866169c7d6.jpg" />
</div><div class="navlp">
<label for="imglp-5" class="prevlp">‹</label>
<label for="imglp-2" class="nextlp">›</label>
</div>
</li>
<input type="radio" name="radiolp-btn" id="imglp-2" />
<li class="slidelp-container">
<div class="slidelp">
<img src="https://i.pinimg.com/564x/ac/6f/dc/ac6fdcdc0cd703369b4a52904c96aafc.jpg" />
</div><div class="navlp">
<label for="imglp-1" class="prevlp">‹</label>
<label for="imglp-3" class="nextlp">›</label>
</div>
</li>
<input type="radio" name="radiolp-btn" id="imglp-3" />
<li class="slidelp-container">
<div class="slidelp">
<img src="https://i.pinimg.com/564x/e5/e3/36/e5e3365225ff96db024a7a599e48f6aa.jpg" />
</div>
<div class="navlp">
<label for="imglp-2" class="prevlp">‹</label>
<label for="imglp-4" class="nextlp">›</label>
</div>
</li>
<input type="radio" name="radiolp-btn" id="imglp-4" />
<li class="slidelp-container">
<div class="slidelp">
<img src="https://i.pinimg.com/564x/7e/ac/95/7eac956451e0cb7cb2bf6527316ae741.jpg" />
</div>
<div class="navlp">
<label for="imglp-3" class="prevlp">‹</label>
<label for="imglp-1" class="nextlp">›</label>
</div>
</li>
<li class="navlp-dots">
<label for="imglp-1" class="navlp-dot" id="imglp-dot-1"></label>
<label for="imglp-2" class="navlp-dot" id="imglp-dot-2"></label>
<label for="imglp-3" class="navlp-dot" id="imglp-dot-3"></label>
<label for="imglp-4" class="navlp-dot" id="imglp-dot-4"></label>
</li>
</ul>
<!-- заменяйте ссылку на картинку не менее 550px -->
<div class="buttonspcar"></div><div class="buttonspcar2"></div>
<div class="likespcar"><b>Нравится:</b> <b>666</b></div> <!-- заменить цифры -->
<div class="lpcar-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="lpcar-comments">Смотреть все комментарии (00)</div> <!-- замените цифры количества комментариев -->
<div class="lpcar-ago">10 часов назад</div> <!-- впишите дату публикации поста персонажем -->
</div></center>[/html]
