name surname name surname
user user user user
user user user user
long episode name
_ams дура _ams patricia _ams sylas _ams nick 4

Zion_test

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Zion_test » Новый форум » соцсети мантра

соцсети мантра

Страница: 1

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

1

  • Автор: whoopie
  • whoopie
  • Сообщений: 1177
  • Последний визит:
    Сегодня 17:44:42
  • lz: текст текст текст текст
  • 1212: 7/6
  • банк: 460

[html]<div id="insta_single">

    <!-- Шапка публикации -->
    <div class="insta_single_header">

        <div class="insta_single_avatar">
            <img src="https://i.pinimg.com/736x/f7/55/aa/f755aaf7cb2bdf778b3dbd2f37fd30fd.jpg">
        </div>

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

        <div class="insta_single_options"></div>
</div>

    <!-- Основная фотография -->
    <div class="insta_single_photo">
        <img src="/files/001b/95/a1/85712.jpg">
    </div>

    <!-- Кнопки -->
    <div class="insta_single_buttons">

        <div class="insta_single_icons">
            <div class="insta_single_like"></div>
            <div class="insta_single_comment"></div>
            <div class="insta_single_share"></div>
        </div>

        <div class="insta_single_bookmark"></div>
    </div>

    <!-- Отметки «Нравится» -->
    <div class="insta_single_liked">

        <img src="/files/001b/95/a1/33822.jpg">

        <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 class="tab_home"></div>

        <div class="tab_search"></div>

        <div class="tab_add"></div>

        <div class="tab_likes"></div>

        <div class="tab_profile">
            <img src="https://i.pinimg.com/736x/9c/db/15/9cdb1577626d53b26460a206834f11b6.jpg">
        </div>

    </div>

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

<style>
/* ==================================================
   ОБЩИЙ БЛОК ПУБЛИКАЦИИ
================================================== */

#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]

0

2

  • Автор: whoopie
  • whoopie
  • Сообщений: 1177
  • Последний визит:
    Сегодня 17:44:42
  • lz: текст текст текст текст
  • 1212: 7/6
  • банк: 460

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

<style>
/* ==================================================
   ОБЩИЕ НАСТРОЙКИ
================================================== */

#instagram {
    position: relative;
    width: 561px;
    max-width: 100%;
    min-height: 228px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 30px;
    background-image: url(https://upforme.ru/uploads/001c/ac/b2/2/681363.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #4c6264;
    font-family: Inter, Helvetica, sans-serif;
}

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

/* ==================================================
   ОСНОВНАЯ ЧАСТЬ
================================================== */

#instagram .insta_header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    padding-left: 40px;
}

/* ==================================================
   АВАТАР
================================================== */

#instagram .insta_avatar {
    position: relative;
    flex: 0 0 156px;
    border: 3px solid rgb(75 143 151 / 48%);
    border-radius: 25px;
    background: rgba(224, 224, 224, 0.7);
    top: 20px;
}

#instagram .insta_avatar img {
    display: block !important;
    width: 156px !important;
    max-width: none !important;
    height: 156px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 21px;
    object-fit: cover;
    object-position: center;
}

/* ==================================================
   ПРАВАЯ ЧАСТЬ
================================================== */

#instagram .insta_info {
    flex: 1;
    min-width: 0;
    position: relative;
    top: 18px;
}

/* Маленькая надпись над ником */

#instagram .insta_label {
    display: block;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

/* Никнейм */

#instagram .insta_nickname {
display: block;
    margin-bottom: 15px;
    color: #42595b;
    font-family: Inter, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: lowercase;
}

/* ==================================================
   СТАТИСТИКА
================================================== */

#instagram .insta_stats {
    display: flex;
    gap: 23px;
    margin-bottom: 27px;
}

#instagram .insta_stats span {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #536769;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

#instagram .insta_stats strong {
    color: #536769;
    font-size: 13px;
    font-weight: 400;
}

/* ==================================================
   ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЕ
================================================== */

#instagram .insta_about {
    color: #344e51;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.35;
}

#instagram .insta_about strong {
    display: inline-block;
    margin-bottom: 5px;
    color: #3f585b;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

/* ==================================================
   ССЫЛКИ В ОПИСАНИИ
================================================== */

#instagram .insta_about a {
    color: #527477 !important;
    font-weight: 500;
    text-decoration: none !important;
}

#instagram .insta_about a:hover {
    color: #2f5559 !important;
    text-decoration: none !important;
}

</style>

<div id="instagram">

    <div class="insta_header">

        <!-- Аватар -->
        <div class="insta_avatar">
            <img
                src="/files/001b/95/a1/33822.jpg"
            >
        </div>

        <!-- Информация -->
        <div class="insta_info">

            <span class="insta_nickname">
                nickname
            </span>

            <!-- Статистика -->
            <div class="insta_stats">

                <span>
                    <strong>0</strong>
                    публикаций
                </span>

                <span>
                    <strong>0</strong>
                    подписчиков
                </span>

                <span>
                    <strong>0</strong>
                    подписок
                </span>

            </div>

            <!-- Описание -->
            <div class="insta_about">
                <strong>Имя Фамилия</strong><br>

                Любой текст<br>
                Можно с переносом строки<br>
                Сколько угодно строк
            </div>

        </div>

    </div>

</div>
<style>
/* ==================================================
   ОБЩИЕ НАСТРОЙКИ
================================================== */

#instagram {
    position: relative;
    width: 561px;
    max-width: 100%;
    height: 236px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 30px;
    background-image: url(https://upforme.ru/uploads/001c/ac/b2/2/681363.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #4c6264;
    font-family: Inter, Helvetica, sans-serif;
}

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

/* ==================================================
   ОСНОВНАЯ ЧАСТЬ
================================================== */

#instagram .insta_header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    padding-left: 40px;
}

/* ==================================================
   АВАТАР
================================================== */

#instagram .insta_avatar {
    position: relative;
    flex: 0 0 156px;
    border: 3px solid rgb(75 143 151 / 48%);
    border-radius: 25px;
    background: rgba(224, 224, 224, 0.7);
    top: 20px;
}

#instagram .insta_avatar img {
    display: block !important;
    width: 156px !important;
    max-width: none !important;
    height: 156px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 21px;
    object-fit: cover;
    object-position: center;
}

/* ==================================================
   ПРАВАЯ ЧАСТЬ
================================================== */

#instagram .insta_info {
    flex: 1;
    min-width: 0;
}

/* Маленькая надпись над ником */

#instagram .insta_label {
    display: block;
    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

/* Никнейм */

#instagram .insta_nickname {
display: block;
    margin-bottom: 15px;
    color: #42595b;
    font-family: Inter, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: lowercase;
}

/* ==================================================
   СТАТИСТИКА
================================================== */

#instagram .insta_stats {
    display: flex;
    gap: 23px;
    margin-bottom: 27px;
}

#instagram .insta_stats span {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #536769;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

#instagram .insta_stats strong {
    color: #536769;
    font-size: 13px;
    font-weight: 400;
}

/* ==================================================
   ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЕ
================================================== */

#instagram .insta_about {
    color: #344e51;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.35;
}

#instagram .insta_about strong {
    display: inline-block;
    margin-bottom: 5px;
    color: #3f585b;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

/* ==================================================
   ССЫЛКИ В ОПИСАНИИ
================================================== */

#instagram .insta_about a {
    color: #527477 !important;
    font-weight: 500;
    text-decoration: none !important;
}

#instagram .insta_about a:hover {
    color: #2f5559 !important;
    text-decoration: underline !important;
}

</style>[/html]

0

Страница: 1

Вы здесь » Zion_test » Новый форум » соцсети мантра

Рейтинг форумов | Создать форум бесплатно