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

<div class="wid_waak_bc " style="position: relative;">
  <div class="wid_waak_bc_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="wid_waak_bc_text" >
   
  <div style="float:right;">$MODER_PANEL$</div>
  <div class="wid_waak_bc_text_name"><a href="$ENTRY_URL$">$TITLE$</a></div>
  <div class="wid_waak_bc_text_cena">$OTHER1$</div>
  <div class="wid_waak_bc_text_cat">$CATEGORY_NAME$</div>
  <div class="wid_waak_bc_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>

.wid_waak_bc {
  width: 100%;
  background: #FFF;
  margin: 20px 0;
  overflow: hidden;
  height: 190px;
  transition:1s;
}
.wid_waak_bc_img {
  width: 30%;
  height: 190px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #FDA649;
   
  transition:1s;
}

.img_num {
  position: absolute;
  z-index: 2;
  color: #FFF;
  font-size: 13px;
  background: rgba(0,0,0,.6);
  padding: 4px 10px;
  bottom: 10px;
  left: 10px;
}
.wid_waak_bc_img img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  transition:1s;
}
.wid_waak_bc_img img:hover {
  margin-left: -30px;
}
.wid_waak_bc_text {
  width: 70%;
  margin-left: 30%;
  padding: 20px;
  transition:1s;
}

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

.wid_waak_bc_text_cena {
  font-size: 24px;
  font-weight: bold;
  color: #517EAE;
  padding: 10px 0;
  transition:1s;
}

.wid_waak_bc_text_cat {
  font-size: 16px;
  color: #878787;
}

.wid_waak_bc_text_item {
  padding: 15px 0;
  color: #B5B5B5;
}
.wid_waak_bc_text_item span{
  margin-right: 15px;
}

@media screen and (max-width: 700px) {
  .wid_waak_bc_img {width: 120px;}
  .wid_waak_bc_img img {height: 100px;}
  .wid_waak_bc_text {width: auto;margin-left: 120px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 100px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;}
  .wid_waak_bc_text_cat {display: none;}
  .wid_waak_bc_text_item {padding: 0px}
  .img_num {font-size: 10px}
}

@media screen and (max-width: 500px) {
  .wid_waak_bc_img {width: 100px;}
  .wid_waak_bc_img img {height: 90px;}
  .wid_waak_bc_text {width: auto;margin-left: 100px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 90px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;padding: 3px 0;}
   
}

@media screen and (max-width: 350px) {
  .wid_waak_bc_img {width: 90px;}
  .wid_waak_bc_img img {height: 70px;}
  .wid_waak_bc_text {width: auto;margin-left: 90px;padding: 5px 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 70px;}
  .wid_waak_bc_text_name a {font-size: 12px;}
  .wid_waak_bc_text_cena {font-size: 12px;padding: 2px 0;}
  .wid_waak_bc_text_item {padding: 0px;font-size: 10px;}
   
}

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css');