Bootstrap Snippet shop card using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
  <ul>
    <i class='fa fa-shopping-cart'>
      <span class='counter'></span>
    </i>
  </ul>
</header>
<div class='row'>
  <div class='product--blue'>
    <div class='product_inner'>
      <img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
      <p>Nike Air (Women)</p>
      <p>Size 7</p>
      <p>Price £199.99</p>
      <button>Add to basket</button>
    </div>
    <div class='product_overlay'>
      <h2>Added to basket</h2>
      <i class='fa fa-check'></i>
    </div>
  </div>
  <div class='product--orange'>
    <div class='product_inner'>
      <img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
      <p>Nike Air (Men)</p>
      <p>Size 10</p>
      <p>Price £99.99</p>
      <button>Add to basket</button>
    </div>
    <div class='product_overlay'>
      <h2>Added to basket</h2>
      <i class='fa fa-check'></i>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700;
}
html, body {
  background: #EEE5E9;
}
header {
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}
header ul {
  padding: 1.2em 0 0.5em;
}
header span {
  padding: 0 0 0 0.5em;
}
header span, header i {
  color: #2B2D42;
}
header i:nth-of-type(2) {
  cursor: pointer;
}
.row {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {
  "use strict"
  
  var init = "No items yet!";
  var counter = 0;
  // Initial Cart
  $(".counter").html(init);
  
  // Add Items To Basket
  function addToBasket() {
    counter++;
    $(".counter").html(counter).animate({
      'opacity' : '0'
    },300, function() {
      $(".counter").delay(300).animate({
        'opacity' : '1'
      })
    })
  }
  // Add To Basket Animation
  $("button").on("click", function() {
    addToBasket(); $(this).parent().parent().find(".product_overlay").css({
      'transform': ' translateY(0px)',
      'opacity': '1',
      'transition': 'all ease-in-out .45s'
    }).delay(1500).queue(function() {
      $(this).css({
        'transform': 'translateY(-500px)',
        'opacity': '0',
        'transition': 'all ease-in-out .45s'
      }).dequeue();
    });
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"shop card"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"shop card" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"shop card"
Bootstrap 3.0.0 Snippet by evarevirus