<?php get_header(); ?>

<!-- Start welcome -->
<section class="welcome">
  <div class="container">
    <div class="row">
      <div class="col-md-12 blog-intro">
        <h2 class="med-title text-center">Welcome</h2>
        <p class="tag-line text-center space20">Happy to have you on our blog page where we want to share our knowledge and jokes. 
          <br class="hidden-xs hidden-sm">Enjoy!<br class="hidden-xs hidden-sm"></p>

        </div>
      </div>
    </div>  
    <!-- End welcome -->

    <!-- Start tabs -->
    <div class="space20">  

      <div class="tab container">
        <button class="tablinks" onclick="openBlog(event, 'Learn')" id="defaultOpen">Learn</button>
        <button class="tablinks" onclick="openBlog(event, 'Fun')">Fun</button>
      </div>
      
      <div id="Learn" class="tabcontent">
        <section class="tabcontainer" id="team">
          <div class="container">


           <?php $count = 0; //set up counter variable ?>


           <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
             <?php if ($count % 2 == 0): ?>
              <div class="row space40">
              <?php endif; ?>

              <div class="col-md-6 col-sm-6 text-center">
                <a href="<?php echo get_permalink(); ?>">
                <img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive center-block hidden-xs" alt="team1">
                <img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive center-block visible-xs" alt="team1">
                <h4 class="heading-tag"><?php the_title(); ?></h4>
                <p class="hint text-center"><?php the_date(); ?></p>
                <p class="hint text-center"><?php the_author(); ?></p>
              </a>
              </div>

              <?php if ($count % 2 != 0): ?>
              </div>
              <?php endif; ?>

              <?php $count++; ?>

          <?php endwhile; else: ?>
          <?php _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); ?>
        <?php endif; ?>         
      </div>
    </section>
  </div>

  <div id="Fun" class="tabcontent">
    <section class="tabcontainer" id="team">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="row space40">
              <a href="Blog.html">
                <div class="col-md-6 col-sm-6 text-center">
                  <img src="<?php bloginfo( 'template_directory' ); ?>/img/blog-img-3.png" class="img-responsive center-block hidden-xs" alt="team1">
                  <img src="<?php bloginfo( 'template_directory' ); ?>/img/blog-img-3.png" class="img-responsive center-block visible-xs" alt="team1">
                  <h4 class="heading-tag">Some text or title</h4>
                  <p class="hint text-center">17 December</p>
                  <p class="hint text-center">Senad Uka</p>
                </div>
              </a> 
              <a href="Blog.html">
                <div class="col-md-6 col-sm-6 text-center">
                  <img src="<?php bloginfo( 'template_directory' ); ?>/img/blog-img-4.png" class="img-responsive center-block hidden-xs" alt="team2">
                  <img src="<?php bloginfo( 'template_directory' ); ?>/img/blog-img-4.png" class="img-responsive center-block visible-xs" alt="team1">
                  <h4 class="heading-tag">Some text or title</h4>
                  <p class="hint text-center">17 December</p>
                  <p class="hint text-center">Edin Dazdarevic</p>
                </div>
              </a>
            </div> 
          </div>
        </div>  
      </div>
    </section>
  </div>
</div> 
</section>     
<!-- End tabs -->  

<?php
get_footer();

