• Live Your Life

    Объявление

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

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

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


    Вы здесь » 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-шаблоны ] Шиповничья алхимия


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