|

29.04.2018 в 19:20:44 | Добавил: rayven | Просмотров: 38 | 0 ответов

Представляю вам полностью адаптивный светлый информер. Установка и настройка доступна каждому

Настройки для информера: [ Каталог статей · Материалы ·  Материалы: 6 · Колонки: 1 ]

Код
<?if($NUMBER$='1' || $NUMBER$='2')?>  <div class="top1">  <a class="top1-cat" href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>  <span><a href="$ENTRY_URL$">$TITLE$</a>  <p>$MESSAGE$</p>  </span>  </div>  <?else?>  <?if($NUMBER$='3')?><?endif?>  <div class="top2">  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>  <span><h5><a href="$ENTRY_URL$">$TITLE$</a> </h5> <p>$MESSAGE$</p></span>  </div>  <?endif?>
А это добавить в стили CSS:
Код
.top1 {width: 48%; float: left;  margin:0 5px; padding: 10px;float:left;}  .top1:nth-child(2n){margin:0 10px;padding: 10px; } @media only screen and (max-width: 960px) {  .top1 {width:98%; float: left;  margin:0 5px; padding: 10px;}  .top1:nth-child(2n){margin:0 10px !important;}  .top1:nth-child(2n){margin:10px;}  }  @media screen and (max-width: 640px) {  .top2, .top1 {width:auto !important;width:98%; float: left;  margin:0 5px; padding: 10px;float:none !important;}  }  @media screen and (max-width: 400px) {  .top2, .top1 {width:auto !important;width:98%; float: left;  margin:0 5px; padding: 10px;float:none !important;}  }   a.top1-cat {color: #fff; display: block; font-size: 13px; height: 35px; line-height: 35px; padding: 0 15px; position: absolute; width: auto; background-color: rgba(27, 26, 26, 0.52);}  .top1 img {width:100%; height: 220px;}  .top1 span {display: block; height: 110px; overflow: hidden;}  .top1 span a {color: #444; font-size: 16px; text-decoration: none; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; font-weight: bold; display: block;}  .top1 span a:hover {color: red;}  .top1 p {}   .top2 {width: 48%; float: left;  margin:0 5px; padding: 10px;}  .top2 img {width:80px; height: 80px; float:left; margin:0 10px;}  .top2 a {color: #444; font-size: 15px;line-height: 15px; text-decoration: none; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s;}  .top2 a:hover {color: red;}  .top2 p {-webkit-margin-before: 0; -webkit-margin-after: 0; font-size: 12px;}  .top2 span {display: block; height: 80px; overflow: hidden;}


38 визитов
↳ 0 ответов
Ваше мнение о материале 0 из 10
Голосовало:

Похожие материалы

avatar
close