Новостной блог материалов для 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;} Не забываем вверх прописать шрифты, для появления кнопок. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |