<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CodeHim">
    <title>Add To Cart using HTML Example</title>
    
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600,400italic'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css'>
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
	<!-- Demo CSS (No need to include it into your project) -->
	<link rel="stylesheet" href="css/demo.css">
  
  </head>
  <body>
 <header class="intro">
 <h1>Add To Cart using HTML Example</h1>
 <p>A simple add to cart using HTML, CSS and JavaScript.</p>

 <div class="action">
 <a href="https://www.codehim.com/collections/javascript-shopping-cart-examples-with-demo/" title="Back to download and tutorial page" class="btn back">Back to Tutorial</a>
 </div>
 </header>
      
 <main>
<!-- Start DEMO HTML (Use the following code into your project)-->
<div class="wrapper">

  <header class="site-header">
    <div class="inner-wrap">
      <h1>Shopping.</h1>
      <ul class="list-inline">
        <li><a href="#" class="search"><i class="fa fa-search"></i></a></li>
        <li><a href="#" class="account">Login</a></li>
        <li><button class="your-cart js-toggle-cart" data-item-num="3">Your Cart <i class="fa fa-lg fa-shopping-cart"></i></button></li>
      </ul>
    </div>
  </header>

  <div class="site-toolbar">
    <div class="inner-wrap clearfix">
      <div class="notifications animated"><span>Amazing Product</span> Added to Cart!</div>
    </div>
  </div>

  <div class="filter-grid">
    <div class="inner-wrap">
      <div class="filter-cell">
        <select class="form-control">
          <option value="*">Category</option>
          <option value="fav">Favorites</option>
        </select>
      </div>
      <div class="filter-cell">
        <select class="form-control">
          <option  value="*">Product Type</option>
          <option value="square">Square</option>
          <option value="circular">Circular</option>
        </select>
      </div>
      <div class="filter-cell">
        <select class="form-control" disabled="true">
          <option>Price</option>
        </select>
      </div>
      <div class="filter-cell">
        <select class="form-control" disabled="true">
          <option>Brand</option>
        </select>
      </div>
    </div>
  </div>

  <div class="inner-wrap content-wrap">

    <div class="product-grid">
      <div class="grid-product square fav">
        <div class="img-name camera"><h4>Camera</h4></div>
        <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product circular fav">
        <div class="img-name watch"><h4>Watch</h4></div>
        <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product square">
        <div class="img-name canoe"><h4>Canoe</h4></div>
        <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product">
        <div class="img-name typewriter"><h4>Typewriter</h4></div>
        <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product square">
        <div class="img-name canoe"><h4>Canoe</h4></div>
        <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product circular">
        <div class="img-name typewriter"><h4>Typewriter</h4></div>
        <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product">
        <div class="img-name camera"><h4>Camera</h4></div>
        <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product fav">
        <div class="img-name watch"><h4>Watch</h4></div>
        <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product square">
        <div class="img-name typewriter"><h4>Typewriter</h4></div>
        <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product">
        <div class="img-name camera"><h4>Camera</h4></div>
        <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product circular square fav">
        <div class="img-name canoe"><h4>Canoe</h4></div>
        <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product fav">
        <div class="img-name watch"><h4>Watch</h4></div>
        <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product tasty">
        <div class="img-name typewriter"><h4>Typewriter</h4></div>
        <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product circular">
        <div class="img-name watch"><h4>Watch</h4></div>
        <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product fav">
        <div class="img-name camera"><h4>Camera</h4></div>
        <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>
      <div class="grid-product square">
        <div class="img-name canoe"><h4>Canoe</h4></div>
        <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p>
      </div>

    </div>
  </div>

  <div class="sticky"></div>

</div>


<div class="cart">
  
  <div class="inner-wrap">
    <h2>Your Cart</h2>
    
    <table class="cart-table">
      <thead>
        <tr>
          <th class="product-remove">Remove Items</th>
          <th class="product-name">Product</th>
          <th class="product-price">Price</th>
          <th class="product-quantity">Quantity</th>
          <th class="product-line-total">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr id="product-camera">
          <td><button type="button" class="product-remove" data-id="product-camera"><i class="fa fa-times"></i></button></td>
          <td>Camera</td>
          <td class="product-price" data-price="3.99">3.99</td>
          <td class="product-quantity">
            <input type="number" pattern="\d*" step="1" min="1" max="5" value="1" data-id="product-camera">
            <button class="plus js-number-control">
              <i class="fa fa-plus-square"></i>
            </button>
            <button class="minus js-number-control">
              <i class="fa fa-minus-square"></i>
            </button>
          </td>
          <td class="product-line-total" id="product-camera-total" data-line-total="3.99">3.99</td>
        </tr>
      </tbody>
    </table>
    
  </div>

</div>
<!-- END EDMO HTML (Happy Coding!)-->
 </main>
 
      
  <footer class="credit">Author: Filip Danisko - Distributed By: <a title="Awesome web design code & scripts" href="https://www.codehim.com?source=demo-page" target="_blank">CodeHim</a></footer>
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js'></script>
<script  src="./js/script.js"></script>
  
  </body>
</html>