Ни как не могу остановиться, так как до жути понравилось рипать, и в рипе нет ни чего сложного. В общем сегодня я срипал ещё один вид материалов в колонках, но его можно сделать и без двух колонок. Что из себя представляет вид: название материала, изображение, кнопка скачать, и под видом материала раздел и категория.
Код HTML [Одна колонка]
Код
<div class="modsvidmat">
<div class="fileimg2" style="background-image: url('$IMG_URL1$');">
<div class="titlemod"> <a href="$ENTRY_URL$">$TITLE$ </a></div>
<div class="downloadmod"><a href="$ENTRY_URL$">Скачать мод</a></div>
</div>
<div class="botinfomod"> <a href="$SECTION_URL$">$SECTION_NAME$</a> › <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> </div>
</div>
Код HTML [Две колонки]
Код
<div style="width:50%; float:left;">
<div class="modsvidmat">
<div class="fileimg2" style="background-image: url('$IMG_URL1$');">
<div class="titlemod"> <a href="$ENTRY_URL$">$TITLE$ </a></div>
<div class="downloadmod"><a href="$ENTRY_URL$">Скачать мод</a></div>
</div>
<div class="botinfomod"> <a href="$SECTION_URL$">$SECTION_NAME$</a> › <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> </div>
</div>
</div>
Код CSS
Код
.modsvidmat {margin-bottom: 20px;}
.fileimg { width: 100%;height: 400px; background: center center no-repeat; background-size: cover; overflow: hidden; text-align: center;}
.fileimg2 { width: 100%;height: 200px; background: center center no-repeat; background-size: cover; position: relative; background-color: #ddd;}
.fileimg3 { width: 100%;height: 350px; background: center center no-repeat; background-size: cover; position: relative;}
.randommods .fileimg2 {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.fileimg {height: 250px;}
.titlemod {padding: 10px; background-color: rgba(0, 0, 0, 0.4);}
.titlemod a, .addMod a {color: #fff;}
.downloadmod {position: absolute; bottom: 15px; right: 15px; padding: 5px 10px; font-size: 14px; background: rgba(0, 0, 0, 0.5);}
.downloadmod a {color: #fff;}
.botinfomod {padding: 10px; font-size: 12px; background: #eee;}
