<!--
    Template Name: Single Page
 -->

 <?php get_header();?>
 <div class="singlepage_bg" style="background-image:url(<?php the_field('singlepage_bg');?>)">
    <div class="container">
        <div class="col-4">
            <h1><?php the_field('singlepage_heading');?></h1>
            <p><?php the_field('singlepage_paragraph');?></p>
        </div>
    </div>
 </div>

 <!-- Section1 -->
 <div class="single_section1">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <img src="<?php the_field('single_section1_image');?>">
            </div>
            <div class="col-12">
                <h1><?php the_field('single_section1_title');?></h1>
            </div>
            <div class="col-12">
                <p><?php the_field('single_section1_text');?></p>
            </div>
        </div>
    </div>
 </div>
 <div class="single_section2">
    <div class="container">
        <div class="container">
            <div class="slickslider">
               <?php
               $args = array(
                  'post_type' => 'unsereprojekte',
                  'posts_per_page' => '-1',
               );
               $loop = new WP_Query($args);
               while ($loop->have_posts()) :
                  $loop->the_post();
                  ?>
                  <div class="image_partner text-center">
                     <?php the_post_thumbnail(); ?>
                     <p id="data"><?php echo get_the_date( 'd-m-Y' ); ?></p>
                     <p><?php the_content(); ?></p>
                  </div>
               <?php
               endwhile;
               wp_reset_postdata();
               ?>
            </div>
         </div>
    </div>
 </div>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
   jQuery('.slickslider').slick({
      dots: true,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 770,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        autoplay:true,
        dots:false,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots:false,
        autoplay:true

      }
    }
  ]
   });
</script>
 <?php get_footer();?>