<?php /* Template Name: Homepage */ get_header(); ?>

<div class="uk-container" uk-scrollspy=" cls: uk-animation-fade; delay: 300">
  <div class="uk-cover-container uk-text-center banner uk-margin-bottom">
      <canvas width="" height="600"></canvas>

  	<img uk-img="data-src:<?php echo get_template_directory_uri(); ?>/images/ubco-campas.jpg" data-width data-height uk-cover>


  	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle" uk-scrollspy=" cls: uk-animation-fade; delay: 500">
          <div>
            <h2 class="white uk-margin-remove">the</h2>
            <h1 class="white uk-margin-remove">MUCIN <span class="yellow">GLYCOBIOLOGY</span><br>LABORATORY</h1>
            <h2 class="white uk-margin-remove">at UBCO</h2>
          </div>
      </div>
  </div>
</div>


<div class="robert-lake-bg uk-margin uk-padding white" uk-scrollspy=" cls: uk-animation-fade; delay: 300">
  <div class="uk-container uk-margin-large-top uk-margin-large-bottom">
    <div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 500">
      <div>
        <h1 class="white">WELCOME TO<br><span class="yellow">THE LAB</span></h1>
        <h3 class="white uk-margin-remove">about us</h3>
        <hr>
        <P>Glycans or bust: </P>
<P>We study how sugars or oligosaccharides on secreted molecules called mucins interact with the vast gut microbiota and prevent chronic diseases like inflammatory bowel disease and cancer.</P>
<P>We believe this will lead to new strategies to prevent and treat these disorders, and even lead to a cure. </P>
<P>In the process, we are training the next generation of glycoscientists who will carry their skills to industry, medicine, and academia.</P>
        <a href="<?php echo home_url(); ?>/about-us/" class="white-btn uk-width-2-3@m">FIND OUT MORE <i class="far fa-long-arrow-alt-right uk-margin-small-left"></i></a>
      </div>
      <div>
        <img src="<?php echo get_template_directory_uri(); ?>/images/glcobiological-sample.png">
      </div>
    </div>
  </div>
</div>


<div class="uk-container">
  <h2 uk-scrollspy=" cls: uk-animation-fade; delay: 300" class="blue uk-text-center uk-margin-large-top">Lab Goals</h2>
  <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 300" class="blue">

  <div class="uk-child-width-1-4@m uk-text-center uk-margin-large-top uk-margin-xlarge-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <i class="fad fa-vial blue fa-3x"></i>
      <h3 class="uk-margin-remove-bottom">DETERMINE</h3>
      <P class="uk-margin-remove-top ">Determine the role of mucins and their glycans in host-microbe mutualism and prevention of IBD and colorectal cancer</P>
    </div>
    <div>
      <i class="fad fa-microscope blue fa-3x"></i>
      <h3 class="uk-margin-remove-bottom">UNDERSTAND</h3>
      <P class="uk-margin-remove-top">Understand regulation of glycosyltransferase activities in chronic diseases of the gut</P>
    </div>
    <div>
      <i class="fad fa-chart-network blue fa-3x"></i>
      <h3 class="uk-margin-remove-bottom">DELINIATE</h3>
      <P class="uk-margin-remove-top">Delineate specific roles of mucin type O-glycans in regulation of microbial fitness</P>
    </div>
    <div>
      <i class="fad fa-flask blue fa-3x"></i>
      <h3 class="uk-margin-remove-bottom">CREATE</h3>
      <P class="uk-margin-remove-top">Devise novel methods for mucin or glycan-based therapies for chronic diseases</P>
    </div>

  </div>

  <div class="uk-flex uk-flex-bottom" uk-grid uk-scrollspy=" cls: uk-animation-fade; delay: 300">
    <div class="uk-width-expand@m">
      <h2 class="uk-margin-remove">Current Projects</h2>
    </div>
    <div class="uk-width-auto@m">
      <a href="#" class="blue">SEE MORE <i class="fal fa-chevron-right uk-margin-small-left"></i></a>
    </div>
  </div>
  <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 300" class="blue">

  <div class="uk-child-width-1-2 uk-child-width-1-4@m uk-margin-large-top" uk-grid uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 300">
    <?php
       // WP_Query arguments
         $args = array(
          'post_type'              => array( 'projects' ),
          'posts_per_page'         => '4',
         );

         // The Query
         $query = new WP_Query( $args );

         // The Loop
         if ( $query->have_posts() ) {
          while ( $query->have_posts() ) {
            $query->the_post();?>
             <div>
               <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
       					 <img uk-img="data-src:<?php the_post_thumbnail_url('thumbnail'); ?>" data-width data-height>
       			   </a>
               <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                 <h3 class="uk-margin-remove-bottom uk-text-uppercase"><?php the_title(); ?></h3>
               </a>
               <hr class="blue">
               <?php html5wp_excerpt('html5wp_index'); ?>
             </div>
         <?php	}
         } else {
          // no posts found
         }

         // Restore original Post Data
         wp_reset_postdata();
         ?>
  </div>
</div>


<div class="spion-bg uk-margin uk-padding white uk-margin-xlarge-top uk-margin-medium-bottom" uk-scrollspy=" cls: uk-animation-fade; delay: 300">
  <div class="uk-container uk-margin-large-top uk-margin-large-bottom">
    <div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 500">
      <div>
        <img src="<?php echo get_template_directory_uri(); ?>/images/team.jpg">
      </div>
      <div>
        <h1 class="white">THE CLYCOBIOLOGY<br><span class="yellow">TEAM</span></h1>
        <h3 class="white uk-margin-remove">meet the personnel</h3>
        <hr>
        <P>we are training the next generation of glycoscientists who will carry their skills to industry, medicine, and academia. </P>
		<P>Here is our lab 101 and our talented team</P>
        <a href="<?php echo home_url(); ?>/personnel/" class="white-btn uk-width-2-3@m">MEET THE TEAM <i class="far fa-long-arrow-alt-right uk-margin-small-left"></i></a>
      </div>

    </div>
  </div>
</div>


<div class="uk-container">
  <div class="uk-flex uk-flex-center" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div class="uk-width-auto@m">
      <h2 class="blue uk-margin-remove">Socialize with us</h2>
    </div>
    <div class="uk-width-auto">
      <a href="#" class="blue" target="_BLANK"><i class="fab fa-facebook-f fa-3x uk-margin-right"></i></a>

    </div>
    <div class="uk-width-auto">
      <a href="#" class="blue" target="_BLANK"><i class="fab fa-twitter fa-3x uk-margin-right"></i></a>

    </div>
    <div class="uk-width-auto">
      <a href="#" class="blue" target="_BLANK"><i class="fab fa-instagram fa-3x"></i></a>

    </div>
  </div>
  <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 300" class="blue">

  <div class="uk-child-width-1-3@m  uk-grid-small uk-margin-xlarge" uk-grid uk-scrollspy="target:: > div;  cls: uk-animation-fade; delay: 300">
    <div>
      <img src="<?php echo get_template_directory_uri(); ?>/images/laboratory-work.jpg">
    </div>
    <div>
      <img src="<?php echo get_template_directory_uri(); ?>/images/machinery-in-laboratory.jpg">
    </div>
    <div>
      <img src="<?php echo get_template_directory_uri(); ?>/images/researcher-in-laboratory.jpg">
    </div>
  </div>


  <div class="uk-flex uk-flex-bottom" uk-grid uk-scrollspy=" cls: uk-animation-fade; delay: 300">
    <div class="uk-width-expand@m">
      <h2 class="uk-margin-remove">Latest Publications</h2>
    </div>
    <div class="uk-width-auto@m">
      <a href="#" class="blue">RESOURCES <i class="fal fa-chevron-right uk-margin-small-left"></i></a>
    </div>
  </div>
  <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 300" class="blue">

  <div class="uk-child-width-1-4@m uk-margin-large-top" uk-grid uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 300">
    <?php
       // WP_Query arguments
         $args = array(
          'post_type'              => array( 'publications' ),
          'posts_per_page'         => '4',
         );

         // The Query
         $query = new WP_Query( $args );

         // The Loop
         if ( $query->have_posts() ) {
          while ( $query->have_posts() ) {
            $query->the_post();?>
             <div>
               <div class="uk-grid-small" uk-grid>
                 <div class="uk-width-auto">
                   <i class="fal fa-file-alt blue fa-2x"></i>
                 </div>
                 <div class="uk-width-expand">
                   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                     <h3 class="uk-margin-remove uk-text-uppercase"><?php the_title(); ?></h3>
                   </a>
                   <span class="date"><?php echo get_the_date( 'F d, Y' ); ?></span>
                 </div>
               </div>
               <?php html5wp_excerpt('html5wp_index'); ?>
             </div>
         <?php	}
         } else {
          // no posts found
         }

         // Restore original Post Data
         wp_reset_postdata();
         ?>
  </div>



  <div class="uk-flex uk-flex-bottom" uk-grid uk-scrollspy=" cls: uk-animation-fade; delay: 300">
    <div class="uk-width-expand@m">
      <h2 class="uk-margin-remove">Explore Our World</h2>
    </div>
    <div class="uk-width-auto@m">
      <a href="#" class="blue">SEE MORE <i class="fal fa-chevron-right uk-margin-small-left"></i></a>
    </div>
  </div>
  <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 300" class="blue">

  <div class="uk-child-width-1-3@m uk-margin-large-top" uk-grid="masonry: true" uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 300">
    <?php
       // WP_Query arguments
         $args = array(
          'post_type'              => array( 'post' ),
          'posts_per_page'         => '6',
         );

         // The Query
         $query = new WP_Query( $args );

         // The Loop
         if ( $query->have_posts() ) {
          while ( $query->have_posts() ) {
            $query->the_post();?>
             <div>
               <div class="blog-box">
                 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         					 <img uk-img="data-src:<?php the_post_thumbnail_url('large'); ?>" data-width data-height>
         			   </a>
                 <div class="uk-padding uk-padding-remove-vertical">
                   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                     <h3 class="uk-margin-remove-bottom uk-text-uppercase"><?php the_title(); ?></h3>
                   </a>
                   <?php html5wp_excerpt('html5wp_index'); ?>
                 </div>
               </div>
             </div>
         <?php	}
         } else {
          // no posts found
         }

         // Restore original Post Data
         wp_reset_postdata();
         ?>
  </div>


</div>


<div class="city-park-bg uk-margin uk-padding white uk-margin-xlarge-top uk-margin-medium-bottom" uk-scrollspy=" cls: uk-animation-fade; delay: 300">
  <div class="uk-container uk-margin-large-top uk-margin-large-bottom">
    <h2 uk-scrollspy=" cls: uk-animation-fade; delay: 500" class="white uk-text-center">Questions? / <span class="yellow">Comments?</span></h2>
    <hr uk-scrollspy=" cls: uk-animation-slide-left; delay: 500">
    <div class="uk-child-width-1-2@m uk-flex uk-flex-middle uk-margin-large-top" uk-grid uk-scrollspy="target: > div;  cls: uk-animation-fade; delay: 500">
      <div>
        <?php gravity_form( 1, false, false, false, '', true, 12 );?>
      </div>
      <div>
        <iframe uk-responsive src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4758.576103687008!2d-119.39857223761175!3d49.940185134875456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x537ded8d83bd6a73%3A0x5f8957091bacc919!2s3333%20University%20Way%2C%20Kelowna%2C%20BC%20V1V%201V7!5e0!3m2!1sen!2sca!4v1619213134100!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>

    </div>
  </div>
</div>

<?php get_footer(); ?>
