site demo

by jitendravyas

HTML

<div id="wrapper">
    <!--select boxes for select any product starts here-->
    <!--End of select boxes-->
        <!--main product list in wrapper div starts-->
        <div id="main-product-area">
                <figure>
                <img class="main_img" src="http://www.shikoku-garden.com/images/007-005.jpg"  alt="Carine Gilson" />
                <span class="save-money_label"> <img src="http://i.imgur.com/vWkpL.png" alt="save-money"><span class="rotate">40%</span></span>
                <span class="curle-label_bg"><img src="http://i.imgur.com/3KQbS.png" alt=""></span>
                <figcaption>
                <span class="product-brand">Brand of product</span>
                <span class="product-name"> Name of Product</span>
                <span class="save-money">Save 395.05</span>
                <span class="product-price">€169.30</span>
                </figcaption>
                </figure>
                </a>
        </div>
</div>

CSS

body { color:#2a2a2a; font-family:"Helvetica Neue", Helvetica, sans-serif; }

figure { float: left; margin-right: 35px; margin-top: 35px; position: relative; width:31.1216%; }

figcaption { font-size: 20px; font-weight: bold; line-height: normal; text-align: left; text-transform: uppercase; color:#2a2a2a; }

.product-brand { font-size:15px; display:inline-block; font-weight: bold; width:100% }

.product-name { font-size: 20px; display:inline-block; font-weight: bold; width:100% }

.product-price { color:#d637b7; font-size:15px; display:inline; }

.save-money { color: #888888; display: inline; font-size: 15px; margin-right: 10px; }




.save-money_label img {
position: absolute;
right: 18px;   
top: 0px;
width: 30%;
}
.curle-label_bg img {
position: absolute;
right: 17px;
top: 0px;
width: 16%;
z-index: 2;
}



/*---------------------------------------------------------------------------------------------*/


@media only screen and (max-width : 768px) {
 #wrapper {
width:642px;
padding-left: 50px;
 margin:0 auto;
}
.main_img {
width:268px;
}
figure {
 border:2px solid red;
width:268px;
}
.rotate {
color: #FFFFFF;
font-size: 23px;
font-weight: bold;
padding-right: 40px;
position: absolute;
 right: -2px;
top: 16px;
text-shadow: 0 1px 1px #000000;
/* Safari */
-webkit-transform: rotate(-19deg); /* Firefox */
-moz-transform: rotate(-19deg); /* IE */
-ms-transform: rotate(-25deg); /* Opera */
-o-transform: rotate(-19deg);
}
}
/*---------------------------------------------------------------------------------------------*/
@media only screen and (min-width : 769px) and (max-width : 1024px) {
#wrapper {
 margin:0 auto;
 padding-left: 50px;
 width: 963px;
}
.main_img {
 max-width:268px;
}
figure {
 border:2px solid red;
width:268px;
border:2px solid green;
}
.rotate {
color: #FFFFFF;
font-size: 23px;
font-weight: bold;
padding-right: 40px;
position: absolute;
 right: -2px;
top: 16px;
text-shadow: 0 1px 1px #000000;
 /* Safari */
-webkit-transform: rotate(-19deg); /*...