На главной страницы сайта на игровом ресурсе можно ставить вид материалов в 2 колонки, что представлен в темной стилистике с Avatar. Здесь все поставлено на проценты, а это по умолчанию идет 50% на два материала по горизонту. Что можно и на три выставить, здесь больше зависит от самого дизайн, и как он будет выглядеть на портале.
Здесь еще выставлено изображение пользователя, что загрузил или разместил на сайте. Это в какой день и в какой время, что больше сделано для красоты, чтоб заполнить пустоту, и возможно кому то нужно будет. Так как можно будет видеть, это новый материал или старый по данным, которые предоставлены от того, кто залил в категорию интернет ресурса.
Приступаем к установке:
Но для начало, давайте рассмотрим, как он смотрится в реальности. Так как он проверялся и была доработка на тестовой площадке по его функциональности и безусловно адаптивность под различные по размеру мобильных аппаратах.
1.
2.
3.
HTML
Код <div class="arunikola_persvun"> <article class="dakolpas_zorbunkas lersamilsa"> <div class="nuredsam_kriatal"> <div class="lopasrevun_dermilab stulicterkin"> <a href="$ENTRY_URL$"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://zornet.ru/Aben/ABGDA/zornet_ru/photo_not_available-store120.jpg<?endif?>" alt="$TITLE$"></a> <?if($CATEGORY_NAME$)?><h5><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></h5><?endif?> </div> <h4 class="zaloged_slarumlta"><a href="$ENTRY_URL$">$TITLE$</a></h4> <div class="satumilgkun"> <a href="$PROFILE_URL$"><div class="rmikaxtu_lpastun"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="http://zornet.ru/Aben/ABGDA/zornet_ru/fdMWyDOLRvCtJHRlXhqFQg.png" alt="" style="width: 25px; height: 25px;"><?endif?></div></a> <span style="position:relative; bottom:1px; font-style: normal;"><span style="padding-left:0px;"></span> <span class="fukipas_kalerdsa"><i class="fa fa-clock-o"></i>$DATE$ : $TIME$ : $WDAY$</span> </div> <div class="zornet-ruloper"> <p>$MESSAGE$</p> </div> </div> <footer class="mikaser-lpomug"> <span class="deszalom"><i class="fa fa-comments-o"></i> <?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$">$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?> </a><?endif?></span> <span class="deszalom"><i class="fa fa-eye"></i> $READS$</span> <span class="deszalom"><i class="fa fa-thumbs-o-up"></i> $RATING$</span> </footer> </article> </div> CSS
Код .arunikola_persvun {padding: 10px;width: 50%;margin: 0 !important;float: left;} .dakolpas_zorbunkas {position: relative;background: #161619;box-shadow: 0 1px 6px 0 rgba(95, 94, 94, 0.53), inset 0 0 0px 0px #414244;border-radius: 5px 5px 3px 3px;border: 1px solid #454648;} .nuredsam_kriatal {padding: 5px;position: relative;} .lopasrevun_dermilab.stulicterkin {margin-bottom: 10px;} .fukipas_kalerdsa {position:relative;bottom: 10px;color: #aad4f9;} .lopasrevun_dermilab {width: 100%;position: relative;} .lopasrevun_dermilab img {width: 100%;-webkit-transition: all 0.3s;display: block;margin: auto;height: 207px;box-shadow: 0 0px 3px 1px rgb(61, 61, 64), inset 0 0 0 1px #67696d;opacity: 0.7;border-radius: 3px;border: 1px solid #5c5d61;} .lopasrevun_dermilab img:hover {opacity: 1;} .lopasrevun_dermilab > h5 {position: absolute;left: 0;bottom: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 21px;color: white;font-weight: 600;padding: 5px 12px;background: rgba(6, 78, 22, 0.88);margin: 0;border-radius: 0px 3px 0px 3px;} .lopasrevun_dermilab > h5:before {content: '';position: absolute;} .lopasrevun_dermilab > h5 a:first-child {margin-left: 0;} .lopasrevun_dermilab > h5 a {display: inline-block;color: #f1ecec;text-shadow: 0 1px 0 #0e0e0e;} .thumb-icon.stulicterkin { text-align: center; width: 60px;height: 40px; line-height: 40px;font-size: 20px;position: absolute;top: 50%; margin-top: -20px; margin-left: -30px; color: #34495e;} .zaloged_slarumlta {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px solid #2d2c2c;padding: 1px 0px 3px 5px;} .zaloged_slarumlta a {margin-bottom: 10px;text-transform: none;font-size: 18px;font-weight: bold;font-family: PT Sans;color: rgba(207, 255, 249, 0.97);text-shadow: 0 1px 0 #1b1a1a;} .zaloged_slarumlta a:hover{color:#fff9c0;text-decoration:underline;} .rmikaxtu_lpastun {float: left;margin-top: -9px;margin-right: 10px;} .rmikaxtu_lpastun img {border-radius: 50%;margin-right: 1px;display: inline-block;width: 27px;height: 27px;} .rmikaxtu_lpastun span {font-weight: 500;color: #c3d8ff;display: inline-block;font-size: 13px;} .satumilgkun > span, .satumilgkun > p {display: inline-block;margin: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 20px;color: #e3e3f5;text-transform: capitalize;font-weight: 500;margin-top: 5px;} .satumilgkun > span i, .satumilgkun > p i {font-size: 16px;color: #83cbff;font-style: normal;margin-right: 5px;float: left;margin-top: -7px;} .mikaser-lpomug {border-top: 1px solid #313131;display: block;background: #0e0e0e;height: 40px;border-radius: 0px 0px 3px 3px;} .deszalom {font-size: 13px;display: inline-block;margin: 10px 1px 15px 12px;color: #aee8ff;text-shadow: 0 1px 0 #0a0a0a;} .deszalom a{color:#c8e9ff;text-decoration:none;} .deszalom a:hover{color:#9afff7;text-decoration:underline;} .zornet-ruloper {opacity: 0.99;margin-bottom: 0px;padding: 0 5px;height: 85px;overflow: hidden;text-align: justify;color: #e4dada;font-size: 12px;} li {list-style-type: none;} @media (max-width: 450px){.deszalom {display:none;}}
@media screen and (max-width: 1124px) { .arunikola_persvun {width: 50%;margin: 1%;} } @media screen and (max-width: 860px) { .arunikola_persvun {width: 99.7%;margin: 2%;} } Здесь подключены шрифтовые иконки, что оригинально все смотрится. |