Игровой скругленный вид материалов файлов для uCoz

15.03.2017 761 1 SТРАННИК Все для uCoz Вид материалов

Описание:

Хороший вид материалов две колонки для игрового сайта, больше подойдет на белом дизайне, если поработать над ним, то вы можете его настроить под себя.

Установка: Вид материалов - каталог файлов

Код

<a href="$ENTRY_URL$" title="">

<div class="f_viewn" title="$TITLE$">

<div class="f_title" style="background-image:url($IMG_URL1$);" title=""><span>$TITLE$ </span></div>

<div class="f_cont" title="$TITLE$">$MESSAGE$ $MODER_PANEL_RIGHT$

</div>

<div class="f_details" title="">

<span>$CATEGORY_NAME$</span>

<div class="right">

<span><i class="fa fa-eye fa-fw"></i> $READS$</span>

<span><i class="fa fa-download fa-fw"></i> $LOADS$</span>

<span><i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$</span>

</div>

</div>

</div>

</a>

добавим CSS стили

Код

.f_viewn {width:307px;height:185px;overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;margin:0 0 13px 6px;float:left;transition:0.3s;}

.f_viewn:hover {background:#f5f5f5;}

.f_viewn:hover .f_title span {background:rgba(0, 0, 0, 0.2);}

.f_title {height:62px;overflow:hidden;border-bottom:1px solid #f0f0f0;background-size:cover;background-position:center;background-repeat:no-repeat;}

.f_title span {transition:0.3s;background:rgba(0, 0, 0, 0.5);width:301px;height:52px;color:#fffdfd;display:block;text-align:center;font-size:18px;text-shadow:0px 2px 2px #000;text-transform:uppercase;padding:15px 5px 0px 5px;}

.f_cont {color:#757575;font-size:14px;padding:7px;overflow:hidden;height:65px;}

.f_cont br {display:none;}

.f_details {height:41px;display:block;border-top:1px solid #f0f0f0;line-height:40px;color:#222121;padding:0 10px;color:#757575;}

.f_details span {font-size:13px;

color:#757575;

padding: 4px 8px;

border-radius: 5px;

border: 1px solid #8a8a8a;}

.f_details span i {font-size:12px;}

.left {float:left;}

.right {float:right;}

.center {text-align:center;}

.hidden {overflow:hidden;}

.side_content {width:1150px;display:table;}

.side_left {float:left;width:250px;margin:0 8px 0 0;}

.side_middle {width:635px;overflow:hidden;}

.side_right {float:right;width:250px;}

.side_cont {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;}

.side_bg {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;padding:5px;margin-bottom:5px;color:#3e3e3e;}

.side_bg a {text-decoration:underline;}

.side_bg a:hover {text-decoration:none;}

.side_bg h1 {font-size:18px;padding-left:3px;}

.side_nav {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;padding:5px;margin-bottom:5px;font-size:14px;color:#3e3e3e;}

.side_nav span {font-size:12px;text-transform:uppercase;}

.side_nav span a {color:#7f7f7f;}

.side_nav a:hover {text-decoration:underline;}

.side_smtext {font-size:12px;color:#888;padding:5px 3px;}

#wrapper {width:1150px;margin:0 auto;}