Корпоративный сайт и инфоблог

Отрывок кода css

.jos_col5_img img {
  width: 100%;
}

.jos_col12_block h2, .jos_col7_text h2, .jos_col12_2_block h2 {
  text-transform: uppercase;
  color: #333333;
  font-size: 20px;
  padding-bottom: 30px;
  font-family: "RobotoMedium";
}
.jos_col12_block h2:before, .jos_col7_text h2:before, .jos_col12_2_block h2:before {
  width: 10px;
  height: 10px;
  background-color: #1585b5;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  display: inline-block;
  margin-right: 20px;
}
.jos_col12_block p, .jos_col7_text p, .jos_col12_2_block p {
  font-size: 14px;
  color: #747474;
  font-family: "pt_sansregular";
  line-height: 18px;
}

.jos_col12_block {
  margin-bottom: 40px;
}
.jos_col12_block h2 {
  padding-top: 35px;
}
.jos_left_bord {
  min-height: 108px;
  background-color: #f0f0f0;
  border-left: 4px solid #3797c0;
  margin-bottom: 50px;
}
.jos_left_bord p {
  font-size: 14px;
  color: #333333;
  font-family: "pt_sansregular";
  line-height: 18px;
  padding-left: 20px;
  padding-top: 20px;
}
.jos_col7_2_text {
  padding-left: 0;
}

.jos_col5_2_img {
  padding-right: 0;
  padding-left: 15px;
}

.jos_col12_2_block {
  padding: 0;
}
.jos_col12_2_block p {
  margin-bottom: 35px;
}
.jos_col12_2_block h4 {
  margin-bottom: 25px;
  display: inline-block;
  margin-left: 30px;
}
.jos_col12_2_block h4 i {
  content: "";
  width: 11px;
  height: 11px;
  display: block;
  float: left;
  background-color: #1585b5;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  margin-right: 10px;
  margin-bottom: 10px;
}
.jos_col12_2_block h4 span {
  display: block;
  float: left;
  color: #747474;
  font-size: 14px;
  font-family: "pt_sansregular";

Фрагмент кода WordPress:

<?php 
/*
Template name: Лечение
*/
?>
<?php get_header(); ?>
<div class="container">
    <div class="row">
        <?php include_once ('breadcramp.php') ?>
        <div class="jo_big_title col-md-12">
            <h1><?php the_title(); ?></h1>
            <hr>
        </div>
        <?php 
        $myterms = get_terms('disease_category', 'orderby=count');
        foreach( $myterms as $cat ){ 
            $taxonomy = $cat -> taxonomy;
            $term_id = $cat -> term_id;  
            $thumbnail = get_field('миниатюра', $taxonomy . '_' . $term_id);
            $proc_img = get_field('иконка_сустава', $taxonomy . '_' . $term_id);
        ?>
        <div class="jo_treat_block">
            <h2><?php echo $cat -> name;?></h2>
            <div class="col-md-2 col-sm-2 col-xs-4 jo_md2_img">
                <img src="<?php echo $thumbnail['url']; ?>" alt="">
            </div>
            <div class="col-md-10 col-sm-10 col-xs-8 jo_md10_block">
                
                <div class="jo_md_mid">
                    <div class="media">
                        
                      <div class="media-left">
                          <img class="media-object" src="<?php echo $proc_img['url']; ?>" alt="">
                      </div>
                      <div class="media-body">
                        <h4 class="media-heading">ПРОЦЕДУРЫ</h4>
                        <p><?php the_field('процедуры', $taxonomy . '_' . $term_id); ?></p>
                      </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-12 col-xs-12 col-sm-12 jo_md12_block">
                <h3>ЗАБОЛЕВАНИЯ</h3>
                <hr>
                <?php 
                $args = array(
                    'post_type' => 'disease',
                    'disease_category' => $cat->name,
                );
                $query = new WP_Query( $args );
                ?>
                <?php $i = 0; ?>
                <?php while ($query->have_posts()) : $query->the_post(); ?>
                
                <?php $is_start = false; ?>
                <?php if ($i > 2){ $is_start = true; ?>
                <div class="clear"></div>
                <div class="treatment-href_hidden">
                <?php } ?>
                <a href="<?php the_permalink(); ?>" class="treatment-href"><?php the_title(); ?></a>
                <?php $i++; ?>
                <?php endwhile; ?>
                <?php if ($is_start == true){ ?>
                </div>
                <?php } ?>
            </div>
            <div class="clearfix"></div>
            <div class="col-dm-12">
                <div class="jo_nomd">
                    <a href="#" class="see_more_disease">Показать ещё</a>
                </div>
            </div>
        </div>    
        <?php          
        }
        ?>
     </div>
</div>
<?php get_footer(); ?>

Детали проекта