Test

Объявление

name name name name
long episode title
name Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. I читать далее

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

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


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


Социальная сеть

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

1

123

0

2

можете завести свою темку с instagram в этом же подфоруме и радовать подписчиков и прочих контентом.
шаблоны предельно простые, с объяснениями внутри
пример названия темы: lando norris (@ник инсты)

[html]
<section class='chat-wrapper'>

<!--------- аватар --------->
<img src="https://upforme.ru/uploads/001c/b7/5d/6/359207.png" alt="avatar">

<!--------- фон --------->
<img src="https://forumstatic.ru/files/001c/b8/3a/76738.jpg" alt="bg">
<div class="soc-parameters">

<!--------- пик, посты, подписчики--------->
<div>@nickname</div>
<p><span>123</span>posts</p>
<p><span>123k</span>followers</p>
<p><span>1234</span>following</p>
</div>

<div class="profile-widget">
 
  <div class="profile-info">
    <h1 class="username">Username</h1>
    <span  class="description">заголовок</span >
    <span  class="muted">строчка текста</span >
    <span  class="muted">строчка текста</span >
  </div>

  <div class="action-buttons">
    <button>Edit Profile</button>
    <button>Promotions</button>
    <button>Mail</button>
  </div>

  <div class="highlights">
    <div class="highlight-item">
      <div class="circle new-circle">
        <span>+</span>
      </div>
      <span class="label">New</span>
    </div>
    <div class="highlight-item">
      <div class="circle"><img src="https://upforme.ru/uploads/001c/b7/5d/6/359207.png"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
  </div>

</div>

<!--------- фотки блоком--------->
<div class='soc-mainpage-photoblock'><div>

<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">

</div></div>

</section>[/html]

шаблон (не забываем убрать * из кода)
Код:
[*html]
<section class='chat-wrapper'>

<!--------- аватар --------->
<img src="https://upforme.ru/uploads/001c/b7/5d/6/359207.png" alt="avatar">

<!--------- фон --------->
<img src="https://forumstatic.ru/files/001c/b8/3a/76738.jpg" alt="bg">
<div class="soc-parameters"> 

<!--------- пик, посты, подписчики--------->
<div>@nickname</div>
<p><span>123</span>posts</p>
<p><span>123k</span>followers</p>
<p><span>1234</span>following</p>
</div>

<div class="profile-widget">
  
  <div class="profile-info">
    <h1 class="username">Username</h1>
    <span  class="description">заголовок</span >
    <span  class="muted">строчка текста</span >
    <span  class="muted">строчка текста</span >
  </div>

  <div class="action-buttons">
    <button>Edit Profile</button>
    <button>Promotions</button>
    <button>Mail</button>
  </div>

  <div class="highlights">
    <div class="highlight-item">
      <div class="circle new-circle">
        <span>+</span>
      </div>
      <span class="label">New</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
    <div class="highlight-item">
      <div class="circle"></div>
      <span class="label">Lorem</span>
    </div>
  </div>

</div>



<!--------- фотки блоком--------->
<div class='soc-mainpage-photoblock'> 
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg">
<img src="https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg"> <!-- большая фотка -->
</div>



</section>[/html*]

0

3

[html]
<style>

</style>
<section class='chat-wrapper'>

<section class="socpost-wrapper" '>

<div class='low-cont'>
<!------------- аватар и ник юзера ------------->

<a href=''><img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' /> <span data-date='11 июля 2025'>@nickname</span></a>

<!------------- просмотры и лайки ------------->
<div>
<p>123</p>
<p>23</p>
</div></div>

<!------------- фото поста ------------->
<img src='https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg' />

<!-------- текст поста любой длины (не надо вставлять <br>, текст переносится автоматически по обычному энтеру ---------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit.
In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.
</p>

<section><section>[/html]

шаблон (не забываем убрать * из кода)
Код:
[*html]
<style>


</style>
<section class='chat-wrapper'>


<section class="socpost-wrapper" '>

<div class='low-cont'>
<!------------- аватар и ник юзера ------------->

<a href=''><img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' /> <span data-date='11 июля 2025'>@nickname</span></a>

<!------------- просмотры и лайки ------------->
<div>
<p>123</p>
<p>23</p>
</div></div>

<!------------- фото поста ------------->
<img src='https://i.pinimg.com/1200x/09/24/83/092483273a2a4758ca1353012df5691c.jpg' /> 


<!-------- текст поста любой длины (не надо вставлять <br>, текст переносится автоматически по обычному энтеру ---------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. 
Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit.
 In vulputate condimentum bibendum. Nulla vehicula vel nisi et vehicula. Cras ut tellus ut felis gravida ullamcorper. Nulla quis quam nec arcu consequat mollis. Phasellus finibus odio non tellus molestie dapibus.
</p>

<section><section>[/html*]

[html]
<style>*

</style>
<section class='chat-wrapper'>

<section class="socpost-wrapper" '>

<div class='low-cont'>
<!------------- аватар и ник юзера ------------->

<a href=''><img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' /> <span data-date='11 июля 2025'>@nickname</span></a>

<!------------- просмотры и лайки ------------->
<div>
<p>123</p>
<p>23</p>
</div></div>

<!-------- текст поста любой длины (не надо вставлять <br>, текст переносится автоматически по обычному энтеру ---------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit.
</p>

<section><section>[/html]

шаблон (не забываем убрать * из кода)
Код:
[*html]
<style>


</style>
<section class='chat-wrapper'>


<section class="socpost-wrapper" '>

<div class='low-cont'>
<!------------- аватар и ник юзера ------------->

<a href=''><img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' /> <span data-date='11 июля 2025'>@nickname</span></a>

<!------------- просмотры и лайки ------------->
<div>
<p>123</p>
<p>23</p>
</div></div>

<!-------- текст поста любой длины (не надо вставлять <br>, текст переносится автоматически по обычному энтеру ---------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien. 
Nunc porta aliquam felis, eu ultrices neque varius accumsan. Cras congue lectus ut libero fermentum, non consequat lectus egestas. Aenean nisl urna, finibus a nulla sed, sodales feugiat velit.
</p>

<section><section>[/html*]

0

4

[html]<section class="chat-wrapper">
<div class="soc-avatars">
<!----- ссылка на профиль, аватар и ник --->
<a href="#ссылка_на_профиль"><img src="https://upforme.ru/uploads/001c/b7/5d/6/359207.png" alt="avatar" /> <span data-title='online'>@nickname</span></a>
</div>

<div class='chwrap'><div class="soc-chat-wrapper">
<!----- левое сообщение, дата в data-msgtime --->
<p class="left-msg" data-msgtime="05 august, 15:23">
<img src='https://upforme.ru/uploads/001c/b7/5d/6/494451.png' class='msg-av'>
скажи мне, ты дурак?
</p>
<p class="left-msg" data-msgtime="05 august, 15:23">
<img src='https://upforme.ru/uploads/001c/b7/5d/6/494451.png' class='msg-av'>
<img src="https://i.pinimg.com/736x/f7/8b/7a/f78b7a9b22785aa772a0c8784dc2145d.jpg"  />пересмотрел человека-паука?
</p>
<!----- левое войсовое сообщение, дата в data-msgtime --->
<p class="left-msg left-voice" data-msgtime="14:43 PM">
<img src="https://forumstatic.ru/files/001c/b8/3a/93131.png" alt="voice message" />

<!----- правое сообщение, дата в data-msgtime --->
<p class="right-msg">
<img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' class='msg-av'>
<img src="https://i.pinimg.com/736x/e2/20/69/e220693cae1c0c77f33ab815d01af204.jpg"  /> а ты солнце не любишь, я же ничего тебе не говорю 😅
</p>

<!----- правое войсовое сообщение, дата в data-msgtime --->
<p class="right-msg right-voice" data-msgtime="05 august, 11:23 AM">
<img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' class='msg-av'>
<img src="https://forumstatic.ru/files/001c/b8/3a/93131.png" alt="voice message" /><br>
кст, куда ты дел мое худи? я второй час ищу

</p>

<!----- правое сообщение, дата в data-msgtime --->
<p class="right-msg" data-msgtime="13:18">
а еще кроссы
</p>

</div><div class="write-msg"></div></div>

</section>[/html]

шаблон (не забываем * убрать из кода)
Код:
[*html]<section class="chat-wrapper">
<div class="soc-avatars">
<!----- ссылка на профиль, аватар и ник ---> 
<a href="#ссылка_на_профиль"><img src="https://upforme.ru/uploads/001c/b7/5d/6/359207.png" alt="avatar" /> <span data-title='online'>@nickname</span></a>
</div>

<div class='chwrap'><div class="soc-chat-wrapper"> 
<!----- левое сообщение, дата в data-msgtime ---> 
<p class="left-msg" data-msgtime="05 august, 15:23"> 
<img src='https://upforme.ru/uploads/001c/b7/5d/6/494451.png' class='msg-av'>
скажи мне, ты дурак?
</p>
<p class="left-msg" data-msgtime="05 august, 15:23"> 
<img src='https://upforme.ru/uploads/001c/b7/5d/6/494451.png' class='msg-av'>
<img src="https://i.pinimg.com/736x/f7/8b/7a/f78b7a9b22785aa772a0c8784dc2145d.jpg"  />пересмотрел человека-паука? 
</p>
<!----- левое войсовое сообщение, дата в data-msgtime ---> 
<p class="left-msg left-voice" data-msgtime="14:43 PM"> 
<img src="https://forumstatic.ru/files/001c/b8/3a/93131.png" alt="voice message" />

<!----- правое сообщение, дата в data-msgtime ---> 
<p class="right-msg">
<img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' class='msg-av'>
<img src="https://i.pinimg.com/736x/e2/20/69/e220693cae1c0c77f33ab815d01af204.jpg"  /> а ты солнце не любишь, я же ничего тебе не говорю 😅
</p>

<!----- правое войсовое сообщение, дата в data-msgtime ---> 
<p class="right-msg right-voice" data-msgtime="05 august, 11:23 AM"> 
<img src='https://upforme.ru/uploads/001c/b7/5d/6/359207.png' class='msg-av'>
<img src="https://forumstatic.ru/files/001c/b8/3a/93131.png" alt="voice message" /><br>
кст, куда ты дел мое худи? я второй час ищу 

</p>

<!----- правое сообщение, дата в data-msgtime ---> 
<p class="right-msg" data-msgtime="13:18"> 
а еще кроссы
</p>


</div><div class="write-msg"></div></div>


</section>[/html*]

0


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


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