1212

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

.slides {
padding: 0;
width: 550px;
height: 550px;
display: block;
margin: 0 auto;
position: relative;
background-position: center;
object-fit: cover;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 550px;
height: 550px;
margin-left: -25px;
display: block;
position: absolute;

transform: scale(0);

animation : 2s;

transition: all .0s step-end;
}

.slide img {
width: 100%;
height: 100%;
background-position: center;
object-fit: cover;
}

.nav label {
width: 110px;
margin-left: -50px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: #FFF;
font-size: 60pt;
text-align: center;
line-height: 480px;
font-family: "Montserrat", sans-serif;
background-color: transparent;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container .slide {
opacity: 1;

transform: scale(1);

transition: opacity .2s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
width: 100%;
margin-left: -40px;
bottom: 9px;
height: 22px;
display: block;
position: absolute;
text-align: center;

}

.nav-dots .nav-dot {
top: -5px;
width: 9px;
height: 9px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: #87929a;
opacity: 0.5;
}

.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: #49adf4;
opacity: 0.7;
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6,
input#img-7:checked ~ .nav-dots label#img-dot-7,
input#img-8:checked ~ .nav-dots label#img-dot-8,
input#img-9:checked ~ .nav-dots label#img-dot-9 {
background: #49adf4;
opacity: 1;
}

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

.iconsmall {
width: 42px;
height: 42px;
border-radius: 100%;
background: #c92d8e;
box-shadow: 0 -70px 30px -60px #fdd500 inset;
padding: 2px;
cursor: pointer;
}

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

}

.lacar-user {
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #1f2326;
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: 16px;
}

.followlacar {
border: 0px solid;
width: 130px;
height: 20px;
cursor: pointer;
font-weight: 600;
background: #0195f6;
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;
}

.followlacar: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;
}

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

}

.buttonscar2 {
width: 32px;
height: 42px;
background-image: url('https://forumupload.ru/uploads/001c/28/10/2/388708.png');
position: left;
margin-top: -42px;
margin-left: -465px;
cursor: pointer;
}

.buttonscar2: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/526945.png');
cursor: pointer;
}

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

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

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

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

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

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

</style>

<div class="lacar-user">username</div>

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

</li>
</ul>


<div class="buttonscar"></div><div class="buttonscar2"></div>

<div class="likes"><b>Нравится:</b> <b>000</b></div>

<div class="lacar-txt"><span>username</span> сюда вставляется текст вашего поста, его можно делать любой длины и при необходимости можно в него можно добавить обращение к другому пользователю со ссылкой, которая будет выглядеть так: <a href="ССЫЛКА НА ПРОФИЛЬ ИЛИ АНКЕТУ ДРУГОГО ПЕРСОНАЖА">@name</a></div>

<div class="lacar-comments">Смотреть все комментарии (00)</div>

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

пробник

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

1212

Сообщений 1 страница 1 из 1

Поделиться12024-05-20 23:02:32