Live Your Life

Объявление

Новости
Сервис Наблюдаются проблемы с доступом к mybb. Причины уточняются.
Конкурс Вторая часть конкурса. Раскрываем тайны персонажа.
Конкурс Выбери персонажа.
Новости Минорные изменения.
Сервис Последствия DDoS-атаки устранены. Форумы должны заработать в прежнем режиме.
Сервис На mybb ведется DDoS-атака. Форумы могут быть недоступны какое-то время.
Новости Новый форум для околоролевых проектов.
Сервис Страсти по РКН.
Сервис Новая опция: регистрация без подтверждения по email.
Сервис Блокировки на сервисе.
Скрипты WYSI - визуальный редактор сообщений. Тестирование.
Скрипты Обновление скрипта HTML с доступом по группам
Интересное
Конкурс Конкурс персонажей. Второй этап Расскажи о них подробнее

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

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


Вы здесь » Live Your Life » Платные услуги » [x] [ html-шаблоны ] Шиповничья алхимия


[x] [ html-шаблоны ] Шиповничья алхимия

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

1

[html]<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0012/ee/e9/63323.css" />

<center><div class="novost"><div class="novh1">« Да, зажрался »</div><div class="novh2">обязательная плашка-предупреждение</div></div>  <!-- div class="novost"><div class="novh1">« Отпуск »</div><div class="novh2">Потому что иногда надо</div></div--></center>
<br>
<div id="vultbase"><div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="domper" checked>
  <label for="tab1">Кто здесь?</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="domplot">
  <label for="tab2">Порядок работы</label>
  <!-- Tab 3 -->
  <input type="radio" name="tabset" id="tab3" aria-controls="domeps">
  <label for="tab3">Сколько?</label>
    <!-- Tab 4 -->
  <input type="radio" name="tabset" id="tab4" aria-controls="domsklad">
  <label for="tab4">Как забрать</label>
      <!-- Tab 5 -->
  <input type="radio" name="tabset" id="tab5" aria-controls="domship">
  <label for="tab5">HTML-шаблоны</label>
 
<div class="tab-panels">
   <section id="domper" class="tab-panel">

Привет! Это Шиповник / Виля / Wilhelm.<br>Связаться со мной можно через ЛС или telegram: @VillerA
<div class="vulth1">Что я делаю</div>
Создаю несколько однотипные дизайны, полные рюшечек и завитушек. Пожалуйста, посмотрите примеры и решите, нужно ли вам такое.
Экспериментирую редко. Сам скрипты не пишу, использую общедоступные с техподдержки. Мобильная версия? - делаю!

<div class="vulth1">Немного условий</div>
Дизайн - это <b>не гарант</b> притока игроков!<br><br>
Не беру предоплаты, но если вы пропадаете или отказываетесь от уже разработанного дизайна, то я оставляю за собой право использовать готовую работу по своему усмотрению (с частичным изменением, если использовано что-то специфичное): разобрать на части, доработать и выставить на продажу.<br><br>
Стараюсь использовать стоковые изображения и личные зарисовки. Многострадальные игрушки от "Алавар" я не режу на части, т.е. у меня все попроще в визуальном плане (:<br><br>
Спокойно вносите изменения в уже приобретенный дизайн, но не используйте мою структуру для коммерческих работ. Вам действительно нужны не свои, а чужие ошибки в коде?

   </section>
   <section id="domplot" class="tab-panel">
     <div class="vu-row">
<!--- НАБРОСОК --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637335/53cea2a4/30057512.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637261/e847e5d1/30057505.jpg"></a>
<em>  I.  Набросок</em>
<i>быстрый эскиз</i><br><br>
Ищем общую форму дизайна, обсуждаем концепт, определяемся с ключевой информацией. Набросок может быть разной степени детализации.
</div></div>

<!--- ФОРМЫ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637530/60c07f10/30057534.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637492/6936b270/30057530.jpg"></a>
<em>  II.  Формы</em>
<i>Первые шаги в верстке</i><br><br>
Набросок обретает форму. Примеряем цвета, определяемся с размерами и окраской элементов.
</div></div>

<!--- ТЕКСТУРЫ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637563/45af102a/30057537.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637627/6670b4d9/30057552.jpg"></a>
<em>  III.  Текстура</em>
<i>базовый дизайн</i><br><br>
Формы обретают текстуру. Определяемся с основными полотнами дизайна - удобно ли читать текст на подложке, не слишком ли контрастен фон и пр.
</div></div>

<!--- ДЕТАЛИ --->
<div class="vu-col"><div class="vu-item">
<a href="http://images.vfl.ru/ii/1585637712/ccbf4bd3/30057564.jpg"><img class="domov" src="http://images.vfl.ru/ii/1585637686/55c4a19b/30057562.jpg"></a>
<em>  IV.  Детали</em>
<i>узоры, украшения, дополнительные элементы</i><br><br>
Украшаем дизайн. Завитки, блики, дополнительные изображения и элементы - все это располагается и шлифуется на финальном этапе.
</div></div>
     </div>
Но порой все может выглядеть и так: <a href="https://i.imgur.com/ZR9kbTr.gif">< gif ></a>
   </section>
   <section id="domeps" class="tab-panel" style="text-align:left;">
<div class="vulth1" style="padding-top:10px;">По цене</a></div>
<table><tr><td width=20%><b>Стандарт</b></td><td>2600 р. Классический набор. Html-оформление для заглавных сообщений обсуждается отдельно.
<br><br></td></tr><tr><td>
<b>Тестовый</b></td><td>
1000 р. Самый простой дизайн без детальной проработки для форумов-тестов.
</td></tr></table>
Перевод на карту альфа-банка, Ю-money, PayPal. Напоминаю, что при переводе может взиматься комиссия.
<div class="vulth1">По времени</a></div>
В среднем - <b>2,5 недели</b>. Сроки могут сдвигаться в ту или иную сторону, но если вы не потеряетесь, то будете об этом знать.
   </section>
   <section id="domsklad" class="tab-panel">
<div class="vulth1" style="padding-top:10px;">ВАЖНО</div>
Я практически никогда не высылаю весь макет в PSD или PDF-формате. Только формы для некоторых элементов, если без них не обойтись.
<div class="vulth1">"Под ключ"</a></div>
Мне выдается временный аккаунт с правами администратора и я самостоятельно устанавливаю дизайн, наполняю форум нужными скриптами и осуществляю первичную настройку.
<div class="vulth1">Просто отдайте нам код</a></div>
Я высылаю вам в ЛС или на почту архив с кодами CSS, HTML, картинками, скриптами и небольшими рекомендациями по установке.
   </section>

   <section id="domship" class="tab-panel">
<div id="shipshapk">
  <div class="shiblk">
    <a href="https://i.ibb.co/R76HbKc/shipovnik-chrono1.jpg"><shimg style="background-image:url(https://i.ibb.co/R76HbKc/shipovnik-chrono1.jpg);"></shimg></a>
    <ship> <a href="/viewtopic.php?pid=2042202#p2042202">Хронология 1</a><br>
     небольшие блоки вдоль вертикальной оси</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/3m0Qf6y/shipovnik-chrono2.jpg"><shimg style="background-image:url(https://i.ibb.co/3m0Qf6y/shipovnik-chrono2.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2055466#p2055466">Хронология 2</a><br>
    Еще одна хронология, с картинкой сбоку</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/g9f3nN9/shipovnik-chrono4.jpg"><shimg style="background-image:url(https://i.ibb.co/g9f3nN9/shipovnik-chrono4.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2109459#p2109459">Хронология 3</a><br>
    С боковыми индикаторами</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/NpNdSC3/shipovnik-chrono5.jpg"><shimg style="background-image:url(https://i.ibb.co/NpNdSC3/shipovnik-chrono5.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2140820#p2140820">Хронология 4</a><br>
    Лента с выделенной шапкой-разделителем</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/1TzhDd8/shipovnik-chrono6.jpg"><shimg style="background-image:url(https://i.ibb.co/1TzhDd8/shipovnik-chrono6.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2164008#p2164008">Хронология 5</a><br>
    Самый простой список "активный/завершенный"</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/Z1SjRbz/shipovnik-char01.jpg"><shimg style="background-image:url(https://i.ibb.co/Z1SjRbz/shipovnik-char01.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2052476#p2052476">Relations</a><br>
    Табличка для заполнения развернутых "отношений"</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/qR6b30w/shipovnik-char02.jpg"><shimg style="background-image:url(https://i.ibb.co/qR6b30w/shipovnik-char02.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2066770#p2066770">Relations [circle]</a><br>
    Табличка для заполнения развернутых "отношений". 2 варианта: со столбцами и строками.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/0CM2HRf/shipovnik-char04.jpg"><shimg style="background-image:url(https://i.ibb.co/0CM2HRf/shipovnik-char04.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2071654#p2071654">Relations [rectangle]</a><br>
    Табличка для заполнения "отношений" или списка персонажей.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/b371BQ1/shipovnik-char05.jpg"><shimg style="background-image:url(https://i.ibb.co/b371BQ1/shipovnik-char05.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2075661#p2075661">Relations [photo]</a><br>
    Табличка для заполнения "отношений" или списка персонажей.</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/fFzSkZj/shipovnik-char06.jpg"><shimg style="background-image:url(https://i.ibb.co/fFzSkZj/shipovnik-char06.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2099558#p2099558">Relations [Cat!]</a><br>
    Табличка с усиками</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/SNSg6PD/shipovnik-char07.jpg"><shimg style="background-image:url(https://i.ibb.co/SNSg6PD/shipovnik-char07.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2105055#p2105055">Relations [Color Space]</a><br>
    Цветные блоки с текстом внутри</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/tmyBG65/shipovnik-epic01.jpg"><shimg style="background-image:url(https://i.ibb.co/tmyBG65/shipovnik-epic01.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042203#p2042203">Phobia</a><br>
    Простой черно-белый блок "описание + название"
    </ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/sPRJc57/shipovnik-epic02.jpg"><shimg style="background-image:url(https://i.ibb.co/sPRJc57/shipovnik-epic02.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042204#p2042204">Twilight</a><br>
    Блок с ромбом посередине</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/LJHzzS2/shipovnik-epic05.jpg"><shimg style="background-image:url(https://i.ibb.co/LJHzzS2/shipovnik-epic05.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042209#p2042209">Lighthouse</a><br>
    Шаблон с выпадающим сверху "флагом" при наведении</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/xHvzZFp/shipovnik-epic03.jpg"><shimg style="background-image:url(https://i.ibb.co/xHvzZFp/shipovnik-epic03.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042205#p2042205">Not Broken</a><br>
    Небольшая карточка эпизода с неоновым заголовком и обрезанной иллюстрацией</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/XykzVck/shipovnik-epic04.jpg"><shimg style="background-image:url(https://i.ibb.co/XykzVck/shipovnik-epic04.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042206#p2042206">Sky Map</a><br>
    Околофэнтезийная карточка персонажа с обрезанным портретом</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/7231w97/shipovnik-epic06.jpg"><shimg style="background-image:url(https://i.ibb.co/7231w97/shipovnik-epic06.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042211#p2042211">Fragile</a><br>
    Блок с круглыми иконками, увеличивающимися при наведении</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.ibb.co/q5t0dBb/shipovnik-epic07.jpg"><shimg style="background-image:url(https://i.ibb.co/q5t0dBb/shipovnik-epic07.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2042212#p2042212">Silencio</a><br>
    Простой шаблон с названием внизу и обрезанной иллюстрацией</ship>
  </div>
  <div class="shiblk">
    <a href="https://i.imgur.com/U2NLEe0.jpg"><shimg style="background-image:url(https://i.imgur.com/U2NLEe0.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1866268#p1866268">Tutorial: рамка</a><br>
    Как нарисовать простую рамку для форума</ship>
  </div>
  <div class="shiblk">
    <a href="https://images.vfl.ru/ii/1557147956/be14dbde/26437746.jpg"><shimg style="background-image:url(https://images.vfl.ru/ii/1557147956/be1 … 437746.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1820327#p1820327">Дизайн: Черепушка</a><br>
    Бесплатный простенький дизайн для тестового форума. Уже стоит на кодах</ship>
  </div>
  <div class="shiblk">
    <a href="https://imgur.com/I7cO61V"><shimg style="background-image:url(https://i.ibb.co/pX4fSfq/ship-shapka.jpg);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=1950806#p1950806">Tutorial: Дизайн</a><br>
    Бесплатный дизайн и разбор CSS-кода для самостоятельной сборки.</ship>
  </div>
  <div class="shiblk">
    <a href=""><shimg style="background-image:url(https://forumstatic.ru/files/0012/ee/e9/24096.webp);"></shimg></a>
    <ship><a href="/viewtopic.php?pid=2154956#p2154956">Дизайн: Rentober</a><br>
    Бесплатный дизайн околомистичной направленности.</ship>
  </div>

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

Примеры готовых дизайнов

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

ролевые следы   ♥   орхидея съела не всех   ♥   шаблоны

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

+23

21


ХРОНОЛОГИЯ [5]
html-шаблон для хронологии и иных списков

https://i.ibb.co/1TzhDd8/shipovnik-chrono6.jpg

  • Все базовые настройки в начале шаблона.

  • Без заголовков и разделителей, просто список эпизодов.

Здесь у нас есть теги для активного и завершенного эпизодов - с разным цветом кружков-маркеров.

Активный эпизод

<div class="ch1">

Завершенный эпизод

<div class="ch1 close">

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

Код:
<div class="ch7">Основная игра:</div>
  • Отступы делать через <br>

Взять код
Подпись автора

ролевые следы   ♥   орхидея съела не всех   ♥   шаблоны

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

+11


Вы здесь » Live Your Life » Платные услуги » [x] [ html-шаблоны ] Шиповничья алхимия


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