ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

☕ 7 вечеров с magia

Дата: с 27 февраля по 5 марта;
Хотите узнать, что таит в себе magia?
Присоединяйтесь к обсуждению и подготовьте вопросы!

Задать вопрос

ДОРАБОТАЕМ ВМЕСТЕ СКРИПТ ПЕРВОАПРЕЛЬСКИХ РОЗЫГРЫШЕЙ

Акция продлится до 1 апреля;
Поддержите нашего разработчика в улучшении его скрипта первоапрельских розыгрышей.
Мы отблагодарим баллами, как за предоставление идей новых шуток, так и за помощь в их реализации.

Принять участие

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



Вёрстка и дизайн от бродяги

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

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=50">
        <style>#portfolio {margin: 5px 0;}</style>
<title>Вёрстка от бродяги</title>
</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">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-7 дней.
            </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-14 дней.
            </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">Дизайн для <a href="http://pinotgrigio.rusff.me/" target="_blank">Pinot Grigio</a>. Мой первый полный дизайн за 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-формление двух тем с интерактивными элементами для фан-клуба <a href="https://domkyznechik.ru/">Загадочный дом "Кузнечик"</a>. Дизайн тем создала <a href="http://imagiart.ru/profile.php?id=5863" target="_blank">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>Дизайнер макетов: <a href="http://imagiart.ru/profile.php?id=9174" target="_blank">третий рим</a>, форум: <a href="http://breakdown.rusff.me/" target="_blank">ссылка</a>.</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>Дизайнер макетов: <a>Schmidt</a>, форум: <a href="http://revivalnarutoworld.1bb.ru/" target="_blank">ссылка</a>.</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>Дизайнер: <a href="http://imagiart.ru/profile.php?id=8943" target="_blank">Вещий Дух</a>, форум: <a href="https://staffage.rusff.me" target="_blank">ссылка</a>.</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>???</a>;<br>
                форум: <a href="http://1984.rolbb.me/" target="_blank">ссылка</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>дизайнер: <a>Ray</a>;<br>
                форум: <a href="http://smgg.igraemroli.ru/" target="_blank">ссылка</a>.</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>дизайнер: <a href="http://imagiart.ru/profile.php?id=5863" target="_blank">As</a>;<br>
                форум: <a href="https://brightsofseconds.rolebb.ru/" target="_blank">ссылка</a>.</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>дизайнер: <a href="http://imagiart.ru/profile.php?id=1270" target="_blank">.angvar</a>;<br>
                форум: <a href="http://blindfaith.ru/" target="_blank">ссылка</a>.</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>дизайнер: <a href="http://imagiart.ru/profile.php?id=11172" target="_blank">Kiros56488123</a>;<br>
                форум: <a href="http://codevein.mybb.ru/" target="_blank">ссылка</a>.</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>дизайнер: <a href="http://imagiart.ru/profile.php?id=3685" target="_blank">Лорд Доминатор</a>;<br>
                форум: <a href="https://manunkind.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>Tyki Mikk (?)</a>;<br>
                форум: <a>не открылся, кажется</a>.</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>дизайнер: <a>falconsama</a>;<br>
                форум: <a href="http://bluueming.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>Ray</a>;<br>
                форум: <a href="https://smrestart.rolevaya.com/" target="_blank">ссылка</a>.</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>дизайнер: <a>Gatto</a>;<br>
                форум: <a href="http://imaginacion.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>сатаня</a>;<br>
                форум: <a href="https://artishock.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a href="http://imagiart.ru/profile.php?id=7894" target="_blank">ocean</a>;<br>
                форум: <a href="https://metavallomentov.1bb.ru/" target="_blank">ссылка</a>.</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>дизайнер: <a>Gatto</a>;<br>
                форум: <a href="https://settestelle.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>Ray</a>;<br>
                форум: <a href="https://smshatteredearth.f-rpg.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>???</a>;<br>
                форум: <a href="https://binarycode.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>сатаня</a>;<br>
                форум: <a href="https://ahthattest.rusff.me/" target="_blank">ссылка</a>.</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>дизайнер: <a>сатаня</a>;<br>
                форум: <a href="https://apparatehere.rusff.me/" target="_blank">ссылка</a>.</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="">ссылка</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]

Отредактировано бродяга (27.11.23 18:04)

+9

2

Как и планировалось, сделал ребятам на днях интерактивную карту) Вместо тысячи слов - минутный видосик. Ну или можно просто сходить по ссылке и потыкаться в режиме реального времени XD
P.S. Графика не моя (картинка галактики то бишь, все эти уголочки на окнах, рамочки и т.п.), а тамошнего дизайнера. Мой только код самой карты, включение/выключение слоёв и т.п. - то бишь её интерактивность.

Отредактировано бродяга (21.01.21 17:25)

+7

3

#p146237,бродяга написал(а):

Как и планировалось, сделал ребятам на днях интерактивную карту) Вместо тысячи слов - минутный видосик. Ну или можно просто сходить по ссылке и потыкаться в режиме реального времени XD

Как красиво ... smalimg

+3

4

#p146243,Алгол написал(а):

Как красиво ... https://i.imgur.com/vT4cGI0.png

Ну, картинка галактики и разное оформление окон - это заслуга дизайнера той ролевой, я всего лишь на код поставил и более-менее воплотил хотелки ребят в жизнь))
Да, надо чтоль пометочку сделать об этом.

+1

5

Красивая штука! Самое то для ролевых с фэнтезийными мирами!

+2

6

Итак, я, наконец, закончил свой первый адаптивный дизайн. Эта была довольно долгая и кропотливая работа, поскольку я был вынужден делать длительные перерывы. Но, наверное, первый опыт всегда самый сложный.
Дизайн полностью мой - и макет, и вёрстка. Конечно, едва ли он подходит по атмосфере для ролевой по мотивам комиксов, но наша с коллегами задумка изначально была несколько шире привычного многим нуарного Готэма. Более того, меня вдохновила игра Injustice 2, поэтому цветовая гамма и дизайн некоторых элементов позаимствован оттуда. Многие элементы дизайна (кроме, разумеется, картинок в шапке, аватаров и т.п.) - не растровые изображения (jpg, png), а либо отрисованы посредством css, либо являются векторной графикой (svg), которую я отрисовывал в adobe illustrator. Выбор в пользу вектора и кода я сделал для удобства масштабирования и ускорения загрузки страниц. Иконки в навигации и форме ответа - иконочный шрифт.
Помимо самого дизайна есть несколько хтмл-тем - гостевая, новости, список персонажей и мини-профиль с достижениями. Они также адаптивны.
P.S. Я не могу утверждать, что нигде не продолбался, т.к. среди игроков есть те, у кого не всё отображается на 100% корректно. Но я работаю над этим) Дизайн вживую можно посмотреть здесь: тык.

https://i.imgur.com/zgnVHdC.png

Мобильный вид

Ну и графика - аватарки, баннеры и реклама. Получилось так себе, но у меня последний год что-то нет вдохновения на фотошоп, я больше по вёрстке.

https://forumupload.ru/uploads/0018/1e/e2/2/495228.png https://forumupload.ru/uploads/0018/1e/e2/2/836215.gif
https://forumupload.ru/uploads/0018/1e/e2/2/804715.png https://forumstatic.ru/files/0018/1e/e2/98366.png https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
https://forumupload.ru/uploads/0018/1e/e2/2/977064.png

Видос для наглядности

+9

7

:cool: Круть!

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

  :flag:

+1

8

бродяга
Ты большой молодец, это достойная работа!  smalimg

+2

9

#p157612,Deff написал(а):

Скрытый текст

О, это тема, спасибо :ззззззззз

Automation Baby
Спасибо smalimg

+1

10

Очень красиво и со вкусом!
Шрифты хорошо читаются, все продумано и мобильный дизайн! https://forumupload.ru/uploads/001a/b7/49/2/102081.gif   :cool:

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляй ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удали символы: "http://", "https://" или "www."
font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens
format_align_left format_align_center format_align_right list table_view
link add_photo_alternate ondemand_video mood
content_cut lock_open format_quote code
horizontal_rule anchor live_help emoji_symbols library_add
Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms
10px 12px 14px 16px 18px 20px 22px
  • Точками
  • Кружочками
  • Квадратами
  • Цифрами
  • Римскими цифрами
  • Без обозначений
Многострочный пункт списка
© ® « » ¢ £
Заголовок Автосжатие больших картинок Скрыть от гостей Ссылка «скачать» Имя читателя Добавлено спустя… Надстрочный текст Подстрочный текст Блок HTML Анкета: разделитель текста Анкета: закрыть ответы

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],
Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],
Красный пост[block="saledpost"]saledpost[/block],
Синий пост[block="forsalepost"]forsalepost[/block],
Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],
Общее портфолио FD[block="FDteam-portf"]FDteam-portf[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]
Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]
Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]
Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]
Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)
Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,



Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)

Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)
Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,



Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)
Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,



Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)
Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]


Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]


Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]


Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]


Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]


Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]


Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]


Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]


Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]


Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]


Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]


Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]


Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]