<div class="container">
    <img src="https://s5.postimg.cc/n8uucy6qv/strawberryx300n.png" alt="Strawberry" class="img-fruit" />
  <h3>Strawberries</h3>
  <div class="control-btn">
    <span class="prev">
      <i class="fa fa-long-arrow-left"></i>
    </span>
    <span class="next">
      <i class="fa fa-long-arrow-right"></i>
    </span>
  </div>
  <p>
    The garden strawberry is a widely grown hybrid species of the genus Fragaria. It is cultivated worldwide for its fruit.
  </p>
  <div class="properties">
    <div class="qty">
      <h4>Quantity</h4>
      <i class="fa fa-minus"></i>
      <span class="number">1</span>
      <i class="fa fa-plus"></i>
    </div><div class="price">
      <h4>Total Price</h4>
      <span class="price-inr">
        <i class="fa fa-inr"></i>
        <span class="amount">7</span>
      </span>
    </div><div class="delivery">
      <h4>Delivery</h4>
      <i class="fa fa-fighter-jet"></i>
      <span class="time">In 60 mins</span>
    </div>
  </div>
  <input class="ip-add-cart" type="button" value="Add to cart" />
</div>








<!-- Start Credit -->
<div class="credit">
  Inspired By
  <a href="https://dribbble.com/shots/2730176-Product-Card-Fruit" target="_blank">
    <img src="https://s5.postimg.cc/xkc92q4rr/Logo.png" alt="Dribbble Logo" class="d-logo" />
  </a>
</div>
<!-- End Credit -->

@import "bourbon"
@import "compass"
*
  margin: 0
  padding: 0
  outline: none

html
  height: 100%

body
  background: #ccc
  font-family: 'Libre Franklin', sans-serif
  // Needs latest Compass, add '@import "compass"' to your scss
  // Permalink - use to edit and share this gradient:
  // http://colorzilla.com/gradient-editor/#d2eaea+0,f9f9f9+49,f9f9f9+49,f7eec3+100
  background-repeat: no-repeat
  background-color: #d2eaea // Old browsers
  @include filter-gradient(#d2eaea, #f7eec3, horizontal) // IE6-9 fallback on horizontal gradient
  @include background-image(linear-gradient(left bottom,  #d2eaea 0%,#f9f9f9 49%,#f9f9f9 49%,#f7eec3 100%))


div.container
  position: relative
  margin: 70px auto
  width: 350px
  height: 470px
  text-align: center
  background: #fff
  @include box-shadow(0px 10px 25px rgba(0,0,0,0.1), 0px 60px 75px -25px rgba(0,0,0,0.2))
  cursor: default
  
  img.img-fruit
    width: 290px
    margin-top: -60px
  
  div.control-btn span
    position: absolute
    margin-top: 20px
    width: 35px
    height: 35px
    background: #f22d34
    color: #fff
    font-size: 13px
    display: inline-block
    line-height: 36px
    cursor: pointer
    @include border-radius(100%)
    @include box-shadow(0px 2px 7px rgba(241,44,51,0.7))
    @include transition(background 0.3s ease-in)
      
    &:hover
      background: #de2128
    
  span.prev
    left: -17.5px
    
  span.next
    right: -17.5px
    
  h3
    font-size: 30px
    letter-spacing: 3px
    margin-top: 35px
    color: #ea1d24
    
  p
    font-size: 11px
    padding: 15px 45px
    color: #878787
    line-height: 22px

  div.properties
    margin-top: 20px
    height: 130px
    
    &:before, &:after
      content: ' '
      display: inline-block
    
    &:after
      clear: both
    
    div
      display: inline-block
      text-align: center
      width: 33.33%
      float: left
      
      h4
        font-size: 14px
        color: #757575
        padding: 25px 0px
    
    .qty
      .fa
        font-size: 7px
        color: #757575
        background: #dfdfdf
        @include border-radius(100%)
        padding: 4px
        cursor: pointer
        
      .number
        font-size: 11px
        color: #757575
        padding: 5px
        
    .price
      .fa
        font-size: 18px
        color: #757575
        
      .amount
        color: #646363
        font-size: 18px
        padding: 0 5px
        
    .delivery
      .fa
        font-size: 15px
        color: #757575
        
      .time
        display: inline-block
        color: #757575
        font-size: 11px
        
      
        
  .ip-add-cart
    border: none
    padding: 12px 50px
    background: #f22d34
    color: #fff
    font-size: 12px
    text-transform: uppercase
    font-weight: bold
    //margin-top: 33px
    @include border-radius(25px)
    @include box-shadow(0px 15px 45px rgba(242,45,52,0.5))
    cursor: pointer
    @include transition(background 0.3s ease-in)
    
    &:hover
      background: #da1920
          
/* Start Credit Style */

div.credit 
  position: absolute
  padding: 0px 10px
  padding-bottom: 8px
  height: 15px
  right: 10px
  top: 10px
  display: inline-block
  background: rgba(255, 255, 255, 0.7)
  font-size: 7px
  font-weight: bold
  color: rgba(0, 0, 0, 0.7)
  border: 1px solid rgba(0, 0, 0, 0.1)
  box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3)
  cursor: default


  &:hover
    border: 1px solid rgba(0, 0, 0, 0.2)

  img 
    position: relative
    width: 14px
    margin-left: 3px
    top: 4px

/* End Credit Style */

var num = 1,
    price = 7;

$(".fa-plus").on("click",function(){
  
  var _num = parseInt($("span.number").text()) + 1;
  $("span.number").text(_num);
  updatePrice(_num,price);
});

$(".fa-minus").on("click",function(){
  
  var _num = parseInt($("span.number").text()) - 1;
  if(_num > -1)
    $("span.number").text(_num);
  updatePrice(_num,price);
});

function updatePrice(num,price){
  $(".amount").text(num*price);
}