Отрывок кода 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(); ?>
Детали проекта
Платформа:
Тип проекта:
Верстка
Ищите партнера для работы над Вашим сайтом?