<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Spring Red Dress"
    data-price="44.00"
    data-colors="true"
    data-variants="true"
    data-path="assets/img/products/1"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/1.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Spring Red Dress</h3>
      <p>A beautiful dress for you best evenings and important dates</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>147</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$44.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Cool Shirt"
    data-price="29.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/2.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Cool Shirt</h3>
      <p>A shirt that will make you look nice and feel relax</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>42</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$29.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Military Short"
    data-price="39.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/3.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Military Short</h3>
      <p>An awesome shorts for chillout and trips, blends in with anything</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>56</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$39.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Cool Backpack"
    data-price="125.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/4.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Cool Backpack</h3>
      <p>Feeling adventurous? You got to try this awesome backpack</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>212</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$125.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The Bob"
    data-price="15.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/5.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The Bob</h3>
      <p>Everyone needs a nice bob to protect himself from the sun</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>18</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$15.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The Girly Top"
    data-price="34.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/6.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The Girly Top</h3>
      <p>Wanna look nice and fresh? Why not try this beautiful top</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>92</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$34.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The T-Shirt"
    data-price="18.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/7.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The T-Shirt</h3>
      <p>A nice t-shirt that goes everywhere with anything, try it</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>269</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$18.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The Gala Dress"
    data-price="89.00"
    data-colors="true"
    data-variants="true"
    data-path="assets/img/products/8"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/8.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The Gala Dress</h3>
      <p>A beautiful dress for your business evenings and meetings</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>66</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$89.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The Totte Bag"
    data-price="112.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/9.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The Totte Bag</h3>
      <p>Classy, elegant and simple, this bag has anything you need</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>423</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$112.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Jeans Skirt"
    data-price="55.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/10.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Jeans Skirt</h3>
      <p>A beautiful skirt made with jeans for urban outfits</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>48</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$55.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Straw Hat"
    data-price="14.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/11.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Straw Hat</h3>
      <p>The classic straw hat, beautifully crafted, for your beach trips</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>157</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$14.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="The Polo"
    data-price="45.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/12.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>The Polo</h3>
      <p>A classic but elegant polo for chill outfits</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>74</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$45.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Urbanic Shoes"
    data-price="99.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/13.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Urbanic Shoes</h3>
      <p>Nice shoes that you can wear with almost anything</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>145</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$99.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Chill Shoes"
    data-price="90.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/14.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Chill Shoes</h3>
      <p>Nice shoes that you can wear with almost anything</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>21</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$90.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Skaters"
    data-price="85.00"
    data-colors="false"
    data-variants="true"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/15.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Skaters</h3>
      <p>Nice shoes that you can wear with almost anything</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>43</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$85.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Rabbit Toddler"
    data-price="50.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/16.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Rabbit Toddler</h3>
      <p>A really cute and carefully crafted outfit for your little ones</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>269</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$50.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Fox Toddler"
    data-price="50.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/17.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Fox Toddler</h3>
      <p>A really cute and carefully crafted outfit for your little ones</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>291</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$50.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Rainbow Top"
    data-price="36.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/18.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Rainbow Top</h3>
      <p>A really cute and carefully crafted outfit for your little ones</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>118</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$36.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Purple Overalls"
    data-price="65.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/19.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Purple Overalls</h3>
      <p>A nice and cute overall that can be worn with almost anything</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>78</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$65.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Cute Jeans"
    data-price="42.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/20.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Cute Jeans</h3>
      <p>A beautiful and nicely handcrafted product for your kids</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>88</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$42.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Glassy Mod. A"
    data-price="32.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/21.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Glassy Mod. A</h3>
      <p>The Glassy brands returns with it's usual outstanding quality</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>43</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$32.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Glassy Mod. B"
    data-price="28.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/22.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Glassy Mod. B</h3>
      <p>The Glassy brands returns with it's usual outstanding quality</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>12</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$28.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Glassy Mod. C"
    data-price="36.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/23.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Glassy Mod. C</h3>
      <p>The Glassy brands returns with it's usual outstanding quality</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>41</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$36.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Glassy Mod. D"
    data-price="24.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/24.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Glassy Mod. D</h3>
      <p>The Glassy brands returns with it's usual outstanding quality</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>19</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$24.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
<!--Product-->
<div
  class="column is-one-fifth-fullhd is-one-quarter-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
>
  <div
    class="product-card"
    data-name="Glassy Mod. E"
    data-price="43.00"
    data-colors="false"
    data-variants="false"
  >
    <a class="quickview-trigger">
      <i data-feather="more-horizontal"></i>
    </a>
    <div class="product-image">
      <img src="assets/img/products/25.svg" alt="" />
    </div>
    <div class="product-info">
      <h3>Glassy Mod. E</h3>
      <p>The Glassy brands returns with it's usual outstanding quality</p>
    </div>
    <div class="product-actions">
      <div class="left">
        <i data-feather="heart"></i>
        <span>96</span>
      </div>
      <div class="right">
        <a class="button is-solid accent-button raised">
          <i data-feather="shopping-cart"></i>
          <span>$43.00</span>
        </a>
      </div>
    </div>
  </div>
</div>
