////

[html]

}

.first-line {
display: inline-flex;
padding: 40px 20px;
width: 360px;
}

.user-profile img{
width: 14px;
height: 14px;
border-radius: 100%;
float: right;
margin-right: -85px;
margin-top: 10px;
cursor: pointer;
}

.iconprof {
width: 105px;
height: 104px;
border-radius: 100%;
background: #a400ff;
box-shadow: 0 -80px 50px -50px #fdd500 inset;
padding: 2px;
position: relative;
left: -90px;
top: 15px;
cursor: pointer;
}

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

.profname {
font-family: "Montserrat", sans-serif;
font-weight: 400;
color: #1f2326;
font-size: 16px;
position: relative;
top: 15px;
left: -57px;
}

.verif img {
height: 15px;
width: 15px;
position: relative;
top: 22px;
left: -50px;
}

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

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

.appinfobox 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%;

}

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

}

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

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

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

.maini{
padding: 10px 0;
margin-top: 25px;
margin-left: 15px;
}

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

}

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

}

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

.followus {
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: 10px;
left: 0px;
padding: 6px 0px 0px 0px;
}

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

.writeus {
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: 10px;
left: 10px;
padding: 6px 0px 0px 0px;
}

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

.recom {
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: 10px;
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;
}

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

.highl-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;
}

.highl-pic img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: px solid #fff;
cursor: pointer;
}
.highl-pic:hover {
filter: grayscale(0%);
filter: gray;
-webkit-filter: grayscale(0%);
filter: none;
transition: 0.4s ease;
}

.highlname{
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;
}

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

}

.wrphotos_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;

}

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

}

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

.numbers_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;
}

.likes_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;
}

.comments_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;
}

.post-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;
}

.photo_insta:hover > .numbers_insta {
opacity: 1;

</style>

<div class="profname">username</div>

<div class="appinfobox"><section class="maini_links"><info><b>150</b>публикации </info><info><b>16,5 млн.</b>подписчики</info><info><b>1</b>подписки</info></div></div>

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

<section class="maini_links">
<a href="ССЫЛКА НА ПРОФИЛЬ ИЛИ АНКЕТУ ПО ЖЕЛАНИЮ"><div class="followus">Подписаться</div></a>
<a href="ССЫЛКА НА ЛС"><div class="writeus">Сообщение</div></a>
<div class="recom"></div></section>

<div class="highl"><div class="highl-pic"><img src="https://i.pinimg.com/564x/58/ca/36/58ca36b4a402b9755cf352396621eb4b.jpg" alt=""></div><p class="highlname">название</p></div> <!-— МЕНЯЕМ КАРТИНКУ И НАЗВАНИЕ НА СВОИ (ЧТОБЫ ДОБАВИТЬ ЕЩЕ - ДОБАВЛЯЕМ СТРОКУ; УДАЛИТЬ - СТИРАЕМ СТРОКУ) -->

<div class="highl"><div class="highl-pic"><img src="https://i.pinimg.com/564x/05/cf/5e/05cf5edc4b0acb98dff922ae5135fc5c.jpg" alt=""></div><p class="highlname">название</p></div>

<div class="highl"><div class="highl-pic"><img src="https://i.pinimg.com/564x/12/c7/2d/12c72d82a93a6ce0a45de641522a2dcd.jpg" alt=""></div><p class="highlname">название</p></div>

<div class="highl"><div class="highl-pic"><img src="https://i.pinimg.com/564x/47/24/59/472459260ac669d43ea1ce81ce022983.jpg" alt=""></div><p class="highlname">название</p></div>

</div></section>

</div>
</div>

[/html]

Tester 2: Dumpster fire

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

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

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

////

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

Поделиться12024-05-15 19:43:58