[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="saled">
<a class="tip" id="cover" title="Дизайн для ролевого форума и мобильная версия">
<div id="icon"></div>
<img src="https://forumupload.ru/uploads/0007/e3/f7/2/406316.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 15.11.2020<br>
Автор: <a href="https://forumd.ru/profile.php?id=2" target="_blank">Герда</a> & <a href="https://forumd.ru/profile.php?id=6784" target="_blank">Bruksa</a><br>
Платформа: RusFF<br>
Стоимость: 5900р<br>
Описание: Дизайн для ролевого форума и мобильная версия<br>
<a id="store" href="https://rusmagic.rusff.me" target="_blank">Сайт заказчика</a>
</div>
</div>
<div id="port-block2" class="saled">
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Адптивность: главная страница"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/16370.gif" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Адптивность: топиклист"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/909797.gif" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Адптивность: топики, профили, форма ответа"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/378419.gif" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Планшеты, iPad-ы: главная страница"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/989625.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Планшеты, iPad-ы: топиклист"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/178805.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Планшеты, iPad-ы: топики, профили, форма ответа"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/286571.jpg" class="postimg"></a></section>
<a class="tip" title="Широкоформатные мобильные: главная страница"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/500321.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Широкоформатные мобильные: топиклист"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/204470.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Широкоформатные мобильные: топики"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/257027.jpg" class="postimg"></a></section>
<a class="tip" title="Широкоформатные мобильные: профили"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/682464.jpg" class="postimg"></a></section>
<a class="tip" title="Мобильные устройства 375px: главная страница"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/619192.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильные устройства 375px: топиклист"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/350158.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Мобильные устройства 375px: топики, профили"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/912442.jpg" class="postimg"></a></section>
<a class="tip" title="Мобильные устройства 375px: форма ответа"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/810512.jpg" class="postimg"></a></section>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #e63737;
background-color: rgba(230,55,55,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(230,55,55,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(230,55,55,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(230,55,55,0.8); color: #fff !important;}
</style>[/html]
ГРАФИКА
Так как макета не было, была сделана реконструкция макета: из картинок дизайна был заново воссоздан полный макет, со всеми текстурами и элементами. И отрисованы и заверены макеты адаптивной версии.ВЕРСТКА И СКРИПТЫ
Для начала был полностью переделан основной дизайн, который ранее был сверстан на базе одного из бесплатных шаблонов. Сделана оригинальная верстка шаблона, от кодов mybb остался небольшой кусочек, почти всё версталось с нуля с сохранением стилистики изначального дизайна. По сравнению с исходным шаблоном, CSS-код дизайна сократился на 65%, а вес графики дизайна на 45%. Также сделан крутой блочный код шапки, который "дизайнится" через css и не требует админа копаться среди милллиона html-тегов. Произведена ревизия всех скриптов, устаревшие заменены, некоторые "починены".Адаптивка для дизайна сделана с сохранением стилистики оригинального дизайна и использованием ГРАФИКИ. Т.е. это не просто "кодовая" адаптивка, а "ролевая": с сохранением атмосферы игрового форума, текстурками, графикой и ролевыми полями профиля. Версталась также постранично и без использования mybb-кода. Под нее разработан ряд скриптов для спойлеров меню и профиля + скрипт превращения таблички в слайдер - все эти скрипты работают только при ширине экрана, в которую "не помещается" основной дизайн, и не мешают наслаждаться полной версией дизайна.
- Подпись автора
"You don't need to be protected,
Because nothing shocks you any more." © Mesh
