Kosten
Вторник, 24 Октября 2017, 15:06 | Сообщение 1
На модуль новостей или блог этот вид хорошо подойдет, он настроен на все размеры монитора и мобильные аппараты, что корректно показывает. Полностью выстроен на стилистике, где цветовая палитра и основной дизайн меняется в CSS и коде. Если к примеру у вас синий интернет ресурс, то вы можете за короткое время выставить под ту гамму, что вам нужно. В нем еще закреплены шрифтовые иконки, что обязательно на сайт нужно ставить. Если у вас они не установлены, то переходим на эту статью и ознакомитесь, это также не сложно как поставить этот вид материала. Больше подойдет под игровую тематику, но или что то аналогичную с ней, все хорошо редактируется, и веб мастер может перестроить или оставить по умолчанию как идет. 1. 2. 3. 4.Приступаем к установке : Код
Код
<div class="block_wid"> <div class="karunlemys-vid"> <div class="karunlemys-title"> <div class="zornet_ru"><a href="$ENTRY_URL$">$TITLE$</a></div> <span><i class="fa fa-eye" aria-hidden="true"></i> $READS$ | <i class="fa fa-comments-o"></i> <a href="$COMMENTS_URL$"><?if($COMMENTS_NUM$)?>$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>нет комментариев<?endif?></a></span> </div> <div class="karunlemys-img-text"> <div class="karunlemys-img sepia"> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a> </div> <div class="karunlemys-text"> $MESSAGE$ </div> </div> <div class="karunlemys-detali"> <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-check-square"></i></span><span class="karunlemys-1-r"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span></div> <div class="karunlemys-1"><span class="karunlemys-1-l"><i class="fa fa-pencil"></i></span><span class="karunlemys-1-r"><a href="$PROFILE_URL$">$USERNAME$</a></span></div> <div class="karunlemys-1"><span class="karunlemys-2"><a href="$ENTRY_URL$">Читать далее</a></span></div> </div> </div> </div>
CSS
Код
.karunlemys-vid{border-radius: 5px;background-color: rgba(21, 20, 20, 0.96);box-shadow: 0px 2px 1px 1px rgba(97, 92, 92, 0.95);padding: 10px;margin-bottom: 17px;} .karunlemys-title{border-bottom: solid rgba(70, 68, 68, 0.97) 1px;padding: 0 0 10px 0;margin: 0 0 10px 0;} .karunlemys-title a{color: rgba(253, 250, 250, 0.95);font-size: 17px;font-weight: bold;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);} .karunlemys-title a:hover{ color: rgba(235, 255, 158, 0.95); text-decoration: none; } .karunlemys-title span{font-size: 11px;margin: 7px 0px 0px 3px;display: block;text-shadow: 0 1px 0px rgb(35, 33, 33);color: rgba(253, 250, 250, 0.95);} .karunlemys-title span a{ display: inline-block; font-weight: normal; font-size: 12px; } .karunlemys-img-text{ width: 100%; min-height: 100%; } .karunlemys-img{width: 100%;height: 198px;margin: 0 10px 10px 0;border-radius: 3px;} .karunlemys-img img{width: 99%;height: 195px;object-fit: cover;border: 2px solid rgba(152, 152, 152, 0.97);border-radius: 7px;box-shadow: 0px 1px 18px 9px rgba(8, 8, 8, 0), 1px 1px 16px 0px rgb(236, 232, 232);} .karunlemys-text{text-align: justify;height: 50px;overflow: hidden;line-height: 135%;color: #efe9e9;} .karunlemys-detali{padding: 10px;margin: 10px 0 0 0;border-radius: 5px;box-shadow: 0px 1px 1px 0px rgba(78, 76, 76, 0.98);border: 1px solid rgba(60, 58, 58, 0.98);font-weight: bold;background: rgb(43, 43, 45);} .karunlemys-1{display: inline-block;font-size: 11px;margin-right: 9px;color: rgba(225, 231, 232, 0.99);font-weight: bold;} .karunlemys-1:last-child{ display: table; float: right; margin: -3px 0 0 0; } .karunlemys-1-l{ margin-right: 5px; } .karunlemys-1-r{ color: #3498db; font-weight: bold; } .karunlemys-2 a{display: block;background-color: rgba(96, 152, 208, 0.9);color: rgba(243, 238, 238, 0.98);padding: 5px 20px;border-radius: 45px;margin: -1px 0px 5px 16px;box-shadow: 0px 1px 1px 1px rgb(167, 207, 245);} .karunlemys-2 a:hover{background-color: rgb(95, 161, 224);text-decoration: none;} @media only screen and (max-width: 690px){ .karunlemys-img, .karunlemys-detali {float: none!important;width: 100%!important;} .karunlemys-detali {margin: 10px 10px 20px -11px ;} .karunlemys-1:last-child {display: none;} .karunlemys-detali {display: none;} .karunlemys-img img {width: 97.3%;} } @media screen and (max-width: 1120px) { .block_wid {width:auto !important;margin: 0 0 20px 0 !important;float:none !important;} .karunlemys-vid {width:auto !important;margin: 0 0 20px 0 !important;float:none !important;} } .zornet_ru { white-space: nowrap; overflow: hidden; padding: 5px; background: rgb(22, 21, 21); position: relative; border-bottom: 1px solid rgba(66, 60, 60, 0.93); } .zornet_ru::after { content: ''; position: absolute; right: 0; top: 0; width: 78px; height: 100%; background: -moz-linear-gradient(left, rgb(37, 36, 36), #222020 100%); background: -webkit-linear-gradient(left, rgb(46, 44, 44), #f1efef 100%); background: -o-linear-gradient(left, rgb(44, 42, 42), #222020 100%); background: -ms-linear-gradient(left, rgb(53, 52, 52), rgb(36, 34, 34) 100%); background: linear-gradient(to right, rgba(34, 32, 32, 0.23), rgb(22, 21, 21) 100%); } .block_wid{width: 48%;float:left;margin: 1px 1px 1px 10px;} .sepia img {-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.39);-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.8);-o-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.35);-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0.1, 0.62);transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.93);box-shadow: 0px 4px 10px rgba(148, 148, 148, 0.55), 0px 3px 30px -15px rgba(0, 0, 0, 0.67);} .sepia img:hover { -webkit-filter: sepia(100%);}
Страна: (RU )