Bootstrap Snippet Single Product E-Commerce with Ribbon using HTML CSS Bootstrap Javascript

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 ---------->
 
 <div class="content-product col-xs-12 col-md-4 ">  
          <article class="single-product">
              
            <div class="photo">
              <a href="#"> <img src="https://image.ibb.co/mCYmyR/product_lapm_copy.jpg" class="img-responsive" alt="Product Image" /> </a>
            </div>
            <div class="info">
              <div class="row">
                <div class="price-details col-md-6">
                    <p class="stock">
                    In Stock
                  </p>
                  <p class="name-product">
                    Medium Luna Pendany Light, Antique Silver
                  </p>
                    <p class="price-from">
                    Price From
                  </p>
                        <!--<div class="col-md-6 price-new-container">-->
                    <!--        <span class="dollar">$</span> -->
                    <!--        <span class="price-new">110</span>-->
                    <!--        <span class="after-price">00</span>-->
                        <!--</div>-->
                        
                        <div class="col-md-2 price-sale-container">
                            <span class="dollar-sale">$</span>  
                            <span class="price-sale">110</span>
                            <span class="after-price-sale">00</span>
                        </div>
                        
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
/* font Awesome http://fontawesome.io*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/* Animation.css*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
/* fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,700i');
.single-product {
  background: #ffffff;
  margin-bottom:50px;
  margin-top:50px;
  margin-left:50px;
}
.single-product .options {
  position:absolute;
  top:6px;
  right:22px;
}
.single-product .photo {
  overflow: hidden;
}
.single-product .photo .options {
  display:none;
}
.single-product .photo img {
  margin: 0 auto;
  width: 260px;
  height:260px;
  float:left;
}
.single-product .options-cart {
  position:absolute;
  left:22px;
  top:6px;
  display:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//The page load showing first element
        jQuery('.select-choose .value').addClass('inactive').hide();
        jQuery('.value:first').addClass('active').removeClass('inactive').show();
  //Showing all option
        jQuery('.select-choose').click(function(){
          jQuery(this).find('.value').show();
        });
   //Showing selected option
        jQuery('.select-choose').mouseleave(function(){
          jQuery(this).find('.value.inactive').hide();
        });
 //Onclick making the option active
        jQuery('.select-choose .value').click(function(){
            jQuery('.value').addClass('inactive').removeClass('active');
          jQuery(this).addClass('active').removeClass('inactive');
          jQuery('.select-choose .value .inactive').hide();
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Single Product E-Commerce with Ribbon"
Bootstrap 3.0.0 Snippet by kurtzawn

Related: See More

Questions / Comments:

"Single Product E-Commerce with Ribbon" Bootstrap 3.0.0 Snippet by kurtzawn

Related: See More

Questions / Comments:

"Single Product E-Commerce with Ribbon"
Bootstrap 3.0.0 Snippet by kurtzawn