шаблон

[html]<div class="template-header">
<div class="template-header_title"><span>sns</span></div>
<div class="template-main">
<div class="template-main_cite">можно удалить все, но не из памяти.</div>
<center>МЕНЯТЬ ШАБЛОН КАТЕГОРИЧЕСКИ ЗАПРЕЩЕНО. ДЛЯ ПОМОЩИ С ЗАПОЛНЕНИЕМ КОДА МОЖНО ОБРАТИТЬСЯ К ЛЮБОМУ ИЗ АДМИНИСТРАТОРОВ.
</div>
</div>

<div class="hngng-sns hngng-sns-left">
<img src="https://via.placeholder.com/150" alt="icon" class="
userpic avatar">
<div class="username">username</div>
<div class="main">

<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content">
<div class="msg__text">текст сообщения</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>

<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content last-call">
<div class="msg__text">пропущенный звонок</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>

<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content voice">
<div class="msg__text">
<details>
<summary>
показать расшифровку
</summary>
текст голосового
</details>
</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
</div>
</div>

<div class="hngng-sns hngng-sns-right">
<img src="https://via.placeholder.com/150" alt="icon" class="
userpic avatar">
<div class="username">username</div>
<div class="main">

<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content voice">
<div class="msg__text"> <details>
<summary>
показать расшифровку
</summary>
текст голосового
</details></div>
<div class="msg__time">0:00 pm</div>
</div>
</div>

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

взять код

Код:

[html]<div class="hngng-sns hngng-sns-left">

        <!-- ВАША АВАТАРКА -->
        <img src="ССЫЛКА" alt="icon" class="userpic avatar">

<div class="username">

            <!-- ВАШ ЮЗЕРНЕЙМ -->
            username

</div><div class="main">


            <!-- НАЧАЛО СООБЩЕНИЯ -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content"><div class="msg__text">

                    текст сообщения

</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- КОНЕЦ СООБЩЕНИЯ -->


            <!-- КАРТИНКА НАЧАЛО -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content"><div class="msg__picture">
                <!-- ВАША КАРТИНКА-->
                 <img src="ССЫЛКА" alt="picture">

</div><div class="msg__time">

                 0:00 pm

</div></div></div>
            <!-- КАРТИНКА КОНЕЦ -->


            <!-- ПРОПУЩЕННЫЙ ЗВОНОК НАЧАЛО-->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content last-call"><div class="msg__text">пропущенный звонок</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- ПРОПУЩЕННЫЙ ЗВОНОК КОНЕЦ-->


            <!-- НАЧАЛО ГОЛОСОВОГО -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content voice"><div class="msg__text">

            <!-- НАЧАЛО РАСШИФРОВКИ ГС (МОЖНО УДАЛИТЬ ЭТУ ЧАСТЬ, ЕСЛИ НЕ НУЖНА)-->
<details><summary>показать расшифровку</summary>

                            текст голосового

</details>
            <!-- КОНЕЦ РАСШИФРОВКИ ГС -->

</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- КОНЕЦ ГОЛОСОВОГО -->


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

взять код

Код:

[html]<div class="hngng-sns hngng-sns-right">

        <!-- ВАША АВАТАРКА -->
        <img src="ССЫЛКА" alt="icon" class="userpic avatar">

<div class="username">

            <!-- ВАШ ЮЗЕРНЕЙМ -->
            username

</div><div class="main">


            <!-- НАЧАЛО СООБЩЕНИЯ -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content"><div class="msg__text">

                    текст сообщения

</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- КОНЕЦ СООБЩЕНИЯ -->


            <!-- КАРТИНКА НАЧАЛО -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content"><div class="msg__picture">
                <!-- ВАША КАРТИНКА-->
                 <img src="ССЫЛКА" alt="picture">

</div><div class="msg__time">

                 0:00 pm

</div></div></div>
            <!-- КАРТИНКА КОНЕЦ -->


            <!-- ПРОПУЩЕННЫЙ ЗВОНОК НАЧАЛО-->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content last-call"><div class="msg__text">пропущенный звонок</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- ПРОПУЩЕННЫЙ ЗВОНОК КОНЕЦ-->


            <!-- НАЧАЛО ГОЛОСОВОГО -->
<div class="msg">

                <!-- ВАША АВАТАРКА -->
                <img src="ССЫЛКА" alt="icon" class="msg__userpic avatar">

<div class="msg__content voice"><div class="msg__text">

            <!-- НАЧАЛО РАСШИФРОВКИ ГС (МОЖНО УДАЛИТЬ ЭТУ ЧАСТЬ, ЕСЛИ НЕ НУЖНА)-->
<details><summary>показать расшифровку</summary>

                            текст голосового

</details>
            <!-- КОНЕЦ РАСШИФРОВКИ ГС -->

</div><div class="msg__time">

                    0:00 pm

</div></div></div>
            <!-- КОНЕЦ ГОЛОСОВОГО -->


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