<?php /*template name: Main Collections*/ get_header(); ?>
<div class="uk-cover-container uk-text-center banner white" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="300"></canvas>
    <canvas class="uk-hidden@m" width="" height="300"></canvas>

    <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/jewelry-hero-1.webp" 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>
            <h1 class="white"><?php the_title(); ?></h1>


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

<div class="uk-container uk-container-large uk-margin-xlarge-top">
	<div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <div>
      <h2 class="uk-margin-remove">Our Collections</h2>
    </div>
    <div>
      <P>Browse through our collections. Jewelhouse Canada carries an attractive, price-pointed selection of 10 karat & 14 karat Chain, 10 karat hoop earrings, handmade catalogue of special order any karat & length chain, program trays and body jewellery.</P>
    </div>
  </div>

  <div class="uk-grid-small uk-margin-large-top uk-margin-xlarge-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
        	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/handmade-chains.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">Handmade Chains</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/handmade-chains/" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-grid-small" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/program-trays.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">Program Trays</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/program-trays/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/body-jewellery.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">Body Jewellery</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/body-jewellery/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/14-karat-chains-2.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">14 Karat Chains</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/14-karat-chains/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>

          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/18-karat-chains.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">18 Karat Chains</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/18-karat-chains/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
          <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/10-karat-chains-bracelets.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">10 Karat Chains and Bracelets</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/10-karat-chains-bracelets" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
          <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/10-karat-hoop-earrings.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">10 Karat Hoop Earrings</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/10-karat-hoop-earrings/" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
  </div>
</div>

<?php get_footer(); ?>
