[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/6822/240195.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 14.12.2020<br>
Автор: <a href="https://forumd.ru/profile.php?id=2" target="_blank">Герда</a> & <a href="https://forumd.ru/profile.php?id=6774" target="_blank">satsana</a><br>
Платформа: MyBB<br>
Описание: Плиточная вёрстка списка топиков для форума "Кузнечик"<br>
<a id="store" href="https://domkyznechik.ru/search.php?action=show_recent" 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/6822/856694.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/6822/737572.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/6822/379158.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/6822/415809.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/6822/241126.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/6822/828539.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/6822/701268.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/6822/415736.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/6822/481293.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/6822/962903.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]
ВЕРСТКА И СКРИПТЫ
Выполнена плиточная вёрстка списка топиков, активных тем и поиска. Выводится первая картинка из первого сообщения топика (для этого был использован и немного модифицирован вот этот скрипт), название топика, количество ответов и просмотров, аватар и ник автора последнего сообщения, а ещё дата и ссылка на последний пост в теме.Плитки по цвету адаптированы под 5 разных стилей. Активные темы и темы в поиске отображаются похожим образом, только вместо просмотров, стоит ссылка с названием раздела где находится топик.
Установлена картинка по умолчанию для топиков, где нет изображения в первом сообщении.
Плитки меняют своё положение и адаптируются под разные разрешения экранов, вплоть до мобильных.