» »

Новостной блог материалов для uCoz

Новостной блог материалов для uCoz

Этот темный вид материалов лучше поставить под информационный или новостною категорию, где идет в одну колонку для сайта uCoz. В дизайн минимально прописано стилистики, но для гостей, пользователей понятен и доступен, сто не мало важно. Весь функционал установлен и шрифтовые иконки здесь использованы. Что на скачивание функция будет, но под такой модуль она лишнее, что легко убрать.

Есть небольшой обвод на один пиксель и в самом низу добавлена светлая тень, чтоб визуально отображался основной каркас. Нет не каких эффектов, и почти вся конструкция была переделана с противоположной гаммы, где полностью функциональность перенесена. Идут media на адаптивность и веб мастеру отредактировать не составит труда по всему формату, чтоб подогнать под портал, что у всех разные.

HTML:

Код
<div class="regykomwv-vid">
  <div class="regykomwv-title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>
  <div class="regykomwv-img-detali">
  <div class="regykomwv-img">
  <img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$">
  </div>
<i class="fa fa-clock-o" aria-hidden="true"></i>  
  <time datetime="$DATE$">Дата: $DATE$</time><span style="padding-left:10px;"></span><i class="fa fa-download"></i>  
  Загрузок: $LOADS$<span style="padding-left:10px;"></span><i class="fa fa-comments-o" aria-hidden="true"></i> Комментарий: ($COMMENTS_NUM$)<span style="padding-left:10px;"></span><i class="fa fa-eye" aria-hidden="true"></i>  
  <span>Просмотров: $READS$</span>
  </div>
  <div class="regykomwv-text">
  <div class="virtynum-sermoken">  
<div class="sermoken">$MESSAGE$</div>
  <div class="muredan">  
</div></div></div>

CSS:

Код
.regykomwv-vid {border: solid 1px #807a7a;border-radius: 4px;background-color: #1f1c1c;padding: 10px;margin-bottom: 15px;box-shadow: 0px 3px 20px 0px rgba(27, 25, 25, 0.52), 0px 5px 19px 0px rgba(101, 98, 98, 0.68);}
.regykomwv-title {border-bottom: solid #5f5a5a 1px;padding: 0 0 10px 0;margin: 0 0 1px 0;}
.regykomwv-title a {color: #d8d1d1;font-size: 21px;display: block;}
.regykomwv-title a:hover {}
.regykomwv-img-detali {width: 100%;min-height: 200px;color: #c6efff;}
.regykomwv-img {width: 99.5%;height: 203px;float: left;padding: 2px;margin: 10px 10px 10px 0;background-color: #848282;border-radius: 4px;}
.regykomwv-img img {width: 100%;height: 203px;object-fit: cover;}
.regykomwv-detali {width: 27%;float: right;padding: 10px;margin: 12.5px 0 10px 10px;border: solid 2px #827f7f;border-radius: 4px;}
.regykomwv-1 {line-height: 35px;border-bottom: px dashed #636F79;}
.regykomwv-1:last-child { border-bottom: 0; }
.regykomwv-1-l {font-weight: bold;}
.regykomwv-1-r {float: right;}
.regykomwv-text {text-align: justify;display: inline-block;border-top: solid #4e4b4b 2px;padding: 10px 0 0 0;margin: 10px 0 0 0;height: 82px;overflow: hidden;line-height: 135%;}
  @media only screen and (max-width: 640px){
.regykomwv-img, .regykomwv-detali {float: none!important;width: 100%!important;}
.regykomwv-detali {margin: 10px 10px 10px 0;}
}

.evid {padding: 10px;background-color: rgba(27, 23, 23, 0.96);border: 2px solid rgba(93, 89, 89, 0.88);border-radius: 5px;box-shadow: 0px 4px 9px rgba(134, 128, 128, 0.44), 0px 17px 29px -9px rgba(130, 125, 125, 0.42);}  
.muredan {background: #2f2d2d;border: 2px solid #696262;padding: 0px 0px 0px 10px;font-size: 12px;height: 37px;line-height: 34px;margin-top: 10px;border-radius: 3px;}  
.muredan span {margin-right: 7px;color: rgba(218, 216, 216, 0.95);}  

.virtynum-sermoken {height: 82px;overflow: hidden;}  
.virtynum {padding: 10px 0;border-bottom: 1px solid #4a4a4a;padding: 10px 0 0;margin: 1px 0px 7px 1px;}  
.virtynum a {font-size: 19px;color: rgba(204, 239, 232, 0.96);font-weight: bold;display: block;margin: 0px 20px;text-align: center;font-family: PT Sans;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.98);}  
.sermoken {text-align: justify;height: 90px;overflow: hidden;line-height: 135%;color: rgba(228, 225, 225, 0.96);font-size: 15px;font-family: PT Sans;}

Не забываем вверх прописать шрифты, для появления кнопок.
09.10.2017 Просмотров: 314 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar