• Live Your Life

    Объявление

    Новости
    Сервис Проблема с загрузкой форумов и необходимость оптимизации.
    Сервис Проблема с оплатой кредитов и смена платежного сервиса.
    Сервис Появился поиск по наградам.
    Сервис Сбой в работе уведомлений.
    Сервис Несколько обновлений Forum-Top.ru + адрес техподдержки rusff.
    Сервис Небольшой сбой forumupload.ru.
    Сервис Проблемы с платными услугами и профилем.
    Форум Максимальное количество заявок в поиске персонала.
    Интересное

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

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


    Вы здесь » Live Your Life » Платные услуги » Дизайны, адаптив и техподдержка от бродяги


    Дизайны, адаптив и техподдержка от бродяги

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

    1

    [html]<!DOCTYPE html>
    <html>
    <head>
    <meta charset="windows-1251">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0018/1e/e2/75005.css?v=48">
    <title>Вёрстка от бродяги</title>
    <style>#portfolio .tab-content .inner {width: auto; height: auto;}
    #portfolio .tab-content .wip {overflow: hidden !important;}
    #portfolio .process .scrollable {width: auto;}</style>
    </head>
    <body>

    <div id="portfolio">
    <div class="tabs">
        <div class="tab">
        <input type="radio" id="tab1" name="tab-group" checked>
        <label for="tab1" class="tab-title" title="Обо мне"><span>Обо мне</span></label>
        <section class="tab-content">
            <div class="inner aboutme">
            <h3>Кто я?</h3>
            <p>Всем привет! Я Alex Kolmar или просто бродяга (каюсь, тут зарегался под другим ником, но не суть). Админить форумы начал почти сразу после своего прихода на ролевые, т.е. с 2011 года. Всё это время я периодически экспериментировал с кодами и графикой, сделал несколько дизайнов для форумов, поставил на коды несколько чужих макетов, придумывал и модернизировал разные фишки для сайтов.</p>
            <h3>Что я умею</h3>
            <p>Сразу оговорюсь, что хоть я и хорошо знаком с фотошопом, но считаю себя в первую очередь верстальщиком, а уж потом дизайнером. Пока доводилось работать в основном с форумными ролевыми на платформе mybb/rusff, могу попробовать взяться и за что-то другое, но заранее ничего не обещаю.</p>
            <ul>
                <li>
                <span>Поставлю макет вашего дизайна на код</span>
                <p>Умею работать с макетами разной сложности, к вёрстке каждого подхожу индивидуально. Макеты обычно режу самостоятельно.</p>
                </li>
                <li>
                <span>Мобильные/адаптивные версии форумов/сайтов</span>
                <p>Даже если у вас уже есть установленный дизайн, я могу сделать его версию для мобильного устройства.</p>
                </li>
                <li>
                <span>html-оформление тем, страниц</span>
                <p>Умею верстать страницы с нуля с тем или иным наполнением. Могу взяться за дизайн или вёрстку лендинга.</p>
                </li>
                <li>
                <span>Интерактивные карты</span>
                <p>Делаю интерактивные карты, иными словами, карты с кликабельными областями, при клике на которые открываются описания с картинками, ссылками и прочим контентом. Если предполагается добавление новых областей на карту, могу написать инструкцию по работе с ней.</p>
                </li>
                <li>
                <span>Адаптация дополнений для форума и несложных скриптов</span>
                <p>Подгоню по цвету/стилю/размеру различные дополнения для форума (слайдеры, скрипты маски, окна дополнительной информации и т.п.). Могу устанавливать несложные скрипты, найденные на просторах интернета (простые фильтры, разные праздничные украшения, часы, календари и прочие "фишки").</p>
                </li>
                <li>
                <span>Создание полных дизайнов под ключ</span>
                <p>Как я уже писал выше, меня больше интересует вёрстка, однако разработать полноценный дизайн я тоже могу. Не пробовал делать глянцевые дизайны и вряд ли возьмусь, также не возьмусь за аниме, Корею (специфические жанры, я в них плохо смыслю, извиняйте) и фэнтези (ну не прёт на красивые рамки, замки и драконов, я пытался, честно Т_Т). Больше люблю фантастику, а также могу попробовать что-то в восточном стиле (в духе Принца Персии, Великолепного Века и т.п.). Если вы абсолютно точно знаете, чего хотите, и у вас достаточно референсов, чтобы визуализировать задумку — я могу взяться за создание полного дизайна :з</p>
                </li>
                <li>
                <span>Обучу вёрстке</span>
                <p>Я не обучался вёрстке профессионально, а искал информацию в интернете, спрашивал совета у более опытных и совершенствовался на практике. Это долгий процесс, и если вы не желаете проходить подобный путь, то я готов поделиться с вами полученными знаниями :з В первую очередь это касается установки макета на форумы rusff/mybb — его структура и особенности, как подготовить макет дизайна, что возможно, а что невозможно поставить на код, как создавать html-темы, какими инструментами пользоваться, чтобы облегчить себе жизнь и т.д.</p>
                </li>
            </ul>
            <h3>Контакты</h3>
            <div class="contacts">
                <p class="soc discord" title="discord" target="_blank">AlexKolmar#7262</p>
                <a class="soc tg" href="https://t.me/AlexKolmar" title="telegram" target="_blank">@AlexKolmar</a>
                <a class="soc vk" href="https://vk.com/byalexkolmar" title="вконтакте" target="_blank">группа вк</a>
                <a class="soc ig" href="https://www.instagram.com/alex.kolmar/" title="instagram" target="_blank">instagram</a>
            </div>
            </div>
        </section>
        </div>
        <div class="tab">
        <input type="radio" id="tab2" name="tab-group">
        <label for="tab2" class="tab-title" title="О работе и сроках"><span>О работе и сроках</span></label>
        <section class="tab-content">
            <div class="inner wip">
            <p>Чтобы подробнее ознакомиться с условиями работы, нажмите на интересующий блок.</p>
            <a class="service" href="#designlayout">
                <img src="https://i.imgur.com/76XlIM0.png">
                <p>Вёрстка вашего макета</p>
            </a>
            <a class="service" href="#adaptive">
                <img src="https://i.imgur.com/89mnCHY.png">
                <p>Адаптивная / мобильная версия сайта</p>
            </a>
            <a class="service" href="#pages">
                <img src="https://i.imgur.com/SjtXaHw.png">
                <p>html-оформление тем и страниц</p>
            </a>
            <a class="service" href="#maps">
                <img src="https://i.imgur.com/0IsW23R.png">
                <p>Интерактивные карты</p>
            </a>
            <a class="service" href="#scripts">
                <img src="https://i.imgur.com/ijoGguz.png">
                <p>Адаптация скриптов и плагинов</p>
            </a>
            <a class="service" href="#fulldes">
                <img src="https://i.imgur.com/tN1FHFu.png">
                <p>Создание дизайна под ключ</p>
            </a>
            <a class="service" href="#study">
                <img src="https://i.imgur.com/mKQDBDX.png">
                <p>Обучение вёрстке</p>
            </a>
            <a class="service" href="#rules">
                <img src="https://i.imgur.com/7aWib45.png">
                <p>Правила и полезная информация</p>
            </a>
            </div>
            <div id="designlayout" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Вёрстка вашего макета</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 1200 рублей;<br>
                <b>Время работы:</b> 1-14 дней.
                </div>
                <p>Процесс довольно простой: вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то прошу вас показать макет и оформить ТЗ. Если мы приходим к согласию, то согласовываем полную стоимость, и вы вносите предоплату в размере 50% от стоимости работы, после чего я начинаю вёрстку на своём тестовике. В зависимости от сложности макета, занятости и срочности вёрстка занимает у меня от суток до недели в среднем. По готовности вёрстки я информирую вас. После второй половины оплаты я иду ставить вам дизайн на чистовик, либо просто отдаю на руки коды. Если вы оплачиваете всю работу заранее, то я могу верстать макет сразу на вашем форуме или тестовике. После полной установки дизайна я оказываю посильную техподдержку в течение 1 месяца по небольшим вопросам. Серьёзные изменения в кодах, установка сложных дополнений, замена основных графических элементов дизайна — за отдельную плату.</p>
                <p>Как я писал ранее — работаю с макетами разной сложности. Был опыт вёрстки макета, созданного в Figma, таким образом, вам необязательно делать макет именно в Фотошопе. Мне не важно, новый у вас форум или уже видавший виды со множеством скриптов, настроек и html-тем, однако такая вёрстка обойдётся дороже ввиду учёта всех нюансов и исправления возможных багов.</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Ссылка на файл макета: </li>
                <li>Основной цвет ссылок: </li>
                <li>Цвет ссылок при наведении курсора: </li>
                <li>Эффекты ссылок: </li>
                <li>Цвета текста и фона выделенного текста (selection): </li>
                <li>Цвета бегунка и дорожки полосы прокрутки: </li>
                <li>Наличие html-тем (да/нет), их количество<sup>[1]</sup>: </li>
                <li>Эффекты при наведении на ссылки/картинки в шапке: </li>
                <li>Список необходимых скриптов: </li>
                <li>Нужна мобильная/адаптивная версия? (да/нет)<sup>[2]</sup>: </li>
                <li>Прочие пожелания: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] При ответе "Да" желательно будет заполнить ТЗ на оформление html-тем, которое находится в блоке "html-оформление тем и страниц".</p>
                <p>[2] При ответе "Да" желательно будет заполнить ТЗ на мобильную/адаптивную версию, которое находится в блоке "Адаптивная/мобильная версия сайта".</p>
            </div>
            </div>
            <div id="adaptive" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Адаптивная/мобильная версия сайта</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 600 рублей;<br>
                <b>Время работы:</b> 5-14 дней.
                </div>
                <p>Даже если у вас на форуме стоит готовый дизайн, свёрстанный другим мастером, я могу сделать мобильную версию вашего форума на основе имеющихся элементов дизайна. Т.е. это будет не упрощённый мобильный дизайн на основе одного из списка стандартных mybb/rusff, а полноценная мобильная версия с сохранением атмосферы вашего дизайна и его цветовой гаммы. Разумеется, всё это будет возможно при условии, если ваш дизайнер не поставил жесточайшие ограничения на возможность изменения дизайна (как бы то ни было, на всякий случай постарайтесь узнать, что он думает по этому поводу).</p>
                <p>Как это будет: вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то вы присылаете мне ТЗ, я изучаю ваш существующий дизайн, оцениваю сроки и сложность предстоящей работы. Далее мы обсуждаем детали, и если приходим к соглашению, я берусь делать мобильную версию. Верстать буду на своём, либо вашем тестовике, предварительно перенеся ВСЁ оформление вашего форума (дизайн, скрипты, настройки и т.п.). Черновик/тестовик обязателен, дабы не нарушить работу вашего форума. Исключение — если ваш форум ещё не открыт для игры. По ходу работы раз в какой-то отрезок времени я буду показывать вам промежуточные результаты. Я сообщу вам, когда будет готов окончательный результат. После этого вы оплачиваете работу (или нет, если была предоплата) и я иду ставить мобильный дизайн на ваш основной форум.</p>
                <p>Как и в случае с основной вёрсткой, я обеспечиваю техподдержку на всё время жизни мобильного дизайна, могу поправить какие-то мелкие баги (если только они были, действительно, связаны с мобильным дизайном).</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Мобильная или адаптивная версия<sup>[1]</sup>: </li>
                <li>Вид основных меню (гамбургер/иконки/иное)<sup>[2]</sup>: </li>
                <li>Какие поля профиля можно скрыть: </li>
                <li>Прочие пожелания: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] Мобильная версия предполагает только один вариант отображения помимо основного — тот, который будет отображаться на мобильных устройствах в портретной ориентации (в высоту, как вы обычно держите телефон) — обычно это разрешение экрана до 540 пикселей. Адаптивная версия предполагает несколько вариантов отображения — допустим, для мобильных, для планшетов, для мониторов с очень большим разрешением и т.п., а также "резиновость" — плавное растягивание в зависимости от ширины окна (возможность такой реализации нужно оценивать индивидуально).</p>
                <p>[2] Вид меню на мобильных устройствах для удобства обычно преобразовывают либо в т.н. "гамбургер" — иконку из 3-4 горизонтальных полосок, при нажатии на которую открывается список пунктов меню, либо просто в несколько иконок вместо текстовых ссылок.</p>
            </div>
            </div>
            <div id="pages" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>html-оформление тем и страниц</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 300 рублей;<br>
                <b>Время работы:</b> 1-7 дней.
                </div>
                <p>Если вам нужно оформить какую-либо тему в html, будь то список внешностей, шаблон анкеты, шапка гостевой книги, личная страница персонажа и прочее в этом роде, то я могу это сделать. Это может быть как чистый html, так и с интерактивными элементами (всплывающие окна, фильтрация по какому-либо признаку и т.п.). Во втором случае может потребоваться поиск или адаптация необходимых скриптов.</p>
                <p>Если вам нужно сверстать целую страницу или несколько таких с нуля, я также могу это сделать при наличии у вас макета и хостинга, где впоследствии будет находиться результат (для этой цели сгодятся и форумные файлы).</p>
                <p>Вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то прошу вас показать мне макет и заполнить ТЗ. Если мы приходим к соглашению, то я берусь за работу. Скорее всего, буду верстать сперва у себя на компьютере в программе для написания кода, поскольку верстать сразу на том или ином сайте неудобно. Когда работа готова, я сообщаю вам и после оплаты (если не было предоплаты) иду ставить оформление уже у вас.</p>
                <p>После установки я оказываю посильную техподдержку в случае, если что-то съедет не туда, поломается и т.п.</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Страница/тема в html<sup>[1]</sup>: </li>
                <li>Наличие интерактивных элементов, скриптов, плагинов<sup>[2]</sup>: </li>
                <li>Цвет и эффект ссылок при наведении курсора: </li>
                <li>Цвета текста и фона выделенного текста (selection): </li>
                <li>Цвета бегунка и дорожки полосы прокрутки: </li>
                <li>Нужна мобильная/адаптивная версия? (да/нет): </li>
                <li>Прочие пожелания: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] Отвечаете, что именно нужно сверстать и прилагаете файл макета будущей темы/страницы.</p>
                <p>[2] Предполагаются ли какие-либо всплывающие окна, переключение вкладок, слайдеры, ротаторы и т.п.</p>
                <p></p>
            </div>
            </div>
            <div id="maps" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Интерактивные карты</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 500 рублей;<br>
                <b>Время работы:</b> от 2 дней.
                </div>
                <p>Если мир вашей ролевой предполагает наличие интерактивной карты мира (или необязательно мира, это может быть что угодно с кликабельными областями), я с удовольствием помогу оживить данную задумку. Скажу сразу — я не занимаюсь отрисовкой самих карт, поэтому как и в случае с вёрсткой макета дизайна мне понадобится ваш макет карты.</p>
                <p>Вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то прошу вас показать мне макет и заполнить ТЗ. Если мы приходим к соглашению, то я берусь за работу. Скорее всего, буду верстать сперва у себя на компьютере в программе для написания кода, поскольку верстать сразу на том или ином сайте неудобно. Когда работа готова, я сообщаю вам и после оплаты (если не было предоплаты) иду ставить оформление уже у вас.</p>
                <p>Если ваша интерактивная карта предполагает добавление новых отметок, областей, описаний — укажите это, пожалуйста, в ТЗ в соответствующем пункте. В этом случае я напишу вам небольшое руководство о том, как самостоятельно добавлять новые отметки на карту.</p>
                <p>После установки я оказываю посильную техподдержку в случае, если что-то съедет не туда, поломается и т.п.</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Файл с макетом карты: </li>
                <li>Дополнительные слои с разметками<sup>[1]</sup>: </li>
                <li>Цвет и эффект ссылок при наведении курсора: </li>
                <li>Цвета текста и фона выделенного текста (selection): </li>
                <li>Цвета бегунка и дорожки полосы прокрутки: </li>
                <li>Будет ли информация на карте обновляться: </li>
                <li>Прочие пожелания: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] Если для вашей карты требуется включаемая/отключаемая разметка (дополнительные символы, цветовыделение — что угодно), то подробно описываете пожелания в этом пункте.</p>
            </div>
            </div>
            <div id="scripts" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Адаптация скриптов и плагинов</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 100 рублей;<br>
                <b>Время работы:</b> варьируется.
                </div>
                <p>В сети и на форумах технической поддержки выложено огромное количество различных дополнений и скриптов. Некоторые из них достаточно сложные в установке и требуют подгонки под дизайн, некоторые предназначены не конкретно для форумов на платформе mybb/rusff, но их можно адаптировать под нужды форума. Скажу сразу: сам я скриптов не пишу, но в целом понимаю синтаксис javascript и jQuery. Если не найдётся скрипта, подходящего под задачу, либо потребуется его серьёзная доработка, вам придётся обратиться к программисту.</p>
                <p>Вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то прошу вас заполнить ТЗ. Если мы приходим к соглашению, то я берусь за работу. Когда работа готова, я сообщаю вам и после оплаты иду ставить/настраивать дополнение у вас.</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Краткое описание/название/ссылка на скрипт или дополнение: </li>
                <li>Назначение<sup>[1]</sup>: </li>
                <li>Пожелания к настройке: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] Где и для чего планируется использовать дополнение, дабы определиться, как его настраивать. Необязательно к заполнению для скриптов для mybb/rusff.</p>
            </div>
            </div>
            <div id="fulldes" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Создание дизайна под ключ</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> от 2500 рублей;<br>
                <b>Время работы:</b> от 2х недель.
                </div>
                <p>К сожалению, опыт создания полных дизайнов у меня небольшой, к тому же я предпочитаю работать с ограниченным числом жанров, поэтому не могу заранее обещать, что возьмусь делать полный дизайн. Во многом это будет зависеть от наличия свободного времени (или времени, выделенного на работу), вдохновения и того, насколько подробно вы опишете ваши пожелания к дизайну.</p>
                <span>Жанры, с которыми я хотел бы поработать:</span>
                <ul>
                <li>Фантастика;</li>
                <li>Восточный антураж;</li>
                <li>Неглянцевый реал;</li>
                <li>Что-то универсальное, кроссовер.</li>
                </ul>
                <span>Не смогу/нет желания:</span>
                <ul>
                <li>Фэнтези;</li>
                <li>Глянцевый реал;</li>
                <li>Аниме;</li>
                <li>Корея.</li>
                </ul>
                <p>Всё остальное, что не перечислено, обсуждается индивидуально.</p>
                <p>Вы связываетесь со мной любым удобным способом и излагаете суть вопроса. Если я не занят, то прошу вас оформить ТЗ. Если мы приходим к согласию, то я в скором времени начинаю работу. В зависимости от сложности задачи, вдохновения и занятости процесс создания дизайна может занять до нескольких недель. Предоплату за разработку макета я НЕ беру вплоть до его готовности. По ходу работы раз в какой-то отрезок времени я буду показывать вам промежуточные результаты для их утверждения или внесения правок. Как только будет готов результат, вы оплачиваете работу (целиком с последующей вёрсткой или только макет). После этого я начинаю вёрстку дизайна на тестовике. Она может занять в районе недели, если не предполагает большого количества html-тем и мобильной/адаптивной версии. После завершения вёрстки вы оплачиваете оставшуюся сумму (если не сделали этого ранее или потребовались дополнительные манипуляции в процессе вёрстки) и я переношу всё оформление на чистовик.</p>
                <p>После полной установки дизайна я оказываю посильную техподдержку всё время, пока он стоит на форуме — поправляю мелкие баги, то, что не удалось сразу отловить, и т.п.. Серьёзные изменения в кодах и установка сложных дополнений — за отдельную плату.</p>
                <span>Шаблон ТЗ:</span>
                <ul>
                <li>Фандом/жанр/тематика ролевой: </li>
                <li>Предпочтительные палитры цветов<sup>[1]</sup>: </li>
                <li>Ссылки на референсы/исходники/дизайны, которые нравятся: </li>
                <li>Наличие html-тем (да/нет), их количество<sup>[2]</sup>: </li>
                <li>Список необходимых скриптов: </li>
                <li>Нужна мобильная/адаптивная версия? (да/нет)<sup>[3]</sup>: </li>
                <li>Прочие пожелания: </li>
                <li>В какую сумму рассчитываете уложиться: </li>
                </ul>
                <span>Пояснение</span>
                <p>[1] Можете выложить ссылки на палитры с таких сайтов, как <a href="https://color.romanuke.com" target="_blank">IN COLOR BALANCE</a> и т.п., самостоятельно составить палитру на основе понравившейся картинки через <a href="https://www.imgonline.com.ua/get-dominant-colors.php">этот сервис</a> или просто перечислить нужные цвета в hex.</p>
                <p>[2] При ответе "Да" желательно будет заполнить ТЗ на оформление html-тем, которое находится в блоке "html-оформление тем и страниц".</p>
                <p>[3] При ответе "Да" желательно будет заполнить ТЗ на мобильную/адаптивную версию, которое находится в блоке "Адаптивная/мобильная версия сайта".</p>
            </div>
            </div>
            <div id="study" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Обучение вёрстке</h3>
            <div class="scrollable">
                <div class="timecost">
                <b>Стоимость:</b> 500 рублей/час;<br>
                <b>Время работы:</b> 1-2 часа на урок.
                </div>
                <p>Как я уже говорил, я не обучался вёрстке профессионально и также не являюсь профессиональным преподавателем. Прежде, чем начать обучение, я спрошу у вас, что вы уже умеете и чему хотели бы обучиться, и мы составим примерный план занятий.</p>
                <p>Уроки будут в формате трансляций в дискорде или подобной ему программе с возможностью демонстрации экрана и общения. Желательно, чтобы сама программа для видеотрансляций и оборудование было правильно настроено, чтобы мы не потеряли слишком много времени в случае технических неполадок.</p>
                <p>Если вы не можете или не хотите обучаться в таком формате, я могу обучать в формате переписки или записывать обучающие видео, однако на это потребуется больше времени и, скорее всего, стоимость обучения изменится в большую или меньшую сторону в зависимости от конкретной задачи.</p>
                <p>Также в обучение будут входить домашние задания для самостоятельной работы с последующим разбором на уроке.</p>
                <span>Список возможных уроков:</span>
                <ul>
                <li>Разбор инструментария, необходимого для вёрстки: программы, средства в браузере, справочники, полезные сервисы.</li>
                <li>Начало работы с дизайном форума mybb/rusff, особенности разметки и стиля.</li>
                <li>Разбор вашего PSD-макета дизайна: оптимизация, что можно, что нельзя реализовать, особенности его предстоящей вёрстки, доработка деталей, рекомендации по нарезке.</li>
                <li>Вёрстка вашего макета (потребуется несколько уроков, минимум 3).</li>
                <li>Вёрстка html-тем.</li>
                <li>Вёрстка страниц с нуля.</li>
                <li>Оптимизация, разбор ошибок в вёрстке дизайна (уже поставленного на тот или иной форум — если, допустим, вы ставили самостоятельно или собираете поставить по чьему-то примеру).</li>
                <li>Создание и вёрстка мобильного/адаптивного дизайна (от 3х уроков).</li>
                </ul>
            </div>
            </div>
            <div id="rules" class="process">
            <a href="#" class="close" onclick="return false;" title="закрыть">Ч</a>
            <h3>Правила и полезная информация</h3>
            <div class="scrollable">
                <ol>
                <li>Я предпочитаю общение в вежливой и дружелюбной манере. Грубость, претенциозный тон и прочее в этом духе могут отбить у меня желание вести дальнейший диалог и тем более выполнять заказ.</li>
                <li>Я не ставлю копирайтов на видимых местах и вообще ставлю их не всегда.</li>
                <li>Вы вправе поступать с результатами моей вёрстки вашего макета как вам угодно, за исключением перепродажи и передачи третьим лицам, если это не было оговорено со мной.</li>
                <li>Вы вправе поступать с созданным мною для вас дизайном как вам угодно, за исключением перепродажи, передачи третьим лицам и создания производных дизайнов, если это не было оговорено со мной.</li>
                <li>Полное или частичное копирование кода интерактивных карт для создания производных на их основе, особенно в коммерческих целях, запрещено, если мы не оговаривали иные условия.</li>
                <li>Мне сложно сказать, дорого я беру за свои услуги или, наоборот, дёшево, но я оцениваю свои трудозатраты в указанных рамках.</li>
                <li>Основной способ оплаты — перевод на карту Сбера (для жителй России и владельцев карт российских банков). Для владельцев карт не российских и не украинских банков — перевод на карту СтатусБанка. Сумма оплаты в белорусских рублях из расчёта 1BYN = 25RUB. Комиссия за ваш счёт.</li>
                <li>При надобности я могу взяться за срочный заказ и постараться сверстать в течение 1-2 суток. Разумеется, за срочность цена увеличивается. Речь только о вёрстке, сделать срочно целый дизайн я не смогу в любом случае.</li>
                <li>Вы можете нарезать свой макет самостоятельно, однако PSD всё равно лучше иметь под рукой на случай, если придётся перерезать какой-то элемент. У меня свои методы вёрстки и для них может не подойти вырезанный тем или иным способом графический элемент.</li>
                <li>Если вы по каким-то причинам решите отменить ваш заказ — всё решаемо. Если вы не делали предоплату и я не успел начать работу, то не вижу проблем. Поэтому отказываться желательно на начальном этапе. Просто прежде, чем делать заказ, подумайте — вы точно этого хотите?) Если не уверены, то, по крайней мере, не делайте предоплату заказа.</li>
                <li>Постоянным клиентам возможны скидки) Также возможны скидки и новым клиентам, но размер и условия лучше обсуждать индивидуально.</li>
                </ol>
            </div>
            </div>
        </section>
        </div>
        <div class="tab">
        <input type="radio" id="tab3" name="tab-group">
        <label for="tab3" class="tab-title" title="Портфолио"><span>Портфолио и всякие вкусности</span></label>
        <section class="tab-content">
            <div class="inner works">
            <details>
            <summary><h3>Дизайны</h3></summary>
            <span>Лето 2020</span>
            <div class="designs type_a">
                <div class="image">
                <a href="https://i.imgur.com/fj2JIob.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://i.imgur.com/fj2JIob.png">
                </a>
                </div>
                <div class="opis">Дизайн для Pinot Grigio. Мой первый полный дизайн за 8 лет (с конца 2011 года). Помимо самого дизайна подогнал под новый стиль уже существующие на форуме хтмл-темы.</div>
            </div>
            <span>Лето 2021</span>
            <div class="designs type_b">
                <div class="opis">Мой первый адаптивный дизайн для <a href="https://manunkind.rusff.me" target="_blank">собственной ролевой</a>. Многие элементы оформления — не растровые изображения (jpg, png), а либо отрисованы посредством css, либо являются векторной графикой (svg), которую я отрисовывал в adobe illustrator. Помимо самого дизайна есть несколько хтмл-тем — гостевая, новости, список персонажей и мини-профиль с достижениями. Они также адаптивны.
                <details>
                    <summary><a>Видеообзор</a></summary>
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/aX2Za0u_o2c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </details>
                </div>
                <div class="image">
                <a href="https://i.imgur.com/zgnVHdC.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://i.imgur.com/zgnVHdC.png">
                </a>
                <a href="https://i.imgur.com/u5uSzrk.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://i.imgur.com/u5uSzrk.png">
                </a>
                <a href="https://i.imgur.com/QImJw68.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://i.imgur.com/QImJw68.png">
                </a>
                </div>
            </div>
            </details>
            <details>
            <summary><h3>html и интерактивные карты</h3></summary>
            <span>Вкладки с информацией</span>
            <div class="designs type_a">
                <div class="opis">Информация о персонаже в виде контейнера со вкладками. Присутствует простой фильтр сортировки по участникам и скрипт открытия дополнительных окон с информацией о контактах персонажа.</div>
                <div class="image">
                <a href="https://alexkolmar.github.io/chrono/chrono.html" title="посмотреть в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/rDxqe7m.png">
                </a>
                </div>
            </div>
            <div class="designs type_a">
                <div class="image">
                <a href="https://alexkolmar.github.io/menu/layout.html" title="посмотреть в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/xBri6Mo.png">
                </a>
                </div>
                <div class="opis">Портфолио в виде контейнера со вкладками. Никаких скриптов и особенностей, только описания при наведении на картинку.</div>
            </div>
            <span>Карта Таллахасси</span>
            <div class="designs type_a">
                <div class="opis">Интерактивная карта Таллахасси специально для ролевой <a href="http://breakdown.rusff.me">Breakdown</a>. При наведении на ту или иную область карты она выделяется цветом. Помимо районов, на карте кружками отмечены значимые места — учреждения, некоторые частные дома, места преступлений. При клике открывается описание местности с иллюстрацией и списком лиц, которые там живут или работают. Также в верхнем левом углу карты есть кнопка, при клике на которую открывается описание с условными обозначениями.</div>
                <div class="image">
                <a href="https://alexkolmar.github.io/tallahassee/tallahassee.html" title="посмотреть в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/sHrpg9N.png">
                </a>
                </div>
            </div>
            <span>Карта Галактики</span>
            <div class="designs type_a">
                <div class="image">
                <a href="https://alexkolmar.github.io/sm_galaxy_map/map.html" title="посмотреть в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/SSQvpOd.jpg">
                </a>
                <a href="https://youtu.be/xYRHpEo2dIQ" title="смотреть видео на YouTube" target="_blank">видеообзор</a>
                </div>
                <div class="opis">Интерактивная карта галактики для проекта <a>Sailor Moon Galactic Game</a>. Сам дизайн карты не мой, его сделала <a>Ray</a>, мои только вёрстка и техническая реализация. Кружками отмечены значимые для сюжета планеты, отметка в виде цветка — расположение Солнечной Системы. При клике на отметки открываются описания с иллюстрациями. Помимо планет, на карте есть два включаемых слоя — слой с сеткой и слой с названиями галактических рукавов.</div>
            </div>
            <span>html-оформение тем</span>
            <div class="designs type_b">
                <div class="opis">
                html-формление двух тем с интерактивными элементами для фан-клуба Загадочный дом "Кузнечик". Дизайн тем создала As</a>, я занимался вёрсткой и частично реализацией работы интерактивных элементов.
                </div>
                <div class="image kyz">
                <a href="https://alexkolmar.github.io/projects/domkyznechik/letstalk.html" title="посмотреть демо-версию в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/fT9vugK.jpg">
                </a>
                <a href="https://alexkolmar.github.io/projects/domkyznechik/secretsanta.html" title="посмотреть демо-версию в полном размере и потыкать" target="_blank">
                    <img src="https://i.imgur.com/rGtzawn.jpg">
                </a>
                </div>
            </details>
            <details>
            <summary><h3>Вёрстка чужих макетов</h3></summary>
            <p>Поясню: <b>я не автор макетов, расположенных ниже!</b> Я просто ставил их на код, кое-где дорисовывая или доводя до ума разные мелочи. К сожалению, много упомянутых ниже проектов либо закрылось, либо сменило дизайн, поэтому <b>посмотреть вживую может не получиться</b>. Но к некоторым дизайнам есть видеообзоры.</p>
            <p>P.S. Уважаемые дизайнеры и администраторы нижеследующих форумов! Если наличие вашего макета, вашего имени или ссылки на форум каким-то образом ущемляет ваши права, уведомите меня пожалуйста, об этом, и я изменю/уберу информацию.</p>
            <div class="smallpreview">
                <span>Breakdown</span>
                <h5>Дизайнер макетов: третий рим</h5>
                <p>Вместе с автором макетов мы играли на данной ролевой и в какой-то момент решились на коллаб к празднику. А потом к ещё одному и ещё.</p>
                <div class="site">
                <span>Halloween 2019</span>
                <a href="https://i.imgur.com/fAArpaY.png" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/fAArpaY.png"></a>
                </div>
                <div class="site">
                <span>New Year 2020</span>
                <a href="https://i.imgur.com/u7pXKBi.png" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/u7pXKBi.png"></a>
                </div>
                <div class="site">
                <span>2nd Anniversary</span>
                <a href="https://i.imgur.com/QSMhlvv.png" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/QSMhlvv.png"></a>
                </div>
            </div>
            <div class="designs type_b">
                <div class="opis">
                <span>Наруто. Возрождение</span>
                <h5>Дизайнер макетов: Schmidt</h5>
                <p>У данного проекта есть 2 варианта дизайна — дневной и ночной, а также мобильная версия, поддерживающая оба варианта дизайна.</p>
                </div>
                <div class="image">
                <a href="https://i.imgur.com/EsjdUZW.gif" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/EsjdUZW.gif" width="200"></a>
                <a href="https://i.imgur.com/heg8KlU.jpg" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/heg8KlU.jpg"></a>
                <a href="https://i.imgur.com/7KBzztr.jpg" title="посмотреть в полном размере" target="_blank"><img src="https://i.imgur.com/7KBzztr.jpg"></a>
                </div>
            </div>
            <div class="designs type_b">
                <div class="opis">
                <span>Staffage</span>
                <h5>Дизайнер: Вещий Дух</h5>
                <p>Дизайн и вёрстку форуму делал другой дизайнер, я сделал только мобильную версию на основе существующего дизайна, используя его элементы, элементы официального мобильного стиля, а также близкие по стилю и цветовой гамме.</p>
                </div>
                <div class="image">
                <a href="https://forumupload.ru/uploads/0007/e3/f7/7130/249416.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://forumupload.ru/uploads/0007/e3/f7/7130/249416.png">
                </a>
                <a href="https://forumupload.ru/uploads/0007/e3/f7/7130/266714.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://forumupload.ru/uploads/0007/e3/f7/7130/266714.png">
                </a>
                <a href="https://forumupload.ru/uploads/0007/e3/f7/6822/818102.jpg" title="посмотреть в полном размере" target="_blank">
                    <img src="https://forumupload.ru/uploads/0007/e3/f7/6822/818102.jpg">
                </a>
                <a href="https://forumupload.ru/uploads/0007/e3/f7/7130/984059.png" title="посмотреть в полном размере" target="_blank">
                    <img src="https://forumupload.ru/uploads/0007/e3/f7/7130/984059.png">
                </a>
                </div>
            <div class="smallpreview">
                <span>Другие форумы</span>
                <div class="site">
                <span>1984 RESISTANCE</span>
                <h5>дизайнер: <a title="это не точно, но он был админом проекта">Dom_in_out</a></h5>
                <a href="https://i.imgur.com/vTGNrK1.jpg" target="_blank"><img src="https://i.imgur.com/vTGNrK1.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Sailor Moon Galactic Game</span>
                <h5>дизайнер: Ray</h5>
                <a href="https://i.imgur.com/vMWxUdm.jpg" target="_blank"><img src="https://i.imgur.com/vMWxUdm.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Мерцания Секунд</span>
                <h5>дизайнер: As</h5>
                <a href="https://i.imgur.com/h3ymNg3.jpg" target="_blank"><img src="https://i.imgur.com/h3ymNg3.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span><br>Blind Faith</span>
                <h5>дизайнер: .angvar</h5>
                <a href="https://i.imgur.com/srVmLmo.png" target="_blank"><img src="https://i.imgur.com/srVmLmo.png" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>CodeVein — Наследие Королевы</span>
                <h5>дизайнер: Kiros56488123</h5>
                <a href="https://i.imgur.com/hwynQFa.jpg" target="_blank"><img src="https://i.imgur.com/hwynQFa.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span><br>DC: ManUNkind</span>
                <h5>дизайнер: achromatic</h5>
                <a href="https://i.imgur.com/hkuDkPJ.jpg" target="_blank"><img src="https://i.imgur.com/hkuDkPJ.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>D.Gray-man</span>
                <h5>дизайнер: Tyki Mikk</h5>
                <a href="https://i.imgur.com/QyQi48y.png" target="_blank"><img src="https://i.imgur.com/QyQi48y.png" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Blueming</span>
                <h5>дизайнер: falconsama</h5>
                <a href="https://i.imgur.com/vbSrMiZ.jpg" target="_blank"><img src="https://i.imgur.com/vbSrMiZ.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>SailorMoon — Restart</span>
                <h5>дизайнер: Ray</h5>
                <a href="https://i.imgur.com/WqBYfPo.jpg" target="_blank"><img src="https://i.imgur.com/WqBYfPo.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Бумажные Города</span>
                <h5>дизайнер: Gatto</h5>
                <a href="https://i.imgur.com/o2LdZvP.jpg" target="_blank"><img src="https://i.imgur.com/o2LdZvP.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>ARTiSHOCK</span>
                <h5>дизайнер: сатаня</h5>
                <a href="https://i.imgur.com/eXR8TlH.jpg" target="_blank"><img src="https://i.imgur.com/eXR8TlH.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Метавалломентов</span>
                <h5>дизайнер: ocean</h5>
                <a href="https://i.imgur.com/npwtInu.jpg" target="_blank"><img src="https://i.imgur.com/npwtInu.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span><br>Arcana septem stellarum</span>
                <h5>дизайнер: Gatto</h5>
                <a href="https://i.imgur.com/eGcNZTml.jpg" target="_blank"><img src="https://i.imgur.com/eGcNZTml.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>Sailor Moon — «Shattered Earth»</span>
                <h5>дизайнер: Ray</h5>
                <a href="https://i.imgur.com/uSC8Wi5l.jpg" target="_blank"><img src="https://i.imgur.com/uSC8Wi5l.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span><br>cross the binary</span>
                <h5>дизайнер: честно, не помню ника</h5>
                <a href="https://i.imgur.com/tZII6Trl.png" target="_blank"><img src="https://i.imgur.com/tZII6Trl.png" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>wizarding test</span>
                <h5>дизайнер: сатаня</h5>
                <a href="https://i.imgur.com/HP6eNwil.jpg" target="_blank"><img src="https://i.imgur.com/HP6eNwil.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site">
                <span>APPARATE</span>
                <h5>дизайнер: сатаня</h5>
                <a href="https://i.imgur.com/z0fRTPQl.jpg" target="_blank"><img src="https://i.imgur.com/z0fRTPQl.jpg" alt="посмотреть в полном размере"></a>
                </div>
                <div class="site"></div>
            </div>
            </details>
            <details>
                <summary><h3>Коды, шаблоны и прочие фишки</h3></summary>
                     <div class="opis">
                <span>Фильтрация элементов по критерию</span>
                <p>Скрипт фильтра элементов по критерию. Полезно для списков, где есть элементы, отвечающие сразу нескольким критериям. Подробности тут: <a href="https://urchoice.su/viewtopic.php?pid=2170380#p2170380">ссылка</a>.</p>
                <a href="https://i.imgur.com/Im4Ehm9.png" target="_blank"><img src="https://i.imgur.com/Im4Ehm9.png" alt="посмотреть в полном размере"></a>
                    </div>
            </details>
            </div>
        </section>
        </div>
    </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>$(document).ready(function() {
        $('.service').on('click', function(e) {
            e.preventDefault();
            $('.process').each(function() {
                $(this).fadeOut(600);
            });
            var block = $(this).attr('href');
            $(block).fadeIn(600);
            $(this).addClass('active');
            $('.wip').css('overflow','hidden');
        });
        $('a.close').click(function(){
        $(this).closest(".process").fadeOut(600);
        $('.service.active').removeClass('active');
        $('.wip').css('overflow','auto');
        });
    });
    </script>

    </body>
    </html>[/html]

    Отредактировано Force (11-10-2023 14:23:08)

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +2

    2

    Немного зимних обновлений!
    Вёрстка тестового и чистового дизайнов для crossXXXS!
    Макеты, как обычно не мои, я просто верстал. Макеты были созданы не в фотошопе, а в figma.

    http://i.imgur.com/IMCm8mZ.jpg

    http://i.imgur.com/HDioDX5.jpg

    Честно говоря, с тестовиком было сложнее, поскольку там больше фигурных элементов, выступающих за пределы тела форума, плюс менюшка иконками. Во время установки чистовика у меня уже были определены основные алгоритмы работы над тем или иным оформлением, поэтому было проще.

    Немного анимаций и описаний:

    Шапка тестовик
    Шапка чистовик
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    3

    Фильтрация элементов по критерию

    Всем привет!

    Играя на разных ролевых, задумывались ли вы когда-либо, как неудобно порой бывает отыскать нужный смайл-мув среди огромного хаотичного многообразия? Когда-то я играл на форуме, где смайлы-мувы были отсортированы по смыслу. Например "приветствия", "смех", "танцы", "любовь" и т.п.. Это было удобно и меня это избаловало) И всё бы ничего, но порой бывает сложно отнести смайл к какой-то конкретной категории, т.к. он может отвечать сразу нескольким по смыслу. И тогда я всерьёз задумался о фильтрации информации по тегам. Я нашёл на просторах интернета один достаточно простой, но любопытный скрипт, и адаптировал его под наши ролевые форумы. Использовать его можно не только для фильтрации смайлов, но и, допустим, для темы с занятостью персонажей, хронологии и т.п. - тут уж как позволит фантазия.

    Итак, ближе к делу.

    Предположим, у вас на ролевой есть список персонажей, некоторые из которых имеют 2 и более рода деятельности:

    Taylor Noble, 22y.o. - студентка, няня
    Archie Cooper, 20y.o. - студент, рок-музыкант
    John Fraser, 46y.o. - сержант полиции
    Leon Matthews, 34y.o. - журналист, преподаватель в университете
    Eloise Simmons, 38y.o. - детектив полиции, писательница
    Charlotte Lewis, 51y.o - заведующая хирургическим отделением, преподаватель в университете
    Jocelyn Brosseau, 43y.o. - художница

    Вот такого результата можно добиться (на оформление не обращайте внимания, я не заморачивался):
    [html]<style>

    /* Список персонажей
    -----------------------------------------------*/

    #occup * {margin: 0;}

    #occup {
      position: relative;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      max-width: 750px;
      height: auto;
      margin: 5px 0;
      padding: 10px;
      box-sizing: border-box;
      background-color: linen;
      color: #000;
      font: normal 12px/16px sans-serif;
    }

    #occup span {
      text-align: center;
      font: bold 14px/16px sans-serif;
      text-transform: uppercase;
      padding-bottom: 5px;
      width: 100%;
      display: block;
    }

    #occup > span  {
      font: bold 16px/20px sans-serif;
    }

    #occup a {
      text-decoration: none;
      font-weight: normal;
    }

    #occup .inner {
      display: flex;
      flex-direction: row;
      padding: 0;
      background: none;
      border: none;
    }

    #occup .inner .chars-nav, #occup .inner .all-chars {
      border: 1px solid currentColor;
      margin: 0 5px;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }

    #occup .chars-nav {
      width: 30%;
    }

    #occup .chars-nav a {
      width: fit-content;
      cursor: pointer;
    }

    #occup .chars-nav .current {font-weight: bold;}

    #occup .all-chars {
      width: 70%;
      display: flex;
      flex-direction: column;
    }

    #occup ul {
      list-style: none;
      padding: 0;
    }

    #occup .org {display: none;}

    #occup .org p {font: normal 12px/16px sans-serif;}

    </style>

    <div id="occup">
    <span class="actitle">Список персонажей и занятость</span>
    <div class="inner">
        <!--фильтрация объектов по классу, адаптация by Alex Kolmar-->
        <script type="text/javascript">
        $(function() {
            var newSelection = "";
            $(".chars-nav a").click(function(){
            $(".all-chars").show();
            $(".chars-nav a").removeClass("current");
            $(this).addClass("current");
            newSelection = $(this).attr("rel");
            $(".char").not("."+newSelection).slideUp();
            $("."+newSelection).slideDown();
            });
        });
        </script>
        <div class="chars-nav">
        <span>Сфера деятельности</span>
        <a rel="all" class="current">Все персонажи</a>
        <a rel="edu">Образование</a>
        <a rel="law">Органы правопорядка</a>
        <a rel="med">Здравоохранение</a>
        <a rel="cre">Творчество</a>
        <a rel="other">Прочее</a>
        </div>
        <ul class="all-chars">
        <li class="edu char org"><span>Образование</span>
            <div class="orgdescr">
            <p>Студенты, преподаватели, ученики, профессора - все, кто так или иначе даёт или получает знания в учебных заведениях.</p>
            </div>
        </li>
        <li class="law char org"><span>Органы правопорядка</span>
            <div class="orgdescr">
            <p>Их служба и опасна и трудна! Те, кто стоит на страже закона и порядка.</p>
            </div>
        </li>
        <li class="med char org"><span>Здравоохранение</span>
            <div class="orgdescr">
            <p>Во тьме ночной, при свете дня они борются за жизни, не жалея себя.</p>
            </div>
        </li>
        <li class="cre char org"><span>Творчество</span>
            <div class="orgdescr">
            <p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
            </div>
        </li>
        <li class="edu other all char"><a href="">Taylor Noble, 22y.o.</a> - студентка, няня</li>
        <li class="edu cre all char"><a href="">Archie Cooper, 20y.o.</a> - студент, рок-музыкант</li>
        <li class="law all char"><a href="">John Fraser, 46y.o.</a> - сержант полиции</li>
        <li class="cre edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
        <li class="law cre all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
        <li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
        <li class="cre all char"><a href="">Jocelyn Brosseau, 43y.o.</a> - художница</li>
        </ul>
    </div>
    </div>[/html]

    Собственно, код

    Вставлять туда, куда нужно - если в пост в теме, то в тегах html
    Код:
    <style>
    
    /* Список персонажей
    -----------------------------------------------*/
    
    #occup * {margin: 0;}
    
    #occup {
      position: relative;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      max-width: 900px;
      height: auto;
      margin: 5px auto;
      padding: 10px;
      box-sizing: border-box;
      background-color: linen;
      color: #000;
      font: normal 12px/16px sans-serif;
    }
    
    #occup span {
      text-align: center;
      font: bold 14px/16px sans-serif;
      text-transform: uppercase;
      padding-bottom: 5px;
      width: 100%;
      display: block;
    }
    
    #occup > span  {
      font: bold 16px/20px sans-serif;
    }
    
    #occup a {
      text-decoration: none;
      font-weight: normal;
    }
    
    #occup .inner {
      display: flex;
      flex-direction: row;
      padding: 0;
      background: none;
      border: none;
    }
    
    #occup .inner .chars-nav, #occup .inner .all-chars {
      border: 1px solid currentColor;
      margin: 0 5px;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }
    
    #occup .chars-nav {
      width: 30%;
    }
    
    #occup .chars-nav a {
      width: fit-content;
      cursor: pointer;
    }
    
    #occup .chars-nav .current {font-weight: bold;}
    
    #occup .all-chars {
      width: 70%;
      display: flex;
      flex-direction: column;
      list-style: none;
      padding: 0;
    }
    
    #occup ul {
      list-style: none;
      padding: 0;
    }
    
    #occup .org {display: none;}
    
    #occup .org p {font: normal 12px/16px sans-serif;}
    
    </style>
    
    <div id="occup">
    	<span class="actitle">Список персонажей и занятость</span>
    	<div class="inner">
        <!--фильтрация объектов по классу, адаптация by Alex Kolmar-->
        <script type="text/javascript">
        	$(function() {
            var newSelection = "";
              $(".chars-nav a").click(function(){
            	$(".all-chars").show();
            	$(".chars-nav a").removeClass("current");
            	$(this).addClass("current");
            	newSelection = $(this).attr("rel");
            	$(".char").not("."+newSelection).slideUp();
            	$("."+newSelection).slideDown();
              });
        	});
        </script>
        <div class="chars-nav">
        	<span>Сфера деятельности</span>
        	<a rel="all" class="current">Все персонажи</a>
        	<a rel="edu">Образование</a>
        	<a rel="law">Органы правопорядка</a>
        	<a rel="med">Здравоохранение</a>
        	<a rel="cre">Творчество</a>
        	<a rel="other">Прочее</a>
        </div>
        <ul class="all-chars">
        	<li class="edu char org"><span>Образование</span>
            <div class="orgdescr">
            	<p>Студенты, преподаватели, ученики, профессора - все, кто так или иначе даёт или получает знания в учебных заведениях.</p>
            </div>
        	</li>
        	<li class="law char org"><span>Органы правопорядка</span>
            <div class="orgdescr">
            	<p>Их служба и опасна и трудна! Те, кто стоит на страже закона и порядка.</p>
            </div>
        	</li>
        	<li class="med char org"><span>Здравоохранение</span>
            <div class="orgdescr">
            	<p>Во тьме ночной, при свете дня они борются за жизни, не жалея себя.</p>
            </div>
        	</li>
        	<li class="cre char org"><span>Творчество</span>
            <div class="orgdescr">
            	<p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
            </div>
        	</li>
        	<li class="edu other all char"><a href="">Taylor Noble, 22y.o.</a> - студентка, няня</li>
        	<li class="edu cre all char"><a href="">Archie Cooper, 20y.o.</a> - студент, рок-музыкант</li>
        	<li class="law all char"><a href="">John Fraser, 46y.o.</a> - сержант полиции</li>
        	<li class="cre edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
        	<li class="law cre all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
        	<li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
        	<li class="cre all char"><a href="">Jocelyn Brosseau, 43y.o.</a> - художница</li>
        </ul>
    	</div>
    </div>

    Разбор кода

    1) Функционал - что зачем нужно и как поменять

    1) Нас интересует в первую очередь этот кусок (навигация):

    <div class="chars-nav">
      <span>Сфера деятельности</span>
      <a rel="all" class="current">Все персонажи</a>
      <a rel="edu">Образование</a>
      <a rel="law">Органы правопорядка</a>
      <a rel="med">Здравоохранение</a>
      <a rel="cre">Творчество</a>
      <a rel="other">Прочее</a>
    </div>

    1.1) <a rel="all" class="current">Все персонажи</a> - весь список персонажей. Класс current для отображения по умолчанию, до начала фильтрации.
    1.2) Названия, выделенные красным - классы сфер деятельности. Можно добавить/убрать лишнее или придумать свои названия.

    2) Список персонажей:

    <ul class="all-chars">
        <li class="edu char org"><span>Образование</span>
            <div class="orgdescr">
            <p>Студенты, преподаватели, ученики, профессора - все, кто так или иначе даёт или получает знания в учебных заведениях.</p>
            </div>
        </li>
        <li class="law char org"><span>Органы правопорядка</span>
            <div class="orgdescr">
            <p>Их служба и опасна и трудна! Те, кто стоит на страже закона и порядка.</p>
            </div>
        </li>
        <li class="med char org"><span>Здравоохранение</span>
            <div class="orgdescr">
            <p>Во тьме ночной, при свете дня они борются за жизни, не жалея себя.</p>
            </div>
        </li>
        <li class="cre char org"><span>Творчество</span>
            <div class="orgdescr">
            <p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
            </div>
        </li>
        <li class="edu other all char"><a href="">Taylor Noble, 22y.o.</a> - студентка, няня</li>
        <li class="edu cre all char"><a href="">Archie Cooper, 20y.o.</a> - студент, рок-музыкант</li>
        <li class="law all char"><a href="">John Fraser, 46y.o.</a> - сержант полиции</li>
        <li class="cre edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
        <li class="law cre all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
        <li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
        <li class="cre all char"><a href="">Jocelyn Brosseau, 43y.o.</a> - художница</li>
        </ul>

    2.1) org - класс для описания сферы деятельности. Не отображается в общем списке персонажей, в стиле скрыт. В целом описание сферы опционально, можно полностью снести вот этот кусок:

    Свернутый текст

    <li class="edu char org"><span>Образование</span>
            <div class="orgdescr">
            <p>Студенты, преподаватели, ученики, профессора - все, кто так или иначе даёт или получает знания в учебных заведениях.</p>
            </div>
        </li>
        <li class="law char org"><span>Органы правопорядка</span>
            <div class="orgdescr">
            <p>Их служба и опасна и трудна! Те, кто стоит на страже закона и порядка.</p>
            </div>
        </li>
        <li class="med char org"><span>Здравоохранение</span>
            <div class="orgdescr">
            <p>Во тьме ночной, при свете дня они борются за жизни, не жалея себя.</p>
            </div>
        </li>
        <li class="cre char org"><span>Творчество</span>
            <div class="orgdescr">
            <p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
            </div>
        </li>

    Важно! Если вы всё же хотите сделать описание сфер деятельности, то все сферы должны находить выше списка персонажей! Иначе получится бардак.

    2.2) all - класс, нужный, чтобы персонаж отображался в списке всех персонажей. У описания сфер деятельности нет этого класса, чтобы они отображались только непосредственно в своём списке.

    2.3) char - класс, нужный для обозначения персонажа, что это именно действующий персонаж. Если вы хотите добавить в список персонажей акционных персонажей, помимо действющих, им можно добавить свой класс, а классом char объединить всех действующих персонажей.

    2.4) edu law med cre other - классы, выделенные красным - сферы деятельности. Должны совпадать со списком в навигации. Добавляя в список персонажей очередного персонажа, можно приписывать ему сколько угодно подходящих классов:

    <li class="класс1 класс2 класс3 all char"><a href="">Имя</a></li>

    2) Стилевая часть - как оформить

    Итак, обо всём по порядку.

    1)

    #occup * {margin: 0;}

    Эта часть обнуляет отступы от краёв всех элементов внутри указанного id. Необязательно, если вам не нужно - можете вообще убрать и указать отступы конкретно для нужного селектора.

    2)

    #occup {
      position: relative;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      max-width: 900px;
      height: auto;
      margin: 5px auto;
      padding: 10px;
      box-sizing: border-box;
      background-color: linen;
      color: #000;
      font: normal 12px/16px sans-serif;
    }

    Селектор контейнера с фильтром - в данном случае общие настройки контейнера с занятостью персонажей - размер, позицинирование, настройки цвета и шрифта и т.п.

    3)

    #occup span {
      text-align: center;
      font: bold 14px/16px sans-serif;
      text-transform: uppercase;
      padding-bottom: 5px;
      width: 100%;
      display: block;
    }

    #occup > span  {
      font: bold 16px/20px sans-serif;
    }

    Все заголовки в контейнере занятости, а второй селектор - основной заголовок.

    4)

    #occup a {
      text-decoration: none;
      font-weight: normal;
    }

    Общий стиль ссылок внутри контейнера с фильтром. Если какие-то настройки не отображаются, то можно прописать как .punbb #occup a или добавить !important к нужной строке.

    5)

    #occup .inner {
      display: flex;
      flex-direction: row;
    }

    Внутренний контейнер, содержащий в себе контейнер с навигацией по сферам и контейнер со списком персонажей.

    6)

    #occup .inner .chars-nav, #occup .inner .all-chars {
      border: 1px solid currentColor;
      margin: 0 5px;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }

    #occup .chars-nav {
      width: 30%;
    }

    #occup .all-chars {
      width: 70%;
      display: flex;
      flex-direction: column;
    }

    Собственно, 2 внутренних контейнера - .chars-nav  - список сфер деятельности, .all-chars - список персонажей. Первый селектор - общие настройки, второй и третий - отдельные для каждого. В данном случае у них разная ширина.

    6)

    #occup .chars-nav a {
      width: fit-content;
      cursor: pointer;
    }

    Настройки ссылок в навигации по сферам. Необязательный в целом параметр.

    7)

    #occup .chars-nav .current {font-weight: bold;}

    Выделение активного фильтра в навигации по сферам деятельности. В данном случае просто ссылка выделена жирным шрифтом. Можно добавлять свои настройки - цвет, размер и т.п.

    8)

    #occup ul {
      list-style: none;
      padding: 0;
    }

    То же, что и #occup .chars-nav, но если у вас будет не ul, а div, то надобности в этом куске кода не будет. Данный кусок убирает точки и отступы в элементах списка (в принципе, те же настройки уже есть в стиле форумов).

    9)

    #occup .org {display: none;}

    Сокрытие описания каждой из сфер деятельности из общего списка персонажей. Если у вас в принципе не планируется описаний сфер деятельности, то этот кусок не нужен.

    10)

    #occup .org p {font: normal 12px/16px sans-serif;}

    Настройки шрифта в описании сфер деятельности. Тоже опционально.

    3) Скриптовая часть - для самых любопытных

    Сам скрипт фильтра я нашёл здесь: тык. Это тоже не первоисточник, т.к. автор статьи перевёл её с иностранного языка. А вот первоисточник.
    Меня не устраивали некоторые эффекты анимации и ещё некоторые детали, поэтому я модернизировал скрипт под свои нужды.

    Авторская версия

    <script type="text/javascript">
      $(function() {
        var newSelection = "";
        $("#flavor-nav a").click(function(){
          $("#all-flavors").fadeTo(200, 0.10);
          $("#flavor-nav a").removeClass("current");
          $(this).addClass("current");
          newSelection = $(this).attr("rel");
          $(".flavor").not("."+newSelection).slideUp();
          $("."+newSelection).slideDown();
          $("#all-flavors").fadeTo(600, 1);
        });
      });
    </script>

    Моя версия

    <script type="text/javascript">
      $(function() {
        var newSelection = "";
        $(".chars-nav a").click(function(){
          $(".all-chars").show();
          $(".chars-nav a").removeClass("current");
          $(this).addClass("current");
          newSelection = $(this).attr("rel");
          $(".char").not("."+newSelection).slideUp();
          $("."+newSelection).slideDown();
        });
      });
    </script>

    Меня в первую очередь не устраивало, что при выборе того или иного фильтра эффект угасания применяется ко всей выборке подходящих элементов. Поэтому я убрал эту строчку (красным). И, соответственно, заменил fadeTo(200, 0.10) на просто show().
    Вообще говоря, такие методы, как fadeTo или slideUp хорошо применять для плавной анимации. В данном случае у меня используется slideUp и slideDown при переключении фильтров, но если вам не нужна анимация, то можно заменить на hide и show. Вот так:

    <script type="text/javascript">
      $(function() {
        var newSelection = "";
        $(".chars-nav a").click(function(){
          $(".all-chars").show();
          $(".chars-nav a").removeClass("current");
          $(this).addClass("current");
          newSelection = $(this).attr("rel");
          $(".char").not("."+newSelection).hide();
          $("."+newSelection).show();
        });
      });
    </script>

    Важно! На форумах в коде уже есть добавленная библиотека jQuery, нужная для работы данного скрипта. Но если вы соберётесь использовать данный скрипт где-то вне форумов, то убедитесь, что библиотека jQuery установлена, либо добавьте вот такую строчку перед скриптом:

    Код:
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

    Чего не может скрипт: нельзя вывести список персонажей из более, чем одной сферы одновременно. Либо все персонажи, либо из какой-либо одной сферы.

    P.S. не знаю, когда, но когда-нибудь я выкачу пример с использованием данного фильтра для смайликов под формой ответа. Основы по второму разу расписывать не буду, только нюансы, которые потребуются для реализации скрипта в этой роли.

    И да, если вам понравилась эта идея со скриптом, но вы не разобрались, как её можно применить и настроить, я с удовольствием помогу вам с этим за скромное вознаграждение :з

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +5

    4

    Покумекал не оч давно над шаблонами инсты. Рисовал сам в фигме читай с нуля по примерам заказчика в ТЗ. Иконки взял из интернета, но подумываю как-нибудь перерисовать сам.

    https://i.imgur.com/UGfyfZy.png
    https://i.imgur.com/7uKWTWG.png

    https://i.imgur.com/E0MR4kO.pnghttps://i.imgur.com/WZiuJxI.png

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +2

    5

    Друзья! Спешу сообщить, что у меня появились собственные баннеры.
    Поэтому если хотите отблагодарить меня за мою работу или просто порекомендовать мои услуги, можете добавить его к себе на форум в раздел баннеров. Это исключительно добровольно :з Но может, когда-нибудь я придумаю как организовать взаимный обмен баннерами. Пока не знаю, как т_т
    P.S. Ссылка в баннере ведёт на эту тему.

    Анимация
    https://i.imgur.com/Eo5bp9I.gif

    Код:
    <a href="https://urchoice.su/viewtopic.php?id=58409" target="_blank" title="вёрстка, дизайн, обучение от бродяги"><img src="https://i.imgur.com/Eo5bp9I.gif"></a>

    Статика
    https://i.imgur.com/VblrKZk.png

    Код:
    <a href="https://urchoice.su/viewtopic.php?id=58409" target="_blank" title="вёрстка, дизайн, обучение от бродяги"><img src="https://i.imgur.com/VblrKZk.png"></a>
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    6

    Внезапно сделал фулл дизайн О_о Приятель попросил по-братски. Не думал, что что-то получится, но получилось :з Правда, опять в синих тонах. Ну что делать - люблю я синий!
    Скоро начнут шутить: "О, дизайн синий? Да это бродягин!" XD
    P.S. Нет, диз не по DC, хоть некоторые картинки с персонажами оттуда. Просто у меня только они были под рукой XD Предполагается, что авторка, sci-fi.

    https://i.imgur.com/dbnny0O.jpg

    И графика на минималках XD к дизайну
    https://i.imgur.com/YRKzyvR.png https://i.imgur.com/tUkyim6.png
    https://i.imgur.com/HAeHILJ.png https://i.imgur.com/jfoh7eO.gif

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +2

    7

    Автоматическая дата в футере сайта

    Всем добра! Замечали ли вы, что в футере сайтов в разделе копирайтов нередко можно видеть год создания сайта, либо несколько лет - с момента создания, до текущего?

    А знаете ли вы, что год(ы) можно задать автоматически, чтобы не бежать к компьютеру в 00:00 1 января и не менять дату? :D

    Есть простенький скрипт, точнее два его варианта.

    Первый, где указывается только текущий год:

    Код:
    <script>document.write(new Date().getFullYear());</script>

    Второй, где указываются годы, начиная с создания сайта и по нынешний:

    Код:
    2020<script>new Date().getFullYear()>2020&&document.write("-"+new Date().getFullYear());</script>

    Пояснение

    2020<script>new Date().getFullYear()>2020&&document.write("-"+new Date().getFullYear());</script>

    Зелёным - год создания сайта дважды. Если год создания совпадает с текущим годом, то будет отображаться не 2023-2023, а только один год, нынешний, так что можно заблаговременно поставить такой код.

    Для удобства блок копирайта целиком, в html-низ:

    Код:
    <div class="copyright"><style>.copyright{text-align: center;}</style>
    Copyright &copy; Design by <a href="ссылка" target="_blank">имя_автора</a>, 2023<script>new Date().getFullYear()>2023&&document.write("-"+new Date().getFullYear());</script>. All rights reserved.
    </div>
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    8

    Вёрстка макета в фигме для ролевой sold out ☺️
    Вёрстка макета форума включала в себя 12 html для оргтем + личную страницу (минипрофиль, инфоблок).

    https://i.imgur.com/13UMV66.jpg

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    9

    Вёрстка мобильной версии для ролевой Вентанна

    https://i.imgur.com/77oWF4n.jpg

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +3

    10

    Обновка для sold out подъехала! Дизайн не мой, вёрстка моя :з

    https://i.imgur.com/WhmuJ8i.jpg

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    11

    Дизайн для SW Medley.
    Адаптивный дизайн - отображение для всех видов устройств: персонального компьютера, планшета, мобильного телефона;
    Меняющаяся картинка в шапке + меняющееся окно нужных в шапке (Ротатор произвольного контента);
    Адаптация имеющихся на форуме скриптов - маски профиля, оформление ЛЗ со скриптом всплывающего окна на мобильной версии;
    Редизайн хронологии и интерактивной карты с имеющимися там скриптами.

    https://i.imgur.com/lPaI166.jpg

    https://i.imgur.com/Bf03ZPg.jpg

    https://i.imgur.com/9FhzRdt.jpg

    https://i.imgur.com/Qa2nCuK.jpg

    https://i.imgur.com/OK7gs7i.jpg

    Анимация
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0

    12

    Вёрстка дизайна (автор: Moju) для ролевой по мотивам Гарри Поттера - Аркантос.
    Макет дизайна был создан в фигме.

    https://i.imgur.com/Z50FzkL.jpg

    Анимация
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +1

    13

    Вёрстка дизайна (автор: kumpelstiltskin) для форумной ролевой игры Lesser Evil.
    Макет дизайна создан в Figma.
    Особенности:

    • Меняющаяся картинка в шапке (скрипт ротатора контента);

    • Меняющаяся шапка по наведению курсора (реализована простым hover-эффектом);

    • Меняющиеся текстовые блоки по бокам в шапке (скрипт ротатора контента);

    • 2 раскрывающихся менюшки в шапке (скрипт от Вещего Духа);

    • 2 всплывающих подсказки с картинками, описанием обязанностей администраторов и их контактами в шапке (реализовано с помощью CSS);

    • Кастомные иконки над формой ответа.

    https://i.imgur.com/dXXQkav.jpg

    Анимация
    Подпись автора

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    +2

    14

    Вёрстка дизайна (автор макета: Moju) для форумной ролевой Kindred Souls.
    Макет дизайна был создан в фигме.

    http://i.imgur.com/NUyzAB5l.jpg

    Ещё скрины
    Анимация

    Вёрстка дизайна (автор макета: кодрэд) для форумной ролевой Digest.

    http://i.imgur.com/wZVbXful.jpg

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

    https://forumupload.ru/uploads/0018/1e/e2/2/295990.png https://i.imgur.com/0e7EYng.png
    Time to burn

    0


    Вы здесь » Live Your Life » Платные услуги » Дизайны, адаптив и техподдержка от бродяги


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