[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]
Примеры готовых дизайнов
- Подпись автора
