lake house dreams когда одна мечта сбылась, ты отправляешься за новой.

the lake house

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

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


Вы здесь » the lake house » анкеты » сборная солянка


сборная солянка

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

1

https://upforme.ru/uploads/001b/d4/8f/7/457442.gif https://upforme.ru/uploads/001b/d4/8f/7/332848.gif
Anya Taylor-Joy

SYLVANAS AURELIA DUMBLEDORE
сильвана аурелия дамблдор


31.10.1872;
чистокровная;
рейвенкло, 6 курс;
охотник в команде своего факультета по квиддичу;


Ты появилась на свет холодным октябрьским утром, в день Самайна. "Как символично", - подумали бы многие, но по сути это только лишь совпадение и никакого символизма не существует. Точно не в этом случае. Тебя просто ждали. И не важно в какой это произошло бы день. Просто судьба так сложилась, не более того. Ты появилась на свет на радость собственной матушке и её брата, твоего дяди, Персиваля. Чего не скажешь про отца. Ведь о нём - ничего не известно. Этакий призрак в темных коридорах дома, притаившийся за поворотом, но так и не представший перед глазами. С самых юных лет, сколько бы ты ни задавалась вопросом о собственном происхождении, ответ был один. "Это был чистокровный волшебник из Болгарии, но у нас с ним не сложилось. Не стоит об этом." Очевидно, твоей матери было просто больно или неловко признавать, что она оказалась слишком беспечна, раз ты - внебрачное дитя. Вроде как такой позор для рода [кто бы тогда вообще мог подумать, что для семьи Дамблдор самые худшие времена ещё только впереди], но видимо под счастливой звездой всё-таки можно родиться, если даже отсутствие брака и отца рядом - не такой и страшный грех или повод указывать пальцем, перешёптываясь за спиной. А может тогда ты просто этого не осознавала и не замечала. Скорее всего последнее, ведь с последствиями ещё предстоит столкнуться. Когда станешь старше. Но в детстве всё было проще. И мир добрее.

Очевидно, что детство - это самая прекрасная, чудесная и счастливая пора жизни. Для тебя оно именно такое в памяти. Даже несмотря на некоторые огорчения, в виде ограничений. "Хорошо воспитанные леди не бегают по саду и не заглядывают под каждый куст, пачкая подол платья," - звучало всегда сухо и очень властно, в то время как тебе хотелось узнать и увидеть как можно больше. Загадки и всё неизведанное, точно так же, как и книги, тебя всегда привлекали. Манили к себе. Детский ум жаждал знаний, а любопытство требовало действий. Что в этом может быть плохого? Очевидно, что ничего, но ведь правила этикета никто не отменял, особенно в ситуации, в которой находились вы. Матушка любила тебя всем сердцем, но и без того подорванная репутация требовала строгости и воспитания, которое могли привить теперь лишь тебе. Может фамилия рода, в котором появилась на свет и не стала сиять меньше и не утратила влияния или богатств, что были разделены когда-то между Персивалем и Гонорией, твоей матушкой, но то, какой выбор она когда-то сделала, отразилось всё-таки тенью. С годами ты начинаешь это понимать. Как и то, что появившиеся на свет кузены, Альбус и Аберфорт, а так же кузина Ариана, были вне этой тени априори. Тебя это всегда радовало, ведь желала им только самого лучшего. Со своей семьёй ты поддерживала отношения всегда и это не изменилось и по сей день. Была близка с ними с малых лет, даже несмотря на разницу в возрасте. И даже когда пришло время отправиться в Хогвартс - не прекратила общения. Семья - самое дорогое, что есть в жизни. Это ты уяснила давно.

Хогвартс. Некоторые говорят о нём с придыханием. Некоторые - с лёгкой долей презрения или холодности. А кто-то и с равнодушием. Ты никогда не относила себя ни к одной из этих групп, но интерес был с самого начала. Это был трепет и любопытство, которое скрывать и не было смысла. Не удивительно, что распределяющая шляпа отправила тебя на Рейвенкло, под покровительство орла. Синий и бронзовый - твои цвета на ближайшие семь лет. Определенно тебе к лицу. Да и философия тебе поистине близка. Знания и загадки. Что могло бы быть лучше. Наконец-то матушка не сможет упрекать в стремлении к познаниям, что всегда выходили за рамки. Это же твоя суть. Отказаться не получится. Да ты никогда и не стремилась. Домашняя библиотека была изучена вдоль и поперек, а под присмотром дяди и матушки ты изучала заклинания, которые было возможно изучить дома, а что-то и в тайне от них. Всё это тоже служило подспорьем в определении себя.

Тебе определённо нравится в Хогвартсе, даже если временами и проскальзывает грусть по дому. Очень редкая. Всё-таки тебе больше по душе занятия, новые знания, тайны самого замка, которых, как поговаривают множество, нужно только их отыскать. Некоторые тебе даже поддаются. Определенно, когда тут особо скучать? К тому же, с первого же курса для себя наметила цель - быть лучшей во всём. Доля перфекционизма, которого не лишена, но которая может и свести с ума, если вовремя не остановиться. Пока тебе удается балансировать на грани. Ещё и совмещая это с довольно лёгким характером, толикой романтичности, умеренной эгоцентричностью, желанием помочь даже тем, кого не знаешь и порой любовью к зазнайству и спорам. В целом, ты не из тех, кто не найдет друзей в такой большой школе. Причем не только среди своих сокурсников или своего факультета. Четыре факультета может и участвуют в соревновании, даже не в одном, но всегда веселее вместе, если говорить о досуге после занятий или даже во время совместных проектов.

Но не только с положительным тебе пришлось столкнуться с первых же лет учёбы. Пока проживала дома, была ещё слишком мала, чтобы понять положение собственное в обществе. Не было тех, кто прямо нарывался на конфликт, высмеивая тот факт, что кому-то не дано знать собственного отца. Что он мог быть простым человеком, магглом или быть полукровкой. Ты ведь знаешь всё только со слов матушки, а ставить под сомнения её честность нет никаких причин лично у тебя. Чего не скажешь про остальных. Несколько таких ребят нашлось в Хогвартсе, но тебе удалось отстоять свою честь. Не с помощью магии, а с помощью хорошо подвешенного языка и умения держать 'удар' и эмоции. К тому же, тогда ты не осталась одна. К тебе пришли на помощь. Не зря говорят, что гриффиндорцы в основе своей обладают чрезмерным чувством справедливости. И неумением постоять в стороне, кстати, тоже. Тогда-то в твоей жизни и появился Дон. Гидеон Принц. Упрямый представитель львиного факультета, рядом с которым тебе спокойно, как никогда. Впрочем, это не спасало парня на протяжении всех лет от твоих ехидных замечаний, заумных фраз и даже нравоучений. Определенно, он тебе нравится, но даже в свои шестнадцать ты точно не знаешь, как ему это сказать правильно. Но, кажется, его совсем не тревожит пробел в твоём семейном древе. И твой характер тоже.

Сейчас ты на шестом курсе. У тебя прекрасные отметки, отлично сданные СОВ, а впереди ещё два курса, чтобы точно решить, что будет после учебы. За эти годы в стенах Хогвартса стала умнее, сдержаннее, но и любознательнее тоже.Своих обидчиков ты ставишь на место словами, но способна постоять за себя и с помощью заклинаний.  Многое уже узнала про школу и её тайны. Попала в команду по квиддичу, потому что таланты были заключены не только в учебниках. Обзавелась друзьями и даже влюбилась. Можно сказать, что к своим шестнадцати годам, ты вполне счастлива. Потому что не знаешь, что впереди ещё столько препятствий и испытаний на долю твоей семьи и тебя самой может выпасть. Но это и к лучшему. Жить нужно здесь и сейчас.


Волшебная палочка: грецкий орех и перо феникса, 10¾ дюйма
Боггарт: ведьма-банши
"Домашнее животное": феникс по имени Икарус. Фениксы из поколения в поколение выбирают род Дамблдоров, и сопровождают их. Их нельзя приручить, но они сами выбирают своего человека. Сильване повезло когда-то заслужить доверие этой гордой птицы.

Пробный пост

этого не должно было случиться.
это не должно было быть так.
только не в этот вечер.
не в этот праздник.
не в этой жизни.
только не с ними.

[indent] крик отчаяния зажат в ладонях. придавлен к губам со всей силой, пока на землю летят подарки и приготовленные блюда. те, которые мама попросила принести с собой. совсем немного. остальное, как обычно, приготовила сама. семейный ужин в светлый праздник рождества. теперь он окрашен мерзким заревом той самой метки. фирменный знак, который не спутать ни с чем. ты не знала, что увидишь его, когда трансгрессировала в отдалении от дома. мера предосторожности, что только что спасла тебя. понимаешь это, замерев в оцепенении, пока дом твоего детства вспыхивает подобно спичке. броситься бы туда, чтобы спасти. броситься бы туда, чтобы отстоять. всё исправить... нечего. ответ на самой поверхности, ведь так. ответ — два безжизненных тела недалеко от крыльца, рядом с которыми стоят они. палачи. убийцы. чёртовы пожиратели смерти, которые добрались раньше, чем ты. откуда они узнали? кто рассказал им? вопросы в голове подробно механизму в часах. шестерёнки крутятся, приходят, нехотя, в движение, но стрелки не сдвинутся с места. всё сломано. всё сломалось в тот миг, когда ты увидела, что они сделали. с твоими родителями.

[indent] инстинкт срабатывает сам. это где-то на подкорке уже вырезано. пять шагов назад, чтобы не увидели. не заметили. главное не ошибиться, не допустить оплошность. трансгрессировать нужно чётко. собрано. осознанно. только что сейчас твориться с тобой? хаос. пытаешься думать рационально, но сбиваешься даже на самом простом. ты должна была быть там... чтобы что? лечь рядом? ответ ведь так очевиден. только не с такой толпой. подобны шакалам. нападают стаей, а ты? ты не великая волшебница, чтобы противостоять толпе, нет. отец бы велел бежать. отец бы не позволил тебе... эти мысли вгрызаются в сердце и разум, пока ты пытаешься понять, куда совершила первый прыжок. прочь от того места, которое было домом, а теперь будет лишь пепелище. этот привкус осядет на твоих губах. прочь. туда, где можно сначала затеряться. пробежаться по улице. затеряться в толпе.
потому что сразу нельзя было к тому, о ком подумала изначально.
только на третий раз. когда сил уже не останется на четвёртый.

[indent] ремус не ждёт тебя. только не сегодня. говорили о том, что этот вечер проведёте порознь. ты не успела бы предупредить, даже если бы очень хотела, но твои мысли — стая ворон, что разлетелась в разные стороны. ни собрать обратно. ни подозвать назад. он смотрит с удивлением. ты мысленно просишь его помолчать, делая ещё один шаг.

[indent] цепляешься за ворот рубашки, словно это может спасти от падения. от той пропасти, над которой зависла. за секунду до. падение неизбежно, разве ты сама того не понимаешь? всё же так очевидно. неотвратимость происходящего. уже случившегося. смерть. её же нельзя исправить. ты знаешь это. видела собственными глазами, причем совсем недавно. уже тогда пропасть разверзлась под ногами, даже шага не нужно было ступить. теперь — очередная пощечина от самой судьбы. чем можно было так ее разгневать. впасть в немилость, чтобы вот так выгорать изнутри, одновременно замерзая. становясь ледяной глыбой. даже не статуей. просто куском бесформенным. утратившим смысл.

[indent] смотришь прямо на него, но ничего не можешь сказать. из горла вырывается сиплый вздох, пока где-то внутри ломаются рёбра под тяжестью боли. почти физические ощущения. не правда. но гораздо хуже. скажи. он просит сказать, но что можешь ты? рыдания подступают к горлу, а весь его облик размывается перед твоими большими глазами, что напоминают теперь бездонную пропасть. они чернеют от горя. наполняются слезами.
скажи... скажи... скажи...

[indent] одно слово. достаточно одного, чтобы люпин понял. чтобы больше этого не повторял. не пытался залезть прямо в душу. или мысли. плевать, главное не сейчас. ты не можешь ответить на все вопросы, которые читаются в отражении его глаз. — пожиратели. одно значение. без вариантов или отступления в сторону. проказа вашего мира, с которой столкнулись. которая расползлись по англии, снося всё на своём пути. ты знала, что так может случиться. чувствовала неясную тревогу. гнала ту от себя прочь, вместо того, чтобы прислушаться к сердцу. к интуиции. к чему угодно, но только бы избежать того, что случилось сегодня. что случилось четверть часа назад. едва ли дольше, по ощущениям. хватка ослабевает и ты опускаешься на пол, всё ещё чувствуя его поддержу, его присутствие рядом. ремус опустился вместе с тобой, не разжимая объятий. маленький остров надежды в океане боли, в котором вмиг захлебнулась. пошла прямо на дно. ты ничего не смогла сделать. ты ничего уже не сможешь сделать. даже вернуться на пепелище, чтобы достойно похоронить тех, кто был всем в твоей жизни. не сможешь вернуться, чтобы отомстить. те, кто пришёл этим вечером в отчий твой дом — чёрная река, бурный поток, сметающий на своём пути всё. а ты? ты лишь песчинка. как и те, кто утратил жизнь. гарри. родители. знакомые из ордена. случайные люди, которых не знала, но читала каждое утро их некрологи. надежды не осталось. пора это просто признать.

[indent] их больше нет. жестокая правда, что сжимает тисками. ты задыхаешься в крепких, но нежных объятиях. они узнали. они пришли. кто будет следующий? а может, они уже идут прямо сейчас, а их цель — ты?


Подпись автора

т ы   п о б е ж и ш ь   п о   п у т и   м о и х   з а х у д а л ы х   в е н ,  п р о с т о  с т а н е ш ь   в с е м
https://forumstatic.ru/files/001b/ee/37/69456.gif https://forumstatic.ru/files/001b/ee/37/73714.gif
say my name, say my name
LET ME ANGEL LIKE A RAIN
›  ›  ›  b u r n i n '  u p   i n   l o v e   a g a i n   ‹  ‹  ‹

0

2

[html]<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001c/11/e3/23933.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/001c/11/e3/82088.js?v=3"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    avatarGallery.init("https://forumstatic.ru/files/001c/8a/82/80426.txt?v=2");
});
</script>

<div id="workshop_wrap">
  <ul class="workshop-buttons">
    <li class="workshop-button checked" data-tab="malenia">заказать у <strong>malenia</strong></li>
    <li class="workshop-button" data-tab="ne-malenia">заказать <strong>jare</strong></li>
  </ul>
  <div class="workshop-container">
    <div class="workshop-slide active-slide" data-tab="malenia">
      <div class="workshop-section__wrapper workshop-header">
        <p>можете обращаться ко мне Маления или же просто Эл
и с моими работами можно ознакомиться в <a href="https://imagiart.ru/viewtopic.php?id=22172">данной теме</a></p>
        <h5 class="workshop-title">by MALENIA</h5>
      </div>
      <img src="https://forumstatic.ru/files/001c/91/5d/50713.png" class="workshop-image">
      <div class="workshop-section__wrapper workshop-main">
        <div class="workshop-box workshop-rules">
          <h5 class="workshop-title">правила</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-price">
          <h5 class="workshop-title">цены</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-pay">
          <h5 class="workshop-title">оплата</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-turn">
          <h5 class="workshop-title">очередь</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-process">
          <h5 class="workshop-title">процесс</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-works">
        <div class="workshop-box workshop-avatars">
          <h5 class="workshop-title">пример работ (аватары)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array1">
          </div>
        </div>
        <div class="workshop-box workshop-epigraph">
          <h5 class="workshop-title">пример работ (эпиграфы)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array2">
          </div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-template">
        <div class="workshop-box workshop-code">
          <h5 class="workshop-title">шаблон (выделить код)</h5>
          <pre>-что делаем: аватар одиночный, парный, эпиграф и тд
-что хотим видеть: можно скинуть примеры желаемых работ из этой темы
-что-нибудь для вдохновения предпочтения отдается музыке, оттуда же могу взять и текст
-всякое срочно или нет, анонимно или нет, и какие-то ваши отдельные пожелания, так же сюда можно скинуть желаемые исходники</pre>
        </div>
      </div>
      <img src="https://forumstatic.ru/files/001c/91/5d/50713.png" class="workshop-image">
    </div>

    <div class="workshop-slide" data-tab="ne-malenia">
      <div class="workshop-section__wrapper workshop-header">
        <p>Это место силы, где код и творчество сливаются воедино, чтобы соткать вашу цифровую душу. Забудьте о шаблонах — здесь вы сможете стать кем угодно: легендой, космическим странником или загадочным незнакомцем. Ваша новая легенда начинается здесь и сейчас.</p>
        <h5 class="workshop-title">by НЕ MALENIA</h5>
      </div>
      <img src="https://forumstatic.ru/files/001c/91/5d/50713.png" class="workshop-image">
      <div class="workshop-section__wrapper workshop-main">
        <div class="workshop-box workshop-rules">
          <h5 class="workshop-title">правила</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-price">
          <h5 class="workshop-title">цены</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-pay">
          <h5 class="workshop-title">оплата</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-turn">
          <h5 class="workshop-title">очередь</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
        <div class="workshop-box workshop-process">
          <h5 class="workshop-title">процесс</h5>
          <div class="workshop-content">Дизайн и верстка  индивидуальны для каждого форума. Я против, чтобы мои работы  перепродавали, выдирали из дизайна куски графики и/или кода и  использовали их дальше на своё усмотрение. Скриптовое наполнение  бездумно лучше тоже не копировать, потому что я ставлю и свои  собственные скрипты, а иногда их пишут другие люди специально для своего форума. Но обо всем можно договориться. Если мне  напишут и предупредят, что хотят использовать дизайн  повторно/перекрасить его - я против не буду. Словами через рот говорить  не страшно, чесслово. А еще можно просто купить мой код в пользование и  делать с ним что угодно, хоть на ушах с ним стойте х)
HTML-оформления индивиуальны для заказчика/форума. Они ваши целиком и полностью, можете менять в них что угодно, использовать до окончания столетия и даже  перепродавать пробовать.
Бесплатные HTML-шаблоны и скрипты для всех. Можно перетаскивать и выкладывать где угодно, только  авторство положите рядышком, пожалуйста. Можно менять как захочется и  ставить куда угодно.
PSD дать не могу физически. Его тупо нет. Делаю в других редакторах, но если очень надо - могу дать ссылку на файлы в них.</div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-works">
        <div class="workshop-box workshop-avatars">
          <h5 class="workshop-title">пример работ (аватары)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array3">
          </div>
        </div>
        <div class="workshop-box workshop-epigraph">
          <h5 class="workshop-title">пример работ (эпиграфы)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array4">
          </div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-template">
        <div class="workshop-box workshop-code">
          <h5 class="workshop-title">шаблон (выделить код)</h5>
          <pre>-что делаем: аватар одиночный, парный, эпиграф и тд
-что хотим видеть: просто штоб контент отличанлся
-что-нибудь для вдохновения предпочтения отдается музыке, оттуда же могу взять и текст
-всякое срочно или нет, анонимно или нет, и какие-то ваши отдельные пожелания, так же сюда можно скинуть желаемые исходники</pre>
        </div>
      </div>
      <img src="https://forumstatic.ru/files/001c/91/5d/50713.png" class="workshop-image">
    </div>
  </div>
</div>[/html]

Подпись автора

т ы   п о б е ж и ш ь   п о   п у т и   м о и х   з а х у д а л ы х   в е н ,  п р о с т о  с т а н е ш ь   в с е м
https://forumstatic.ru/files/001b/ee/37/69456.gif https://forumstatic.ru/files/001b/ee/37/73714.gif
say my name, say my name
LET ME ANGEL LIKE A RAIN
›  ›  ›  b u r n i n '  u p   i n   l o v e   a g a i n   ‹  ‹  ‹

0

3

Код:
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001c/11/e3/23933.css" />
<script type="text/javascript" src="https://forumstatic.ru/files/001c/11/e3/82088.js?v=3"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    avatarGallery.init("https://forumstatic.ru/files/001c/8a/82/80426.txt?v=3");
});
</script>

<div id="workshop_wrap">
  <ul class="workshop-buttons">
    <li class="workshop-button checked" data-tab="malenia">заказать у <strong>malenia</strong></li>
    <li class="workshop-button" data-tab="ne-malenia">заказать <strong>jare</strong></li>
  </ul>
  <div class="workshop-container">
    <div class="workshop-slide active-slide" data-tab="malenia">
      <div class="workshop-section__wrapper workshop-header">
        <p>можете обращаться ко мне Маления или же просто Эл и с моими работами можно ознакомиться в <a href="https://imagiart.ru/viewtopic.php?id=22172">данной теме</a></p>
        <h5 class="workshop-title">by MALENIA</h5>
      </div>
      <img src="https://forumstatic.ru/files/001c/8a/82/27198.png" class="workshop-image">
      <div class="workshop-section__wrapper workshop-main">
        <div class="workshop-box workshop-rules">
          <h5 class="workshop-title">правила</h5>
          <div class="workshop-content">» работаю и с реальными внешностями, и с рисованными. но прошу учесть, что последние фигурируют у меня только в стиле минимализма. глянец, увы, никак;
<br>» в настоящий момент стоп-лист внешностей/персонажей, с которыми не работаю — отсутствует;
<br>» в шапке темы присутствует очередность, она всегда актуальная, ориентируйтесь на неё при заказе. чем больше там людей, тем дольше могу отдавать заказы [срочные отдаются вне очереди];
<br>» ограничение по числу графики в одном заказе — отсутствует [но чем больше вы закажете, тем дольше буду работать по заказу, прошу это учесть];
<br>» стандартный срок выполнения одного заказа — от 7 до 14 дней. срочный — до 4 дней;
<br>» как графика будет готова, я вышлю её на одобрение. на этом этапе возможны только небольшие правки. если вы просите заменить исходник или существенную часть графики - это будет считаться новой работой, и расчёт стоимости будет произведён отдельно;
<br>» у вас есть полное право отказаться от итоговой работы, не забирать и не оплачивать её. в этом случае я выставлю её на продажу в теме или отпущу в свободный доступ. тут оставляю за собой право выбора;
<br>» тот же принцип будет действовать и с графикой, которую не оплатили в течение 3 дней, с момента, как заказчик ответил мне, что его всё устраивает в итоговой работе.</div>
        </div>
        <div class="workshop-box workshop-price">
          <h5 class="workshop-title">цены</h5>
          <div class="workshop-content">» аватар глянец — 160 руб.
<br>» аватар минимализм — 130 руб. [с гиф +20 руб.]
<br>» эпиграф глянец — 350 руб. [до двух человек. каждый следующий человек +50 руб.]
<br>» эпиграф минимализм — 250 руб. [до двух человек. каждый следующий человек +50 руб.]
<br>» оформление для анкеты минимализм — 150 руб.
<br>срочный заказ — х2 ко всем позициям</div>
        </div>
        <div class="workshop-box workshop-pay">
          <h5 class="workshop-title">оплата</h5>
          <div class="workshop-content">оплату принимаю:
<br>» карта Яндекс
<br>» карта Т-банк
<br>» boosty</div>
        </div>
        <div class="workshop-box workshop-turn">
          <h5 class="workshop-title">очередь</h5>
          <div class="workshop-content">1. анонимный
<br>2.
<br>3.
<br>4.
<br>5. </div>
        </div>
        <div class="workshop-box workshop-process">
          <h5 class="workshop-title">процесс</h5>
          <div class="workshop-content">постучать в лс — получить подтверждение записи в очередь — прислать заполненный шаблон в лс — графика на одобрение — оплата — отдаю ваш заказ — выкладываю в теме</div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-works">
        <div class="workshop-box workshop-avatars">
          <h5 class="workshop-title">пример работ (аватары)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array1">
          </div>
        </div>
        <div class="workshop-box workshop-epigraph">
          <h5 class="workshop-title">пример работ (эпиграфы)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array2">
          </div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-template">
        <div class="workshop-box workshop-code">
          <h5 class="workshop-title">шаблон (выделить код)</h5>
          <pre>[b]статус заказа:[/b] анонимный или нет, срочный или стандарт;
[b]что делаем[/b]: вид работы и стиль, количество. для эпиков можно указать размер;
[b]кого делаем[/b]: имя внешности на английском [для азиатских внешностей обязательны примеры исходников];
[b]вдохновение[/b]: музыка - обязательна, хотя бы 1 песня. можно рассказать немного о персонаже/персонажах;
[b]иное[/b]: всё что не вошло в другие пункты. пожелания по цветам или иные детали, нежелательные для работы исходники тоже тут можно указать;</pre>
        </div>
      </div>
      <img src="https://forumstatic.ru/files/001c/8a/82/27198.png" class="workshop-image">
    </div>
    <div class="workshop-slide" data-tab="ne-malenia">
      <div class="workshop-section__wrapper workshop-header">
        <p>Оставь одежду, всяк сюда входящий! 
<br>Здравствуй, дорогой всяк! Под одеждой, разумеется, имею в виду графику. Переодену, может быть - переобую, только дай подсказку, что ты хочешь видеть. Не профи, не дизайнер - любитель, для которого фш это хобби. Оставь пожелания, чего ты хочешь, по шаблону - и мы обязательно договоримся! </p>
        <h5 class="workshop-title">by JARE</h5>
      </div>
      <img src="https://forumstatic.ru/files/001c/8a/82/49272.png" class="workshop-image">
      <div class="workshop-section__wrapper workshop-main">
        <div class="workshop-box workshop-rules">
          <h5 class="workshop-title">правила</h5>
          <div class="workshop-content">❦︎ работаю с рисованными и реальными внешностями в стиле минимализма
<br>❦︎ стоп-лист внешностей или персонажей для работы отсутствует, беру всех
<br>❦︎ опирайтесь на очерёдность в шапке темы. чем больше очередь, тем дольше ожидать готовый заказ
<br>❦︎ ограничение по числу графики в одном заказе — не более 6 работ [комплект считается как 1 элемент]
<br>❦︎ стандартный срок выполнения одного заказа — от 5 до 10 дней. срочный — до 3 дней
<br>❦︎ по готовности графики — высылаю на одобрение. до оплаты возможны небольшие правки [изменить шрифт, поправить цветовые акценты]. если нужно изменить исходник либо полностью цветовую палитру, то это будет считаться новой работой за отдельную плату
<br>❦︎ вы можете отказаться от работы до двух правок, после двух правок — отказ от работы с моей стороны, работа выставляется на продажу или в свободный доступ
<br>❦︎ отказ от графики после согласования [до оплаты] оставляет за мной право распоряжаться работой по своему усмотрению
<br>❦︎ графика, которую не оплатили в течение 2 дней [включая день согласования], также остается за мной</div>
        </div>
        <div class="workshop-box workshop-price">
          <h5 class="workshop-title">цены</h5>
          <div class="workshop-content"> ❦︎ аватар [статика] — 100 руб. [более 3шт. в одном заказе — 80 руб. за шт.]
<br>❦︎ подпись [статика] — 120 руб.
<br>❦︎ комплект [аватар+подпись] — 200 руб.
<br>❦︎ эпиграф [статика] — 200 руб.
<br>❦︎ оформление для анкеты [небольшая работа] — 120 руб.
<br>❦︎ оформление для анкеты [большая работа] — 170 руб.
<br>❦︎ срочность — х2 ко всем позициям</div>
        </div>
        <div class="workshop-box workshop-pay">
          <h5 class="workshop-title">оплата</h5>
          <div class="workshop-content">карта Яндекс и бусти</div>
        </div>
        <div class="workshop-box workshop-turn">
          <h5 class="workshop-title">очередь</h5>
          <div class="workshop-content">❦︎ 1.
<br>❦︎ 2.
<br>❦︎ 3.
<br>❦︎ 4.</div>
        </div>
        <div class="workshop-box workshop-process">
          <h5 class="workshop-title">процесс</h5>
          <div class="workshop-content">сообщение в лс — подтверждение в записи — заполненный шаблон заказа в лс — для азиатских и рисованных внешностей одобрение исходников [если не оговорено иное] — одобрение — оплата — передача заказа — публикация в теме по согласованию</div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-works">
        <div class="workshop-box workshop-avatars">
          <h5 class="workshop-title">пример работ (аватары)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array3">
          </div>
        </div>
        <div class="workshop-box workshop-epigraph">
          <h5 class="workshop-title">пример работ (эпиграфы)</h5>
          <div class="workshop-content works-content avatars-preview" data-array="array4">
          </div>
        </div>
      </div>
      <div class="workshop-section__wrapper workshop-template">
        <div class="workshop-box workshop-code">
          <h5 class="workshop-title">шаблон (выделить код)</h5>
          <pre>[b]статус заказа:[/b] анонимный или нет, срочный или стандарт
[b]что делаем[/b]: вид работы. для эпиков и подписи нужно указать размер
[b]кого делаем[/b]: имя внешности на английском [для азиатских и рисованных внешностей обязательны примеры исходников]
[b]цветовая палитра[/b]: в тон дизайна форума — ссылка на форум. или картинку с in color balance/pinterest 
[b]вдохновение[/b]: музыка/нужная цитата — обязательна, хотя бы 1 песня. можно рассказать немного о персонаже/персонажах
[b]иное[/b]: всё что не вошло в другие пункты. нежелательные для работы исходники тоже можно указать здесь</pre>
        </div>
      </div>
      <img src="https://forumstatic.ru/files/001c/8a/82/49272.png" class="workshop-image">
    </div>
  </div>
</div>
Подпись автора

т ы   п о б е ж и ш ь   п о   п у т и   м о и х   з а х у д а л ы х   в е н ,  п р о с т о  с т а н е ш ь   в с е м
https://forumstatic.ru/files/001b/ee/37/69456.gif https://forumstatic.ru/files/001b/ee/37/73714.gif
say my name, say my name
LET ME ANGEL LIKE A RAIN
›  ›  ›  b u r n i n '  u p   i n   l o v e   a g a i n   ‹  ‹  ‹

0

4

[html]<div class="chat-wrapper">
    <!-- ШАПКА-->
    <div class="chat-head">
        <div class="head-avatar">
            <div class="avatar-circle">
                <div class="avatar-fallback">👤</div>
                <!-- <img src="ссылка_на_аватар"> при желании -->
            </div>
        </div>
        <div class="head-info">
            <div class="name-row">
                <span class="name-surname">name surname</span>
                <span class="nickname">/никнейм</span>
            </div>
            <div class="time-badge">
                <span>yesterday</span>
                <span class="head-icon">⌘ + C</span>
            </div>
        </div>
    </div>

    <!-- ОБЛАСТЬ СООБЩЕНИЙ-->
    <div class="messages-area">
        <div class="date-divider">
            <span class="date-chip">yesterday</span>
        </div>

        <!-- сообщение 1: длинный текст -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight<br>
                if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:15</span>
                <span>📖 прочитано</span>
            </div>
        </div>

        <!-- голосовое сообщение -->
        <div class="message-block">
            <div class="voice-message">
                <span class="voice-icon">🎤</span>
                <div class="voice-wave">
                    <span></span><span></span><span></span><span></span>
                </div>
                <span class="voice-duration">0:24</span>
                <span style="font-size: 13px; color:#b0b8d4;">voice message</span>
            </div>
            <div class="message-meta them-meta">
                <span>00:18</span>
                <span>🎧 слушать</span>
            </div>
        </div>

        <!-- i'd give my all... -->
        <div class="message-block">
            <div class="message-them">
                i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:21</span>
            </div>
        </div>

        <!-- короткое сообщение "i am thinking of you..." -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight
            </div>
            <div class="message-meta them-meta">
                <span>00:27</span>
            </div>
        </div>

        <!-- повтор основного блока -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight<br>
                if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:32</span>
                <span>📖 прочитано</span>
            </div>
        </div>

        <!-- ИНДИКАТОР НЕПРОЧИТАННЫХ-->
        <div class="unread-badge">
            <span>💬</span> 3 непрочитанных сообщения
        </div>

        <!-- сообщение после индикатора -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight
            </div>
            <div class="message-meta them-meta">
                <span>00:38</span>
            </div>
        </div>

        <!-- голосовое -->
        <div class="message-block">
            <div class="voice-message">
                <span class="voice-icon">🎙️</span>
                <div class="voice-wave">
                    <span></span><span></span><span></span><span></span>
                </div>
                <span class="voice-duration">0:12</span>
                <span style="font-size: 13px; color:#b0b8d4;">voice message</span>
            </div>
            <div class="message-meta them-meta">
                <span>00:41</span>
            </div>
        </div>

        <!-- финальное сообщение -->
        <div class="message-block">
            <div class="message-them">
                i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:44</span>
                <span>❤️</span>
            </div>
        </div>
    </div>

    <!--ПОЛЕ ВВОДА -->
    <div class="input-panel">
        <div class="mock-input">
            <span class="placeholder-icon">✏️</span>
            <span>Написать сообщение...</span>
            <span class="fake-cursor"></span>
        </div>
        <div class="mock-send">
            📎
        </div>
    </div>
</div>

<style>

/*Мессенджер*/
        .chat-wrapper {
            max-width: 540px;
            width: 100%;
            background: #0e1017;
            border-radius: 28px;
            box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
            overflow: hidden;
        }

        /* ШАПКА*/
        .chat-head {
            padding: 18px 20px 14px 20px;
            background: #0e1017;
            border-bottom: 1px solid #20232c;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .head-avatar {
            flex-shrink: 0;
        }

        .avatar-circle {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #2e6be0, #1548a8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .avatar-fallback {
            font-size: 22px;
            font-weight: 500;
            color: white;
        }

        .head-info {
            flex: 1;
        }

        .name-row {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px;
            row-gap: 4px;
        }

        .name-surname {
            font-weight: 700;
            font-size: 17px;
            color: #f0f2f8;
            letter-spacing: -0.2px;
        }

        .nickname {
            font-size: 13px;
            color: #8e92a8;
            font-weight: 400;
        }

        .time-badge {
            font-size: 12px;
            color: #7e829c;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .head-icon {
            background: #20232c;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 12px;
            color: #cbd0e0;
            font-family: monospace;
            letter-spacing: 0.3px;
        }

        /* область сообщений*/
        .messages-area {
            padding: 20px 18px 16px 18px;
            max-height: 560px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 18px;
            background: #0e1017;
        }

        .messages-area::-webkit-scrollbar {
            width: 4px;
        }
        .messages-area::-webkit-scrollbar-track {
            background: #1e212a;
            border-radius: 10px;
        }
        .messages-area::-webkit-scrollbar-thumb {
            background: #3e4250;
            border-radius: 10px;
        }

        /* пузырьки сообщений */
        .message-block {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .message-them {
            align-self: flex-start;
            max-width: 88%;
            background: #1e212a;
            border-radius: 22px;
            border-bottom-left-radius: 5px;
            padding: 12px 16px;
            color: #eef2fc;
            font-size: 15px;
            line-height: 1.45;
            word-break: break-word;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        /* голосовое сообщение */
        .voice-message {
            background: #1a1d26;
            border-radius: 22px;
            border-bottom-left-radius: 5px;
            padding: 10px 16px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            max-width: 88%;
            align-self: flex-start;
        }

        .voice-icon {
            font-size: 20px;
        }

        .voice-wave {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .voice-wave span {
            width: 3px;
            height: 12px;
            background: #6096fd;
            border-radius: 2px;
            display: inline-block;
        }
        .voice-wave span:nth-child(2) { height: 18px; }
        .voice-wave span:nth-child(3) { height: 10px; }
        .voice-wave span:nth-child(4) { height: 16px; }

        .voice-duration {
            font-size: 13px;
            color: #b9c2dc;
            font-weight: 450;
        }

        /* метаинформация (время) */
        .message-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            color: #6f748c;
            margin-left: 12px;
            margin-top: 4px;
        }

        .them-meta {
            justify-content: flex-start;
        }

        /* непрочитанные */
        .unread-badge {
            background: #2c6ef0;
            border-radius: 40px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            margin-top: 8px;
            margin-bottom: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .date-divider {
            text-align: center;
            margin: 8px 0 6px;
        }
        .date-chip {
            background: #1b1e27;
            display: inline-block;
            padding: 5px 16px;
            border-radius: 40px;
            font-size: 11px;
            font-weight: 500;
            color: #9ea3bb;
            letter-spacing: 0.2px;
        }

        /*поле ввода*/
        .input-panel {
            background: #0b0d12;
            border-top: 1px solid #22252f;
            padding: 14px 18px 18px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .mock-input {
            flex: 1;
            background: #1a1d26;
            border: 1px solid #2c2f3a;
            border-radius: 28px;
            padding: 10px 18px;
            font-size: 14px;
            color: #b9c2dc;
            font-family: inherit;
            outline: none;
            cursor: default;
            user-select: none;
            white-space: nowrap;
            overflow-x: auto;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mock-input span {
            color: #6f748c;
            letter-spacing: 0.2px;
        }

        .placeholder-icon {
            font-size: 18px;
            opacity: 0.6;
        }

        .mock-send {
            background: #20232c;
            border-radius: 40px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #8e92a8;
            cursor: default;
        }
        .small-hint {
            font-size: 9px;
            color: #4f5468;
            text-align: right;
            width: 100%;
            margin-top: 6px;
            user-select: none;
        }

        .mock-input .fake-cursor {
            width: 1px;
            height: 16px;
            background: #5f6a88;
            display: inline-block;
            margin-left: 2px;
            animation: blinkFake 1s step-end infinite;
        }

        @keyframes blinkFake {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* иконка микрофона / скрепки (визуально) */
        .attach-icon {
            font-size: 22px;
            color: #5a607c;
            cursor: default;
        }
</style>
[/html]

Код:
[html]<div class="chat-wrapper">
    <!-- ШАПКА-->
    <div class="chat-head">
        <div class="head-avatar">
            <div class="avatar-circle">
                <div class="avatar-fallback">👤</div>
                <!-- <img src="ссылка_на_аватар"> при желании -->
            </div>
        </div>
        <div class="head-info">
            <div class="name-row">
                <span class="name-surname">name surname</span>
                <span class="nickname">/никнейм</span>
            </div>
            <div class="time-badge">
                <span>yesterday</span>
                <span class="head-icon">⌘ + C</span>
            </div>
        </div>
    </div>

    <!-- ОБЛАСТЬ СООБЩЕНИЙ-->
    <div class="messages-area">
        <div class="date-divider">
            <span class="date-chip">yesterday</span>
        </div>

        <!-- сообщение 1: длинный текст -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight<br>
                if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:15</span>
                <span>📖 прочитано</span>
            </div>
        </div>

        <!-- голосовое сообщение -->
        <div class="message-block">
            <div class="voice-message">
                <span class="voice-icon">🎤</span>
                <div class="voice-wave">
                    <span></span><span></span><span></span><span></span>
                </div>
                <span class="voice-duration">0:24</span>
                <span style="font-size: 13px; color:#b0b8d4;">voice message</span>
            </div>
            <div class="message-meta them-meta">
                <span>00:18</span>
                <span>🎧 слушать</span>
            </div>
        </div>

        <!-- i'd give my all... -->
        <div class="message-block">
            <div class="message-them">
                i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:21</span>
            </div>
        </div>

        <!-- короткое сообщение "i am thinking of you..." -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight
            </div>
            <div class="message-meta them-meta">
                <span>00:27</span>
            </div>
        </div>

        <!-- повтор основного блока -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight<br>
                if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:32</span>
                <span>📖 прочитано</span>
            </div>
        </div>

        <!-- ИНДИКАТОР НЕПРОЧИТАННЫХ-->
        <div class="unread-badge">
            <span>💬</span> 3 непрочитанных сообщения
        </div>

        <!-- сообщение после индикатора -->
        <div class="message-block">
            <div class="message-them">
                i am thinking of you in my sleepless solitude tonight
            </div>
            <div class="message-meta them-meta">
                <span>00:38</span>
            </div>
        </div>

        <!-- голосовое -->
        <div class="message-block">
            <div class="voice-message">
                <span class="voice-icon">🎙️</span>
                <div class="voice-wave">
                    <span></span><span></span><span></span><span></span>
                </div>
                <span class="voice-duration">0:12</span>
                <span style="font-size: 13px; color:#b0b8d4;">voice message</span>
            </div>
            <div class="message-meta them-meta">
                <span>00:41</span>
            </div>
        </div>

        <!-- финальное сообщение -->
        <div class="message-block">
            <div class="message-them">
                i'd give my all to have just one more night with you.
            </div>
            <div class="message-meta them-meta">
                <span>00:44</span>
                <span>❤️</span>
            </div>
        </div>
    </div>

    <!--ПОЛЕ ВВОДА -->
    <div class="input-panel">
        <div class="mock-input">
            <span class="placeholder-icon">✏️</span>
            <span>Написать сообщение...</span>
            <span class="fake-cursor"></span>
        </div>
        <div class="mock-send">
            📎
        </div>
    </div>
</div>

<style>

/*Мессенджер*/
        .chat-wrapper {
            max-width: 540px;
            width: 100%;
            background: #0e1017;
            border-radius: 28px;
            box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
            overflow: hidden;
        }

        /* ШАПКА*/
        .chat-head {
            padding: 18px 20px 14px 20px;
            background: #0e1017;
            border-bottom: 1px solid #20232c;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .head-avatar {
            flex-shrink: 0;
        }

        .avatar-circle {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #2e6be0, #1548a8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .avatar-fallback {
            font-size: 22px;
            font-weight: 500;
            color: white;
        }

        .head-info {
            flex: 1;
        }

        .name-row {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px;
            row-gap: 4px;
        }

        .name-surname {
            font-weight: 700;
            font-size: 17px;
            color: #f0f2f8;
            letter-spacing: -0.2px;
        }

        .nickname {
            font-size: 13px;
            color: #8e92a8;
            font-weight: 400;
        }

        .time-badge {
            font-size: 12px;
            color: #7e829c;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .head-icon {
            background: #20232c;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 12px;
            color: #cbd0e0;
            font-family: monospace;
            letter-spacing: 0.3px;
        }

        /* область сообщений*/
        .messages-area {
            padding: 20px 18px 16px 18px;
            max-height: 560px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 18px;
            background: #0e1017;
        }

        .messages-area::-webkit-scrollbar {
            width: 4px;
        }
        .messages-area::-webkit-scrollbar-track {
            background: #1e212a;
            border-radius: 10px;
        }
        .messages-area::-webkit-scrollbar-thumb {
            background: #3e4250;
            border-radius: 10px;
        }

        /* пузырьки сообщений */
        .message-block {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .message-them {
            align-self: flex-start;
            max-width: 88%;
            background: #1e212a;
            border-radius: 22px;
            border-bottom-left-radius: 5px;
            padding: 12px 16px;
            color: #eef2fc;
            font-size: 15px;
            line-height: 1.45;
            word-break: break-word;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        /* голосовое сообщение */
        .voice-message {
            background: #1a1d26;
            border-radius: 22px;
            border-bottom-left-radius: 5px;
            padding: 10px 16px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            max-width: 88%;
            align-self: flex-start;
        }

        .voice-icon {
            font-size: 20px;
        }

        .voice-wave {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .voice-wave span {
            width: 3px;
            height: 12px;
            background: #6096fd;
            border-radius: 2px;
            display: inline-block;
        }
        .voice-wave span:nth-child(2) { height: 18px; }
        .voice-wave span:nth-child(3) { height: 10px; }
        .voice-wave span:nth-child(4) { height: 16px; }

        .voice-duration {
            font-size: 13px;
            color: #b9c2dc;
            font-weight: 450;
        }

        /* метаинформация (время) */
        .message-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            color: #6f748c;
            margin-left: 12px;
            margin-top: 4px;
        }

        .them-meta {
            justify-content: flex-start;
        }

        /* непрочитанные */
        .unread-badge {
            background: #2c6ef0;
            border-radius: 40px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            margin-top: 8px;
            margin-bottom: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .date-divider {
            text-align: center;
            margin: 8px 0 6px;
        }
        .date-chip {
            background: #1b1e27;
            display: inline-block;
            padding: 5px 16px;
            border-radius: 40px;
            font-size: 11px;
            font-weight: 500;
            color: #9ea3bb;
            letter-spacing: 0.2px;
        }

        /*поле ввода*/
        .input-panel {
            background: #0b0d12;
            border-top: 1px solid #22252f;
            padding: 14px 18px 18px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .mock-input {
            flex: 1;
            background: #1a1d26;
            border: 1px solid #2c2f3a;
            border-radius: 28px;
            padding: 10px 18px;
            font-size: 14px;
            color: #b9c2dc;
            font-family: inherit;
            outline: none;
            cursor: default;
            user-select: none;
            white-space: nowrap;
            overflow-x: auto;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mock-input span {
            color: #6f748c;
            letter-spacing: 0.2px;
        }

        .placeholder-icon {
            font-size: 18px;
            opacity: 0.6;
        }

        .mock-send {
            background: #20232c;
            border-radius: 40px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #8e92a8;
            cursor: default;
        }
        .small-hint {
            font-size: 9px;
            color: #4f5468;
            text-align: right;
            width: 100%;
            margin-top: 6px;
            user-select: none;
        }

        .mock-input .fake-cursor {
            width: 1px;
            height: 16px;
            background: #5f6a88;
            display: inline-block;
            margin-left: 2px;
            animation: blinkFake 1s step-end infinite;
        }

        @keyframes blinkFake {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* иконка микрофона / скрепки (визуально) */
        .attach-icon {
            font-size: 22px;
            color: #5a607c;
            cursor: default;
        }
</style>
[/html]

0

5

[html]<div class="insta-app">

    <!-- навигация -->
    <div class="insta-nav">
        <div class="insta-logo">Instagram</div>
        <div class="insta-nav-icons">
            <span>🏠</span>
            <span>👤</span>
        </div>
    </div>

    <!-- переключатель-->
    <div class="insta-tabs">
        <div class="insta-tab insta-tab-active">Лента</div>
        <div class="insta-tab">Профиль</div>
    </div>

    <!--ШАПКА ПРОФИЛЯ-->
    <div class="insta-profile">
        <div class="insta-avatar">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="avatar">
        </div>
        <div class="insta-info">
            <div class="insta-username">alexandra_inst</div>
            <div class="insta-stats">
                <div><span>24</span> публикаций</div>
                <div><span>1.8K</span> подписчиков</div>
                <div><span>312</span> подписок</div>
            </div>
            <div class="insta-bio">
                <strong>Alexandra</strong> ✨ Фотограф | путешествия<br>
                📍 Москва / Мир в кадре
            </div>
        </div>
    </div>

    <!-- форма создания поста -->
    <div class="insta-create">
        <div class="insta-create-title">
            <span>➕</span> Создать пост
        </div>
        <div class="insta-create-form">
            <div class="insta-fake-file">
                Выбрать фото
            </div>
            <div class="insta-fake-textarea">
                Напишите подпись к фото...
            </div>
            <button class="insta-publish-btn">Опубликовать</button>
        </div>
    </div>

    <!-- ЛЕНТА ПОСТОВ -->
    <div class="insta-feed">
        <!-- пост 1 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/women/68.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">alexandra_inst</div>
                    <div class="insta-post-location">Париж, Франция</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/104/600/500" alt="post">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 1 284 отметки</div>
            <div class="insta-post-caption"><strong>alexandra_inst</strong> Магия Эйфелевой башни ✨</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>paris_lover</strong> Красота невероятная!</div>
                    <div class="insta-single-comment"><strong>artem_travels</strong> Мечтаю там побывать</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>

        <!-- пост 2 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">nikolai_photo</div>
                    <div class="insta-post-location">Алтай, Россия</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/15/600/500" alt="nature">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 945 отметок</div>
            <div class="insta-post-caption"><strong>nikolai_photo</strong> Горы зовут настоящих путешественников 🏔️</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>hiking_dreams</strong> Невероятный кадр!</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>

        <!-- пост 3 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">coffeebooksoul</div>
                    <div class="insta-post-location">Уютное кафе ☕</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/20/600/500" alt="coffee">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 532 отметки</div>
            <div class="insta-post-caption"><strong>coffeebooksoul</strong> Кофе, книга и дождливый день 📖☕</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>readers_club</strong> Атмосфера волшебства!</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <!-- СЕТКА ПОСТОВ ПРОФИЛЯ -->
    <div class="insta-profile-grid">
        <div class="insta-grid-title">
            📷 Публикации
        </div>
        <div class="insta-grid">
            <div class="insta-grid-item"><img src="https://picsum.photos/id/1015/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/20/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/104/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/15/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/169/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/155/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/96/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/29/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/42/200/200" alt="grid"></div>
        </div>
    </div>

</div>

<style>
.insta-app {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            background-color: #fafafa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #262626;
            min-height: 100vh;
        }

        .insta-nav {
            background: white;
            border-bottom: 1px solid #dbdbdb;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .insta-logo {
            font-size: 24px;
            font-weight: 600;
            background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.5px;
        }
        .insta-nav-icons {
            display: flex;
            gap: 22px;
            font-size: 24px;
        }
        .insta-nav-icons span {
            cursor: default;
        }

        .insta-profile {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 16px;
            padding: 20px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }
        .insta-avatar img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e0e0e0;
            background: #efefef;
        }
        .insta-info {
            flex: 1;
        }
        .insta-username {
            font-size: 24px;
            font-weight: 300;
            margin-bottom: 6px;
        }
        .insta-stats {
            display: flex;
            gap: 24px;
            margin: 10px 0;
            font-size: 13px;
        }
        .insta-stats span {
            font-weight: 700;
            margin-right: 4px;
        }
        .insta-bio {
            font-size: 13px;
        }
        .insta-bio strong {
            font-weight: 600;
        }

        .insta-create {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 0 16px 16px 16px;
            padding: 14px 16px;
        }
        .insta-create-title {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .insta-create-title span {
            font-size: 20px;
        }
        .insta-create-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .insta-fake-file {
            background: #f2f2f2;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            border: 1px dashed #bdbdbd;
            font-size: 13px;
            color: #3b3b3b;
        }
        .insta-fake-textarea {
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            padding: 12px;
            font-size: 13px;
            background: white;
            color: #8e8e8e;
            min-height: 64px;
        }
        .insta-publish-btn {
            background: #0095f6;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 13px;
            align-self: flex-end;
            cursor: default;
        }

        .insta-feed {
            margin: 0 16px 20px 16px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .insta-post {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            overflow: hidden;
        }
        .insta-post-header {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            gap: 10px;
        }
        .insta-post-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            background: #dbdbdb;
        }
        .insta-post-user {
            font-weight: 600;
            font-size: 13px;
        }
        .insta-post-location {
            font-size: 10px;
            color: #8e8e8e;
        }
        .insta-post-img {
            width: 100%;
            max-height: 450px;
            object-fit: cover;
            background: #efefef;
            display: block;
        }
        .insta-post-actions {
            display: flex;
            gap: 18px;
            padding: 8px 12px;
            font-size: 22px;
        }
        .insta-post-likes {
            font-weight: 600;
            font-size: 13px;
            padding: 0 12px 6px;
        }
        .insta-post-caption {
            padding: 0 12px 10px;
            font-size: 13px;
        }
        .insta-post-caption strong {
            margin-right: 6px;
        }
        .insta-comments {
            padding: 6px 12px 12px;
            border-top: 1px solid #efefef;
        }
        .insta-comment-list {
            margin-bottom: 8px;
            font-size: 12px;
        }
        .insta-single-comment {
            margin: 4px 0;
        }
        .insta-comment-input {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .insta-comment-input input {
            flex: 1;
            border: none;
            padding: 8px 0;
            font-size: 12px;
            background: transparent;
            outline: none;
        }
        .insta-comment-input button {
            background: none;
            border: none;
            color: #0095f6;
            font-weight: 600;
            font-size: 12px;
            cursor: default;
        }
        .insta-profile-grid {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 0 16px 20px 16px;
            padding: 16px;
        }
        .insta-grid-title {
            font-weight: 600;
            margin-bottom: 14px;
            font-size: 15px;
            border-bottom: 1px solid #efefef;
            padding-bottom: 8px;
        }
        .insta-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        .insta-grid-item {
            aspect-ratio: 1 / 1;
            background: #efefef;
            border-radius: 4px;
            overflow: hidden;
        }
        .insta-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .insta-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 12px 16px 8px;
        }
        .insta-tab {
            background: none;
            border: none;
            font-weight: 600;
            font-size: 15px;
            padding: 6px 20px;
            border-radius: 30px;
            color: #8e8e8e;
            cursor: default;
        }
        .insta-tab-active {
            background: #0095f6;
            color: white;
        }

       .insta-app  hr {
            border: none;
            border-top: 1px solid #dbdbdb;
            margin: 8px 16px;
        }
</style>

[/html]

Код:
[html]<div class="insta-app">

    <!-- навигация -->
    <div class="insta-nav">
        <div class="insta-logo">Instagram</div>
        <div class="insta-nav-icons">
            <span>🏠</span>
            <span>👤</span>
        </div>
    </div>

    <!-- переключатель-->
    <div class="insta-tabs">
        <div class="insta-tab insta-tab-active">Лента</div>
        <div class="insta-tab">Профиль</div>
    </div>

    <!--ШАПКА ПРОФИЛЯ-->
    <div class="insta-profile">
        <div class="insta-avatar">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="avatar">
        </div>
        <div class="insta-info">
            <div class="insta-username">alexandra_inst</div>
            <div class="insta-stats">
                <div><span>24</span> публикаций</div>
                <div><span>1.8K</span> подписчиков</div>
                <div><span>312</span> подписок</div>
            </div>
            <div class="insta-bio">
                <strong>Alexandra</strong> ✨ Фотограф | путешествия<br>
                📍 Москва / Мир в кадре
            </div>
        </div>
    </div>

    <!-- форма создания поста -->
    <div class="insta-create">
        <div class="insta-create-title">
            <span>➕</span> Создать пост
        </div>
        <div class="insta-create-form">
            <div class="insta-fake-file">
                Выбрать фото
            </div>
            <div class="insta-fake-textarea">
                Напишите подпись к фото...
            </div>
            <button class="insta-publish-btn">Опубликовать</button>
        </div>
    </div>

    <!-- ЛЕНТА ПОСТОВ -->
    <div class="insta-feed">
        <!-- пост 1 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/women/68.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">alexandra_inst</div>
                    <div class="insta-post-location">Париж, Франция</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/104/600/500" alt="post">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 1 284 отметки</div>
            <div class="insta-post-caption"><strong>alexandra_inst</strong> Магия Эйфелевой башни ✨</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>paris_lover</strong> Красота невероятная!</div>
                    <div class="insta-single-comment"><strong>artem_travels</strong> Мечтаю там побывать</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>

        <!-- пост 2 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">nikolai_photo</div>
                    <div class="insta-post-location">Алтай, Россия</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/15/600/500" alt="nature">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 945 отметок</div>
            <div class="insta-post-caption"><strong>nikolai_photo</strong> Горы зовут настоящих путешественников 🏔️</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>hiking_dreams</strong> Невероятный кадр!</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>

        <!-- пост 3 -->
        <div class="insta-post">
            <div class="insta-post-header">
                <img class="insta-post-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="avatar">
                <div>
                    <div class="insta-post-user">coffeebooksoul</div>
                    <div class="insta-post-location">Уютное кафе ☕</div>
                </div>
            </div>
            <img class="insta-post-img" src="https://picsum.photos/id/20/600/500" alt="coffee">
            <div class="insta-post-actions">
                <span>❤️</span>
                <span>💬</span>
                <span>📤</span>
                <span style="margin-left:auto;">🔖</span>
            </div>
            <div class="insta-post-likes">❤️ 532 отметки</div>
            <div class="insta-post-caption"><strong>coffeebooksoul</strong> Кофе, книга и дождливый день 📖☕</div>
            <div class="insta-comments">
                <div class="insta-comment-list">
                    <div class="insta-single-comment"><strong>readers_club</strong> Атмосфера волшебства!</div>
                </div>
                <div class="insta-comment-input">
                    <input type="text" placeholder="Добавьте комментарий...">
                    <button>Опубликовать</button>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <!-- СЕТКА ПОСТОВ ПРОФИЛЯ -->
    <div class="insta-profile-grid">
        <div class="insta-grid-title">
            📷 Публикации
        </div>
        <div class="insta-grid">
            <div class="insta-grid-item"><img src="https://picsum.photos/id/1015/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/20/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/104/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/15/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/169/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/155/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/96/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/29/200/200" alt="grid"></div>
            <div class="insta-grid-item"><img src="https://picsum.photos/id/42/200/200" alt="grid"></div>
        </div>
    </div>

</div>

<style>
.insta-app {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            background-color: #fafafa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #262626;
            min-height: 100vh;
        }

        .insta-nav {
            background: white;
            border-bottom: 1px solid #dbdbdb;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .insta-logo {
            font-size: 24px;
            font-weight: 600;
            background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.5px;
        }
        .insta-nav-icons {
            display: flex;
            gap: 22px;
            font-size: 24px;
        }
        .insta-nav-icons span {
            cursor: default;
        }

        .insta-profile {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 16px;
            padding: 20px 16px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }
        .insta-avatar img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e0e0e0;
            background: #efefef;
        }
        .insta-info {
            flex: 1;
        }
        .insta-username {
            font-size: 24px;
            font-weight: 300;
            margin-bottom: 6px;
        }
        .insta-stats {
            display: flex;
            gap: 24px;
            margin: 10px 0;
            font-size: 13px;
        }
        .insta-stats span {
            font-weight: 700;
            margin-right: 4px;
        }
        .insta-bio {
            font-size: 13px;
        }
        .insta-bio strong {
            font-weight: 600;
        }

        .insta-create {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 0 16px 16px 16px;
            padding: 14px 16px;
        }
        .insta-create-title {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .insta-create-title span {
            font-size: 20px;
        }
        .insta-create-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .insta-fake-file {
            background: #f2f2f2;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            border: 1px dashed #bdbdbd;
            font-size: 13px;
            color: #3b3b3b;
        }
        .insta-fake-textarea {
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            padding: 12px;
            font-size: 13px;
            background: white;
            color: #8e8e8e;
            min-height: 64px;
        }
        .insta-publish-btn {
            background: #0095f6;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 13px;
            align-self: flex-end;
            cursor: default;
        }

        .insta-feed {
            margin: 0 16px 20px 16px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .insta-post {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            overflow: hidden;
        }
        .insta-post-header {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            gap: 10px;
        }
        .insta-post-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            background: #dbdbdb;
        }
        .insta-post-user {
            font-weight: 600;
            font-size: 13px;
        }
        .insta-post-location {
            font-size: 10px;
            color: #8e8e8e;
        }
        .insta-post-img {
            width: 100%;
            max-height: 450px;
            object-fit: cover;
            background: #efefef;
            display: block;
        }
        .insta-post-actions {
            display: flex;
            gap: 18px;
            padding: 8px 12px;
            font-size: 22px;
        }
        .insta-post-likes {
            font-weight: 600;
            font-size: 13px;
            padding: 0 12px 6px;
        }
        .insta-post-caption {
            padding: 0 12px 10px;
            font-size: 13px;
        }
        .insta-post-caption strong {
            margin-right: 6px;
        }
        .insta-comments {
            padding: 6px 12px 12px;
            border-top: 1px solid #efefef;
        }
        .insta-comment-list {
            margin-bottom: 8px;
            font-size: 12px;
        }
        .insta-single-comment {
            margin: 4px 0;
        }
        .insta-comment-input {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .insta-comment-input input {
            flex: 1;
            border: none;
            padding: 8px 0;
            font-size: 12px;
            background: transparent;
            outline: none;
        }
        .insta-comment-input button {
            background: none;
            border: none;
            color: #0095f6;
            font-weight: 600;
            font-size: 12px;
            cursor: default;
        }
        .insta-profile-grid {
            background: white;
            border: 1px solid #dbdbdb;
            border-radius: 12px;
            margin: 0 16px 20px 16px;
            padding: 16px;
        }
        .insta-grid-title {
            font-weight: 600;
            margin-bottom: 14px;
            font-size: 15px;
            border-bottom: 1px solid #efefef;
            padding-bottom: 8px;
        }
        .insta-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        .insta-grid-item {
            aspect-ratio: 1 / 1;
            background: #efefef;
            border-radius: 4px;
            overflow: hidden;
        }
        .insta-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .insta-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 12px 16px 8px;
        }
        .insta-tab {
            background: none;
            border: none;
            font-weight: 600;
            font-size: 15px;
            padding: 6px 20px;
            border-radius: 30px;
            color: #8e8e8e;
            cursor: default;
        }
        .insta-tab-active {
            background: #0095f6;
            color: white;
        }

       .insta-app  hr {
            border: none;
            border-top: 1px solid #dbdbdb;
            margin: 8px 16px;
        }
</style>


[/html]

0


Вы здесь » the lake house » анкеты » сборная солянка


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