» »

Вид материалов на доски объявлений для uCoz

Вид материалов на доски объявлений для uCoz

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

Адаптивность отличная, здесь не будет трансформаций, а просто идет сжимание, что корректно смотреться на всех мобильных аппаратах. Также можно заметить, что нет отступов, что будет в самом вверху заголовок. Ниже в каком каталоге находится этот материал, что также для навигации отлично подойдет. Но и обязательно дата, когда был размещен тот или иной материал.

До этого автор уже размещал на сайте вид материал для объявление, что также можете посмотреть.

Так идет по умолчанию:

Красивая форма вид материала доски

Здесь уже на мобильном гаджет:

Адаптивный вид сайта в одну колонку

Приступаем к установки:

HTML

Код
<div class="tugreate_apudendum" style="position: relative;">
  <div class="tugreate_apudendum_img">  
  <div class="img_num"><i class="fa fa-camera" aria-hidden="true"></i>  
   
  <?if($IMG_URL6$)?> 6 <?else?>  
  <?if($IMG_URL5$)?> 5 <?else?>  
  <?if($IMG_URL4$)?> 4 <?else?>  
  <?if($IMG_URL3$)?>3 <?else?>  
  <?if($IMG_URL2$)?> 2 <?else?>  
  <?if($IMG_URL1$)?> 1 <?else?>  
   
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
   
   
   
  </div>  
  <a href="$ENTRY_URL$"><center><img src="$IMG_URL1$"></center></a>  
  </div>  
  <div class="tugreate_apudendum_text" >  
   
  <div style="float:right;">$MODER_PANEL$</div>  
  <div class="tugreate_apudendum_text_name"><a href="$ENTRY_URL$">$TITLE$</a></div>  
  <div class="tugreate_apudendum_text_cena">$OTHER1$</div>  
  <div class="tugreate_apudendum_text_cat">$CATEGORY_NAME$</div>  
  <div class="tugreate_apudendum_text_item">  
  <span><i class="fa fa-calendar" aria-hidden="true"></i> $DATE$ в $TIME$</span>  
  <span><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span>  
  </div>  
   
  </div>  
  <div id="clr"></div>  
</div>

CSS

Код
.tugreate_apudendum {
  width: 100%;
  background: #f9f4f4;
  margin: 17px 0;
  overflow: hidden;
  height: 187px;
  transition:1s;
}  
.tugreate_apudendum_img {  
  width: 29.9%;  
  height: 186.9px;  
  float: left;  
  overflow: hidden;  
  position: relative;  
  background: #5668da;  
   
  transition:1s;  
}  

.img_num {  
  position: absolute;  
  z-index: 2;  
  color: #efe6e6;  
  font-size: 13px;  
  background: rgba(16, 16, 16, 0.67);  
  padding: 4px 10px;  
  bottom: 10px;  
  left: 10px;  
}  
.tugreate_apudendum_img img {  
  height: 189px;  
  width: 100%;  
  object-fit: cover;  
  transition:1s;  
}  
.tugreate_apudendum_img img:hover {  
  margin-left: -30px;  
}  
.tugreate_apudendum_text {
  width: 67%;
  margin-left: 28%;
  padding: 25px;
  transition:1s;
}  

.tugreate_apudendum_text_name a {
  font-size: 21px;
  font-weight: bold;
  display: block;
  transition:1s;
}  

.tugreate_apudendum_text_cena {  
  font-size: 23px;  
  font-weight: bold;  
  color: #517EAE;  
  padding: 35px 0;  
  transition:1s;  
}  

.tugreate_apudendum_text_cat {  
  font-size: 15px;  
  color: #635c5c;  
}  

.tugreate_apudendum_text_item {  
  padding: 14px 0;  
  color: #807676;  
}  
.tugreate_apudendum_text_item span{  
  margin-right: 14px;  
}  

@media screen and (max-width: 700px) {  
  .tugreate_apudendum_img {width: 120px;}  
  .tugreate_apudendum_img img {height: 100px;}  
  .tugreate_apudendum_text {width: auto;margin-left: 120px;padding: 10px;}  
  .tugreate_apudendum, .tugreate_apudendum_img {height: 100px;}  
  .tugreate_apudendum_text_name a {font-size: 16px;}  
  .tugreate_apudendum_text_cena {font-size: 16px;}  
  .tugreate_apudendum_text_cat {display: none;}  
  .tugreate_apudendum_text_item {padding: 0px}  
  .img_num {font-size: 10px}  
}  

@media screen and (max-width: 500px) {  
  .tugreate_apudendum_img {width: 100px;}  
  .tugreate_apudendum_img img {height: 90px;}  
  .tugreate_apudendum_text {width: auto;margin-left: 100px;padding: 10px;}  
  .tugreate_apudendum, .tugreate_apudendum_img {height: 90px;}  
  .tugreate_apudendum_text_name a {font-size: 16px;}  
  .tugreate_apudendum_text_cena {font-size: 16px;padding: 3px 0;}  
}  

@media screen and (max-width: 350px) {  
  .tugreate_apudendum_img {width: 90px;}  
  .tugreate_apudendum_img img {height: 70px;}  
  .tugreate_apudendum_text {width: auto;margin-left: 90px;padding: 5px 10px;}  
  .tugreate_apudendum, .tugreate_apudendum_img {height: 70px;}  
  .tugreate_apudendum_text_name a {font-size: 12px;}  
  .tugreate_apudendum_text_cena {font-size: 12px;padding: 2px 0;}  
  .tugreate_apudendum_text_item {padding: 0px;font-size: 10px;}  
}

$OTHER-1$ - Оператор выводит цену можно заменить на свой.

Здесь нужно подключить шрифтовые иконки для отображение.

Автор: waak
Источник: Talantlev.ucoz.ru
2018-01-30 Просмотров: 979 Комментарий: (0)

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

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

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