соцсетка 2

[html]
<div id="insta_single">

<div class="insta_single_header">

<div class="insta_single_nickname">
name surname
</div>

<div class="insta_single_photo">
<img src="/files/001b/95/a1/85712.jpg">
</div>

<div class="insta_single_buttons">

<div class="insta_single_liked">

<span>
Нравится <strong>tara.cook1982</strong> и <strong>другим</strong>
</span>

</div>

<div class="insta_single_description">
<strong>nickname</strong>
Комментарий к публикации
</div>

<div class="insta_single_date">
07 мая 2026
</div>

<div class="insta_single_tabbar">

</div>

</div>
<link rel="stylesheet" href="/files/001b/95/a1/11817.css">
<link rel="stylesheet" href="/files/001b/95/a1/96876.css">

#insta_single {
position: relative;
width: 420px;
max-width: 100%;
margin: 25px auto;
overflow: hidden;
border: 1px solid rgba(111, 132, 135, 0.62);
border-radius: 12px;
background-image: url(https://upforme.ru/uploads/001c/ac/b2/2/883109.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #4d62654a;
font-family: Inter, Helvetica, sans-serif;
box-shadow: 0 3px 10px rgba(36, 47, 50, 0.15);
}

#insta_single,
#insta_single * {
box-sizing: border-box;
}

/* Сброс форумных стилей изображений */

#insta_single img {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
width: 420px;
}

/* ==================================================
ШАПКА ПУБЛИКАЦИИ
================================================== */

#insta_single .insta_single_header {
display: flex;
align-items: center;
width: 100%;
height: 77px;
padding: 0 20px;
background: #e0f7fd63;
}

/* Аватар в шапке */

#insta_single .insta_single_avatar {
flex: 0 0 38px;
width: 38px;
height: 38px;
overflow: hidden;
border-radius: 5px;
background: #d4d9d9;
border: 1px solid #799894;
}

#insta_single .insta_single_avatar img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
}

/* Имя пользователя */

#insta_single .insta_single_nickname {
margin-left: 14px;

color: #3e5356;
font-size: 11px;
font-style: italic;
font-weight: 700;
line-height: 1;
}

/* Три точки */

#insta_single .insta_single_options {
position: relative;

width: 36px;
height: 30px;
margin-left: auto;
}

#insta_single .insta_single_options::before {
content: "• • •";

position: absolute;
top: 50%;
left: 50%;

color: #597074;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;

transform: translate(-50%, -55%);
}

/* ==================================================
ОСНОВНАЯ ФОТОГРАФИЯ
================================================== */

#insta_single .insta_single_photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #dcdcdc;
border: 1px solid #6f83814a;
border-left: none;
border-right: none;
}

/* ==================================================
КНОПКИ ПОД ФОТОГРАФИЕЙ
================================================== */

#insta_single .insta_single_buttons {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 49px;
padding: 0 21px;
background: #e0f7fd63;
}

#insta_single .insta_single_icons {
display: flex;
align-items: center;
gap: 15px;
}

/* Общие настройки иконок */

#insta_single .insta_single_like,
#insta_single .insta_single_comment,
#insta_single .insta_single_share,
#insta_single .insta_single_bookmark {
position: relative;
flex: 0 0 auto;
cursor: pointer;
}

/* Лайк */

#insta_single .insta_single_like {
width: 26px;
height: 27px;
}

#insta_single .insta_single_like::before {
content: "\f004";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 25px;
}

/* Комментарий */

#insta_single .insta_single_comment {
width: 23px;

}

#insta_single .insta_single_comment::after {
content: "\f27a";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 23px;
}

/* Отправить */

#insta_single .insta_single_share {
width: 23px;
height: 27px;
}

#insta_single .insta_single_share::before {
content: "\f1d8";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 23px;
}

/* Закладка */

#insta_single .insta_single_bookmark {
width: 18px;
height: 25px;
}

#insta_single .insta_single_bookmark::before {
content: "\f02e";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 23px;
}

/* ==================================================
СТРОКА С ЛАЙКАМИ
================================================== */

#insta_single .insta_single_liked {
display: flex;
align-items: center;
min-height: 38px;
padding: 4px 20px;
color: #53676a;
font-size: 10px;
line-height: 1.35;
background: #e0f7fd63;
}

#insta_single .insta_single_liked img {
display: block !important;
flex: 0 0 20px;
width: 20px !important;
height: 20px !important;
margin-right: 8px !important;
border-radius: 4px !important;
object-fit: cover;
object-position: center;
}

#insta_single .insta_single_liked strong {
margin: 0 2px;
color: #43585b;
font-weight: 700;
}

/* ==================================================
ОПИСАНИЕ ПУБЛИКАЦИИ
================================================== */

#insta_single .insta_single_description {
min-height: 35px;
padding: 7px 20px;
color: #53676a;
font-size: 10px;
line-height: 1.45;
background: #e0f7fd63;
}

#insta_single .insta_single_description strong {
margin-right: 5px;
color: #405659;
font-weight: 700;
}

/* ==================================================
ДАТА
================================================== */

#insta_single .insta_single_date {
min-height: 30px;
padding: 5px 20px 9px;
color: #788d90;
font-size: 10px;
line-height: 1.3;
background: #e0f7fd63;
}

/* ==================================================
НИЖНЯЯ ПАНЕЛЬ
================================================== */

#insta_single .insta_single_tabbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 58px;
padding: 0 23px;
border-top: 1px solid rgba(104, 130, 133, 0.25);
background: rgb(214 231 233 / 24%);
}

#insta_single .tab_home,
#insta_single .tab_search,
#insta_single .tab_add,
#insta_single .tab_likes,
#insta_single .tab_profile {
position: relative;
flex: 0 0 30px;
width: 30px;
height: 30px;
}

/* Дом */

#insta_single .tab_home::before {
content: "\f015";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 25px;
}

/* Поиск */

#insta_single .tab_search::before {
content: "\f002";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 25px;
}

/* Добавить */

#insta_single .tab_add::before {
content: "\f055";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 27px;
}

/* Сердце */

#insta_single .tab_likes::before {
content: "\f004";
position: absolute;
top: 50%;
left: 50%;
color: #4f5e5da6;
font-family: "Font Awesome 6 Pro";
line-height: 1;
transform: translate(-50%, -50%);
font-size: 28px;
}

/* Профиль */

#insta_single .tab_profile {
overflow: hidden;
border-radius: 5px;
}

#insta_single .tab_profile img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
}

/* ==================================================
ССЫЛКИ И ЭФФЕКТЫ
================================================== */

#insta_single a {
color: #49696d !important;
font-weight: 700;
text-decoration: none !important;
}

#insta_single a:hover {
color: #2e5257 !important;
text-decoration: none !important;
}

#insta_single .insta_single_like:hover,
#insta_single .insta_single_comment:hover,
#insta_single .insta_single_share:hover,
#insta_single .insta_single_bookmark:hover,
#insta_single .insta_single_tabbar > div:hover {
opacity: 0.7;
}

</style>[/html]

Zion_test

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

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

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

соцсетка 2

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

Поделиться12026-06-20 19:12:45