<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>
<div class="col-md-4 price-old-container">
<span class="dollar">$</span>
<span class="price-old">180</span>
<span class="after-price">00</span>
</div>
</div>
</div>
<div class="bg-hover">
<!--Ribbon-->
<div class="ribbon-wrapper-new"><div class="ribbon-new">NEW</div></div>
<!--<div class="ribbon-wrapper-sale"><div class="ribbon-sale">SALE</div></div>-->
<div class="ribbon-wrapper-red"><div class="ribbon-red">CLEARANCE</div></div>
<!--<div class="ribbon-wrapper-red"><div class="ribbon-intro">INTRO PRICE</div></div>-->
<div class="inner-bg-hover">
<div class="name-prodcut-hover col-xs-12 col-md-8">
<p class="name-product">
Medium Luna Pend
</p>
</div>
<div class="name-price-hover col-xs-12 col-md-4">
<span class="price-hover">
<span class="dollar">$</span>
<span class="price-new">110</span>
<span class="after-price">00</span>
</span>
</div>
<div class="col-md-8 select-choose">
<div class="form-control select-choose">
<div class="value">- Choose finish option -</div>
<div class="value">- AT -</div>
<div class="value">- MT -</div>
<div class="value">- TB -</div>
</div>
</div>
<div class="col-md-8 select-choose">
<div class="form-control select-choose">
<div class="value">- Choose color option -</div>
<div class="value">- Blue -</div>
<div class="value">- Red -</div>
<div class="value">- Brown -</div>
</div>
</div>
<div class="btn-more-add">
<div class="col-xs-12 col-md-6 btn-moredetail">
<a href="#" class="btn btn-primary btn-default btn-more">More detail</a>
</div>
<div class="col-xs-12 col-md-6 btn-addtocart">
<a href="#" class="btn btn-primary btn-default btn-add">Add to cart</a>
</div>
</div>
<div class="wishlist-registry">
<div class="col-xs-6 col-md-6 addtowishlist">
<p class="btn-add">
<i class="fa fa-heart"></i><a href="#">Add to wishlist</a>
</p>
</div>
<div class="col-xs-6 col-md-6 addtoregistry">
<p class="btn-details">
<i class="fa fa-gift"></i><a href="#">Add to registry</a>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</article>
</div>
<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>
<div class="col-md-4 price-old-container">
<span class="dollar">$</span>
<span class="price-old">180</span>
<span class="after-price">00</span>
</div>
</div>
</div>
<div class="bg-hover">
<!--Ribbon-->
<div class="ribbon-wrapper-new"><div class="ribbon-new">NEW</div></div>
<!--<div class="ribbon-wrapper-sale"><div class="ribbon-sale">SALE</div></div>-->
<div class="ribbon-wrapper-red"><div class="ribbon-red">CLEARANCE</div></div>
<!--<div class="ribbon-wrapper-red"><div class="ribbon-intro">INTRO PRICE</div></div>-->
<div class="inner-bg-hover">
<div class="name-prodcut-hover col-xs-12 col-md-8">
<p class="name-product">
Medium Luna Pend
</p>
</div>
<div class="name-price-hover col-xs-12 col-md-4">
<span class="price-hover">
<span class="dollar">$</span>
<span class="price-new">110</span>
<span class="after-price">00</span>
</span>
</div>
<div class="col-md-8 select-choose">
<div class="form-control select-choose">
<div class="value">- Choose finish option -</div>
<div class="value">- AT -</div>
<div class="value">- MT -</div>
<div class="value">- TB -</div>
</div>
</div>
<div class="col-md-8 select-choose">
<div class="form-control select-choose">
<div class="value">- Choose color option -</div>
<div class="value">- Blue -</div>
<div class="value">- Red -</div>
<div class="value">- Brown -</div>
</div>
</div>
<div class="btn-more-add">
<div class="col-xs-12 col-md-6 btn-moredetail">
<a href="#" class="btn btn-primary btn-default btn-more">More detail</a>
</div>
<div class="col-xs-12 col-md-6 btn-addtocart">
<a href="#" class="btn btn-primary btn-default btn-add">Add to cart</a>
</div>
</div>
<div class="wishlist-registry">
<div class="col-xs-6 col-md-6 addtowishlist">
<p class="btn-add">
<i class="fa fa-heart"></i><a href="#">Add to wishlist</a>
</p>
</div>
<div class="col-xs-6 col-md-6 addtoregistry">
<p class="btn-details">
<i class="fa fa-gift"></i><a href="#">Add to registry</a>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</article>
</div>
/* 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;
}
.single-product .options-cart-round button .fa {
font-size:22px;
}
.single-product .info {
padding: 10px;
margin-top: 1px;
}
.single-product .price-details {
width: 100%;
margin-top: 5px;
}
.single-product .price-details h1 {
font-size: 14px;
line-height: 20px;
margin: 0;
float:left;
}
.single-product .price-details .name-product {
margin-bottom: 0px;
font-size:16px;
font-weight:600;
color:#464646;
width:260px;
}
.single-product .price-details .price-from
{
font-size:12px;
font-weight:600;
color:#464646;
text-transform:uppercase;
margin-top:10px;
margin-bottom:0;
}
.single-product .price-details .stock {
margin-bottom: 5px;
font-size:12px;
font-weight:600;
color:#4d6120;
text-transform:uppercase;
}
.single-product .price-details span {
float:left;
}
.single-product .price-details span .dollar
{
font-size:16px;
color:#252525;
}
.single-product .price-details .price-new {
font-size:24px;
color:#252525;
font-weight:bold;
}
.single-product .price-details span .dollar
{
font-size:16px;
color:#252525;
}
.single-product .price-details .rice-sale-container span
{
float:left;
}
.single-product .price-details .price-sale-container,
.single-product .price-details .price-old-container
{
padding-right: 0;
padding-left: 0;
}
.single-product .price-details span .dollar-sale,
.single-product .price-details span .after-price-sale
{
font-size:16px;
color:#d61e39;
}
.single-product .price-details span .price-sale {
font-size:24px;
color:#d61e39;
font-weight:bold;
}
.single-product .price-details .price-old {
font-size:18px;
text-decoration:line-through;
}
.content-product:hover .bg-hover
{
opacity:1;
}
.bg-hover
{
opacity: 0;
position: absolute;
top: 8%;
left: 10%;
width: 286px;
height: 430px;
margin-left: 0;
border:solid 1px #d3d3d3;
}
.content-product .bg-hover .inner-bg-hover
{
position:absolute;
bottom:0;
background-color:#ffffff;
}
.content-product .bg-hover p.name-product
{
margin-bottom: 3px;
font-size:16px;
font-weight:600;
color:#464646;
padding-top:10px;
}
.content-product .bg-hover .photo-hover {
margin-left: 12px;
margin-top: 8px;
}
.content-product .bg-hover .name-price-hover
{
padding-right: 12px;
padding-left: 0;
text-align: right;
}
.single-product .bg-hover span .dollar
{
font-size:16px;
color:#252525;
}
.single-product .bg-hover .price-new {
font-size:24px;
color:#252525;
font-weight:bold;
}
.single-product .bg-hover span .dollar
{
font-size:16px;
color:#252525;
}
.single-product .bg-hover .addtowishlist,
.single-product .bg-hover .addtoregistry
{
display:block;
}
.single-product .btn-add a,
.single-product .btn-details a
{
padding-left:3px;
font-size:12px;
color:#636363;
text-transform:uppercase;
display: inline;
}
.single-product .bg-hover .select-choose
{
margin-bottom: 5px;
padding-left: 0;
padding-right: 0;
margin-left: 6px;
}
.single-product .bg-hover #selectbasic
{
border-radius: 0;
width: 260px;
height: 40px;
padding-left:5px;
font-size:14px;
color:#454545;
}
.single-product .bg-hover .addtowishlist
{
padding-right:0;
padding-left: 9px;
padding-top:5px;
}
.single-product .bg-hover .addtoregistry
{
padding-right:0;
padding-left:6px;
padding-top:5px;
}
.single-product .bg-hover .btn-default
{
border-radius: 0;
width: 126px;
height: 40px;
padding: 9px;
}
.single-product .bg-hover .btn-moredetail
{
padding-left: 10px;
}
.single-product .bg-hover .btn-addtocart
{
padding-left: 7px;
}
.single-product .bg-hover a.btn-more
{
background: transparent;
font-size:14px;
color:#252525;
text-transform:uppercase;
border-color:#e2e2e2;
}
.single-product .bg-hover a.btn-more:hover
{
background:#252525;
color:#ffffff;
}
.single-product .bg-hover a.btn-add
{
background: #d61e39;
font-size:14px;
color:#ffffff;
text-transform:uppercase;
border-color:#e2e2e2;
}
.single-product .bg-hover a.btn-add:hover
{
color:#ffffff;
background-color: #9b1a2e;
}
/* Ribbon New */
.ribbon-wrapper-new {
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 7px;
left: 7px;
}
.ribbon-new {
font: bold 12px Open sans;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(320deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 6px 0;
left: -25px;
top: 15px;
width: 135px;
background-color: #4d6120;
color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.ribbon-new:before, .ribbon-new:after {
content: "";
border-top: 5px solid #273110;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
bottom: -5px;
}
.ribbon-new:before {
left: 0;
}
.ribbon-new:after {
right: 0;
}
/* Ribbon Sale */
.ribbon-wrapper-sale {
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 7px;
left: 7px;
}
.ribbon-sale {
font: bold 12px Open sans;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(320deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 6px 0;
left: -25px;
top: 15px;
width: 135px;
background-color: #d61e39;
color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.ribbon-sale:before, .ribbon-sale:after {
content: "";
border-top: 5px solid #7b1121;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
bottom: -5px;
}
.ribbon-sale:before {
left: 0;
}
.ribbon-sale:after {
right: 0;
}
/* Ribbon CLEARANCE */
.ribbon-wrapper-red {
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 7px;
right: 7px;
}
.ribbon-red {
font: bold 12px Open sans;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 6px 0;
left: -4px;
top: 22px;
width: 135px;
background-color: #d61e39;
color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.ribbon-red:before, .ribbon-red:after {
content: "";
border-top: 5px solid #7b1121;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-red:before {
left: 0;
}
.ribbon-red:after {
right: 0;
}
/* Ribbon INTRO PRICE */
.ribbon-wrapper-intro {
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 7px;
right: 7px;
}
.ribbon-intro {
font: bold 12px Open sans;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 6px 0;
left: -4px;
top: 22px;
width: 135px;
background-color: #d61e39;
color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.ribbon-intro:before, .ribbon-intro:after {
content: "";
border-top: 5px solid #7b1121;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-intro:before {
left: 0;
}
.ribbon-intro:after {
right: 0;
}
//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();
});
