cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div class="cart-icon-top">
</div>

<div class="cart-icon-bottom">
</div>

<div id="checkout">
	CHECKOUT
</div>

<div id="info">
	<p class="i1">Add to cart interaction prototype by Virgil Pana</p>
<p>    Follow me on <a href="https://dribbble.com/virgilpana" style="color:#ea4c89" target="_blank">Dribbble</a> | <a style="color:#2aa9e0" href="https://twitter.com/virgil_pana" target="_blank">Twitter</a></p>
</div>

<div id="header">	
	<ul>
        <li><a href="">Home</a></li>
        <li><a href="">BRANDS</a></li>
        <li><a href="">DESIGNERS</a></li>
        <li><a href="">CONTACT</a></li>                                              
    </ul>		
</div>

<div id="sidebar">
	<h3>CART</h3>
    <div id="cart">
    	<span class="empty">No items in cart.</span>       
    </div>
    
    <h3>CATEGORIES</h3>
    <div class="checklist categories">
    	<ul>
        	<li><a href=""><span></span>New Arivals</a></li>
            <li><a href=""><span></span>Accesories</a></li>
            <li><a href=""><span></span>Bags</a></li>
            <li><a href=""><span></span>Dressed</a></li>
            <li><a href=""><span></span>Jackets</a></li>
            <li><a href=""><span></span>jewelry</a></li>
            <li><a href=""><span></span>Shoes</a></li>
            <li><a href=""><span></span>Shirts</a></li>
            <li><a href=""><span></span>Sweaters</a></li>
            <li><a href=""><span></span>T-shirts</a></li>
        </ul>
    </div>
    
    <h3>COLORS</h3>
    <div class="checklist colors">
    	<ul>
        	<li><a href=""><span></span>Beige</a></li>
            <li><a href=""><span style="background:#222"></span>Black</a></li>
            <li><a href=""><span style="background:#6e8cd5"></span>Blue</a></li>
            <li><a href=""><span style="background:#f56060"></span>Brown</a></li>
            <li><a href=""><span style="background:#44c28d"></span>Green</a></li>
        </ul>
        
        <ul>
        	<li><a href=""><span style="background:#999"></span>Grey</a></li>
            <li><a href=""><span style="background:#f79858"></span>Orange</a></li>
            <li><a href=""><span style="background:#b27ef8"></span>Purple</a></li>
            <li><a href=""><span style="background:#f56060"></span>Red</a></li>
            <li><a href=""><span style="background:#fff;border: 1px solid #e8e9eb;width:13px;height:13px;"></span>White</a></li>
        </ul>        
    </div>
    
    <h3>SIZES</h3>
    <div class="checklist sizes">
    	<ul>
        	<li><a href=""><span></span>XS</a></li>
            <li><a href=""><span></span>S</a></li>
            <li><a href=""><span></span>M</a></li>
        </ul>
        
        <ul>
        	<li><a href=""><span></span>L</a></li>
            <li><a href=""><span></span>XL</a></li>
            <li><a href=""><span></span>XXL</a></li>
        </ul>        
    </div>
    
     <h3>PRICE RANGE</h3>
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/price-range.png" alt="" />
</div>

<div id="grid-selector">
       <div id="grid-menu">
       	   View:
           <ul>           	   
               <li class="largeGrid"><a href=""></a></li>
               <li class="smallGrid"><a class="active" href=""></a></li>
           </ul>
       </div>
       
       Showing 1–9 of 48 results 
</div>

<div id="grid">
    <div class="product">
    	<div class="info-large">
        	<h4>FLUTED HEM DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#f56060"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/1.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>                
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">FLUTED HEM DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/1.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/2.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/3.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    
    <div class="product">
    <div class="info-large">
        	<h4>PLEAT PRINTED DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#f56060"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/2.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">PLEAT PRINTED DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/2.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/3.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/4.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    <div class="product">
    <div class="info-large">
        	<h4>FLOWY SHIRT DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#f56060"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">        
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/3.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">FLOWY SHIRT DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/3.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/4.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/1.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    
    <div class="product">
    <div class="info-large">
        	<h4>DOUBLE LAYER DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#f56060"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/4.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">DOUBLE LAYER DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/4.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/6.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    <div class="product">
    <div class="info-large">
        	<h4>BEAD DETAIL DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#f56060"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/5.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">BEAD DETAIL DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/5.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    
    <div class="product">
    <div class="info-large">
        	<h4>PLEATED DETAIL DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#9b887b"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/6.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">PLEATED DETAIL DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/6.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    <div class="product">
    <div class="info-large">
        	<h4>PRINTED DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#9b887b"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">PRINTED DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/5.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/4.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>
    
    <div class="product">
    <div class="info-large">
        	<h4>PRINTED DRESS</h4>
            <div class="sku">
            	PRODUCT SKU: <strong>89356</strong>
            </div>
             
            <div class="price-big">
            	<span>$43</span> $39
            </div>
             
            <h3>COLORS</h3>
            <div class="colors-large">
                <ul>
                    <li><a href="" style="background:#222"><span></span></a></li>
                    <li><a href="" style="background:#6e8cd5"><span></span></a></li>
                    <li><a href="" style="background:#9b887b"><span></span></a></li>
                    <li><a href="" style="background:#44c28d"><span></span></a></li>
                </ul> 
            </div>

            <h3>SIZE</h3>
            <div class="sizes-large">
 				<span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            
            <button class="add-cart-large">Add To Cart</button>                          
                         
        </div>
        <div class="make3D">
            <div class="product-front">
                <div class="shadow"></div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/8.jpg" alt="" />
                <div class="image_overlay"></div>
                <div class="add_to_cart">Add to cart</div>
                <div class="view_gallery">View gallery</div>
                <div class="stats">        	
                    <div class="stats-container">
                        <span class="product_price">$39</span>
                        <span class="product_name">PRINTED DRESS</span>    
                        <p>Summer dress</p>                                            
                        
                        <div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span></div>
                            <div class="c-red"><span></span></div>
                            <div class="c-white"><span></span></div>
                            <div class="c-green"><span></span></div>
                        </div>
                    </div>                       
                    </div>                         
                </div>
            </div>
            
            <div class="product-back">
                <div class="shadow"></div>
                <div class="carousel">
                    <ul class="carousel-container">
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/8.jpg" alt="" /></li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/7.jpg" alt="" /></li>
                    </ul>
                    <div class="arrows-perspective">
                        <div class="carouselPrev">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                        <div class="carouselNext">
                            <div class="y"></div>
                            <div class="x"></div>
                        </div>
                    </div>
                </div>
                <div class="flip-back">
                    <div class="cy"></div>
                    <div class="cx"></div>
                </div>
            </div>	  
        </div>	
    </div>    
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="menu.js"></script>

            
          
!
            
              /*	Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
	font-family: "Open Sans", sans-serif; 
	overflow:hidden;	
}
#wrapper{
	overflow: hidden;
	height: 1153px;
	width: 1643px;
	background:#fff;
}
#header{
	height:92px; 
	background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/header-icons.png") 1448px -2px no-repeat;
	border-bottom:1px solid #eee;
}
#header ul{padding:33px 0 0 45px;}
#header li{
	list-style:none;
	float:left;
	margin-right:30px;	
}
#header li a{
	font-weight:700;
	color:#333;
	font-size:14px;	
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:1px;
}
#headerli a:hover{
	color:#000;
	cursor:pointer;
}
#grid-selector{
	height: 10px;
	width: 1291px;
	padding: 40px 0 40px 30px;
	float: left;
	color: #5d5f68;
	font-size: 14px;
}
#grid-menu{
	float:right;
	width:105px;
}
#grid-menu ul{
  width: 65px;
  float: right;
  position: relative;
  top: -1px;}
#grid-menu li{	 
	 float:right;
	 width:25px;
	 height:25px;
	 list-style:none;
}
#grid-menu li a{	 
  	 display:block;
	 width:25px;	
	 height:25px;
	 background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/grid-menu.png") 0 0  no-repeat;
}
#grid-menu li.smallGrid{margin-right:7px;}
#grid-menu li.smallGrid a{background-position:0 -33px;}
#grid-menu li.largeGrid a{background-position:-37px 0;}

#grid-menu li.smallGrid a.active{background-position:0 0;}
#grid-menu li.largeGrid a.active{background-position:-37px -33px;}
 

#grid{	
	width: 1335px;
	position: absolute;
	left: 340px;
	height: 1200px;
	top: 180px;
}
#sidebar{
	float:left;
	background:#fff;
	width:275px;	
	padding:13px 0 0 45px;
	height:1400px;
	border-right:1px solid #eee;
}
#sidebar h3{
	color:#262626;
	text-transform:uppercase;
	font-size:14px;
	font-weight:700;
	padding:35px 0 10px 0;
	letter-spacing:1px;
	clear:both;
}
#cart{padding:0px;}
#cart .empty{
	font-style:italic;
	color:#a0a3ab;
	font-size:14px;
	letter-spacing:1px;	
}
#sidebar .checklist{
	padding:0;
}

.checklist ul li{	
	font-size:14px;
	font-weight:400;
	list-style:none;
	padding: 7px 0 7px 23px;
}
.checklist li span{
	float:left;
	width:11px;
	height:11px;
	margin-left:-23px;
	margin-top:4px;
	border: 1px solid #d1d3d7;
	position:relative;	
}
.sizes li span, .categories .sizes li{
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
	    -ms-transition: all 300ms ease-out;
	     -o-transition: all 300ms ease-out;
	        transition: all 300ms ease-out;
}
.checklist li a{
	color:#676a74;
	text-decoration:none;	
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
	    -ms-transition: all 300ms ease-out;
	     -o-transition: all 300ms ease-out;
	        transition: all 300ms ease-out;
}
.checklist li a:hover{	
	color:#222;
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
	    -ms-transition: all 300ms ease-out;
	     -o-transition: all 300ms ease-out;
	        transition: all 300ms ease-out;
}
.checklist a:hover span{ 	
	border-color:#a6aab3;	
}
.sizes a:hover span, .categories a:hover span{	
	border-color:#a6aab3;
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
	    -ms-transition: all 300ms ease-out;
	     -o-transition: all 300ms ease-out;
	        transition: all 300ms ease-out;
}
.checklist a span span{border:none;margin:0;float:none; position:absolute;top:0;left:0;}
.checklist a .x{
	display:block;
	width:0;	 
	height:2px;
	background:#5ff7d2;
	top:6px;
	left:2px;	
	-ms-transform: rotate(45deg); 
   	-webkit-transform: rotate(45deg); 
    transform: rotate(45deg);	
	-webkit-transition: all 50ms ease-out;
}
.checklist a .x.animate{
	width:4px;
	-webkit-transition: all 100ms ease-in;
	   -moz-transition: all 100ms ease-in;
	    -ms-transition: all 100ms ease-in;
	     -o-transition: all 100ms ease-in;
	        transition: all 100ms ease-in;
}
.checklist a .y{
	display:block;
	width:0px; 
	height:2px;
	background:#5ff7d2;
	top:4px;
	left:3px;	
	-ms-transform: rotate(13deg); 
   	-webkit-transform: rotate(135deg); 
    transform: rotate(135deg);	
	-webkit-transition: all 50ms ease-out;
}
.checklist a .y.animate{
	width:8px;
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
	    -ms-transition: all 100ms ease-out;
	     -o-transition: all 100ms ease-out;
	        transition: all 100ms ease-out;
}
.checklist .checked span{
	border-color:#8d939f;
}
.colors ul, .sizes ul{
	float:left; width:130px;	
}
.colors ul li{padding-left:21px;}
.colors a span{
	border:none;
	position:relative;
	border-radius:100%;
	background-color:#eae3d3;
	width:13px;
	height:13px;
	margin-left:-20px;
}
.colors a:hover span{
	width:15px;
	height:15px;
	margin-top:3px;
	margin-left:-21px;
}
#sidebar img{margin-top:6px;}

.product{
    position: relative;
    perspective: 800px;
    width:306px;
    height:471px;
    transform-style: preserve-3d;
    transition: transform 5s;
	float:left; 
	margin-right: 23px;
	-webkit-transition: width 500ms ease-in-out;
	   -moz-transition: width 500ms ease-in-out;
		-ms-transition: width 500ms ease-in-out;
		 -o-transition: width 500ms ease-in-out;
 		    transition: width 500ms ease-in-out;
}
.product-front img{width:100%;}
.product-front, .product-back{
	width:315px;
	height:480px;
	background:#fff;
	position:absolute;
	left:-5px;
	top:-5px;
	-webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}
.product-back{
	display:none;
	transform: rotateY( 180deg );
}
.make3D.animate .product-back,
.make3D.animate .product-front,
div.large .product-back{
	top:0px;
	left:0px;
	-webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}
.make3D{
	width:305px;
	height:470px;
	position:absolute;    
	top:10px;
	left:10px;	
	overflow:hidden;
    transform-style: preserve-3d;
	-webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out;
}
div.make3D.flip-10{
	 -webkit-transform: rotateY( -10deg );
         -moz-transform: rotateY( -10deg );
           -o-transform: rotateY( -10deg );
              transform: rotateY( -10deg );
			   transition:  50ms ease-out; 			
}
div.make3D.flip90{
	 -webkit-transform: rotateY( 90deg );
         -moz-transform: rotateY( 90deg );
           -o-transform: rotateY( 90deg );
              transform: rotateY( 90deg );
			   transition:  100ms ease-in; 			
}
div.make3D.flip190{
	 -webkit-transform: rotateY( 190deg );
         -moz-transform: rotateY( 190deg );
           -o-transform: rotateY( 190deg );
              transform: rotateY( 190deg );
			   transition:  100ms ease-out; 			
}
div.make3D.flip180{
	 -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
			   transition:  150ms ease-out; 			
}
.make3D.animate{
	top:5px;
	left:5px;
	width:315px;
	height:480px;
	box-shadow:0px 5px 31px -1px rgba(0, 0, 0, 0.15);
	-webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out; 
}
div.large .make3D{
	top:0;
	left:0;
	width:315px;
	height:480px;
	-webkit-transition:  300ms ease-out; 
       -moz-transition:  300ms ease-out; 
         -o-transition:  300ms ease-out; 
            transition:  300ms ease-out; 
}
.large div.make3D{box-shadow:0px 5px 31px -1px rgba(0, 0, 0, 0);}
.large div.flip-back{display:none;}
.stats-container{
	background:#fff;	
	position:absolute;
	top:382px;
	left:0;
	width: 252px;
	height: 300px;
	padding: 24px 40px 35px 32px;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;
}
.make3D.animate .stats-container{
	top:265px;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.stats-container .product_name{
	font-size: 15px;
    color: #393c45;
    font-weight: 700;
}
.stats-container p{
	font-size:15px;
	color:#b1b1b3;	
	padding:2px 0 20px 0;
}
.stats-container .product_price{
	float:right;
	color:#5ff7d2;
	font-size:22px;
	font-weight:600;
}
.image_overlay{
	position:absolute;
	top:0;
	left:0; 
	width:100%;
	height:100%;
	background:#5ff7d2;
	opacity:0;	
}
.make3D.animate .image_overlay{
	opacity:0.7;	
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.product-options{
	padding:0;
}
.product-options strong{
	font-weight:700;
	color:#393c45;
	font-size:14px;
}
.product-options span{	
	color:#969699;
	font-size:14px;
	display:block;
	margin-bottom:8px;
}
.add_to_cart{	
	position:absolute;
	top:80px;
	left:50%;
	width:152px;
	font-size:15px;
	margin-left:-78px;
	border:2px solid #fff;
	color:#fff;	
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	padding:10px 0;	
	opacity:0;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.add_to_cart:hover{	
	background:#fff;
	color:#5ff7d2;
	cursor:pointer;

}
.make3D.animate .add_to_cart{
	opacity:1;	
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 		
}
.view_gallery{	
	position:absolute;
	top:144px;
	left:50%;
	width:152px;
	font-size:15px;
	margin-left:-78px;
	border:2px solid #fff;
	color:#fff;	
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	padding:10px 0;	
	opacity:0;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.view_gallery:hover{	
	background:#fff;
	color:#5ff7d2;
	cursor:pointer;

}
.make3D.animate .view_gallery{
	opacity:1;	
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 		
}
div.colors div{
	margin-top:3px;
	width:15px; 
	height:15px; 	
	margin-right:5px;
	float:left;
}
div.colors div span{
	width:15px; 
	height:15px; 
	display:block;
	border-radius:50%;
}
div.colors div span:hover{
	width:17px;
	height:17px;
	margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
	background:#fff;
	width:14px;
	height:14px; 
	border:1px solid #e8e9eb;
}
div.shadow{
	width:335px;height:520px;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	display:none;
	background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
    background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2)); 
}
.product-back div.shadow{
	z-index:10;
	opacity:1;
	background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
    background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); 
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); 
}
.flip-back{
	position:absolute;
	top:20px;
	right:20px;
	width:30px;
	height:30px;
	cursor:pointer;
}
.cx, .cy{
	background:#d2d5dc;
	position:absolute;
	width:0px;
	top:15px;
	right:15px;
	height:3px;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		-ms-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
.flip-back:hover .cx, .flip-back:hover .cy{
	background:#979ca7;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		-ms-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{	
	right:0;	
	width:30px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s2{	
	-ms-transform: rotate(50deg); 
	-webkit-transform: rotate(50deg); 
	transform: rotate(50deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s3{	
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s1{	
	right:0;	
	width:30px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s2{	
	-ms-transform: rotate(140deg); 
	-webkit-transform: rotate(140deg); 
	transform: rotate(140deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s3{	
	-ms-transform: rotate(135deg); 
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		 
	-webkit-transition: all 100ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.carousel{
	width:315px;
	height:500px;
	overflow:hidden;
	position:relative;
}
.carousel ul{
	position:absolute;
	top:0;
	left:0;
}
.carousel li{
	width:315px;
	height:500px;
	float:left;
	overflow:hidden;	
}
.carousel img{
	margin-top: -22px;
	width: 110%;
}
.arrows-perspective{
	width:315px;
	height:55px;
	position: absolute;
	top: 218px;
	transform-style: preserve-3d;
    transition: transform 5s;
	perspective: 335px;
}
.carouselPrev, .carouselNext{
	width: 50px;
	height: 55px;
	background: #ccc;
	position: absolute;	
	top:0;
	transition: all 200ms ease-out; 
	opacity:0.9;
	cursor:pointer;
}
.carouselNext{
	top:0;
	right: -26px;
	-webkit-transform: rotateY( -117deg );
         -moz-transform: rotateY( -117deg );
           -o-transform: rotateY( -117deg );
              transform: rotateY( -117deg );
			  transition: all 200ms ease-out; 			

}
.carouselNext.visible{
		right:0;
		opacity:0.8;
		background: #fff;
		-webkit-transform: rotateY( 0deg );
         -moz-transform: rotateY( 0deg );
           -o-transform: rotateY( 0deg );
              transform: rotateY( 0deg );
			  transition: all 200ms ease-out; 
}
.carouselPrev{		
	left:-26px;
	top:0;
	-webkit-transform: rotateY( 117deg );
         -moz-transform: rotateY( 117deg );
           -o-transform: rotateY( 117deg );
              transform: rotateY( 117deg );
			  transition: all 200ms ease-out; 

}
.carouselPrev.visible{
		left:0;
		opacity:0.8;
		background: #fff;
		-webkit-transform: rotateY( 0deg );
         -moz-transform: rotateY( 0deg );
           -o-transform: rotateY( 0deg );
              transform: rotateY( 0deg );
			  transition: all 200ms ease-out; 
}
.carousel .x, .carousel .y{
	height:2px;
	width:15px;
	background:#5ff7d2;
	position:absolute;
	top:31px;
	left:17px;
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);	
}
.carousel .x{
	-ms-transform: rotate(135deg); 	
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		
	top:21px;
}
.carousel .carouselNext .x{
	-ms-transform: rotate(45deg); 	
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);		
}
.carousel .carouselNext .y{
	-ms-transform: rotate(135deg); 	
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		
}
div.floating-cart{
	position:absolute;
	top:0;
	left:0; 
	width:315px;	
	height:480px;
	background:#fff;
	z-index:200;
	overflow:hidden;
	box-shadow:0px 5px 31px -1px rgba(0, 0, 0, 0.15);
	display:none;
}

div.floating-cart .stats-container{display:none;}
div.floating-cart .product-front{width:100%; top:0; left:0;}
div.floating-cart.moveToCart{
	left: 75px !important;
	top: 55px !important;
	width: 47px;
	height: 47px;	
	-webkit-transition: all 800ms ease-in-out;
	   -moz-transition: all 800ms ease-in-out;
		-ms-transition: all 800ms ease-in-out;
		 -o-transition: all 800ms ease-in-out;
 		    transition: all 800ms ease-in-out; 
}
body.MakeFloatingCart div.floating-cart.moveToCart{	
	left: 90px !important;
	top: 140px !important;
	width: 21px;
	height: 22px;
	box-shadow:0px 5px 31px -1px rgba(0, 0, 0, 0);
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
		-ms-transition: all 200ms ease-out;
		 -o-transition: all 200ms ease-out;
 		    transition: all 200ms ease-out;
}
div.cart-icon-top{
	position:absolute;
	background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/cart.png") 0 -3px no-repeat;
	margin:0;
	width:21px;
	height:3px;
	z-index:1;
	top: 140px;
	left: 90px;
}
div.cart-icon-bottom{
	position:absolute;
	background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/cart.png") 0 -3px no-repeat;
	margin:0;
	width:21px;
	height:19px;
	z-index:1;
	top: 143px;
	left: 90px;
}
body.MakeFloatingCart div.cart-icon-top{z-index:30;}
body.MakeFloatingCart div.cart-icon-bottom{z-index:300;}	
.cart-item{	
	padding: 11px 0 5px 110px;
	height: 62px;
	width: 210px;
	margin-left: -45px;
	position:relative;
	background:#fff;
	-webkit-transition: all 1000ms ease-out;
	   -moz-transition: all 1000ms ease-out;
		-ms-transition: all 1000ms ease-out;
		 -o-transition: all 1000ms ease-out;
 		    transition: all 1000ms ease-out;
}
.cart-item.flash{background:#fffeb0;}
.cart-item-border{
	position:absolute;
	bottom:0;
	left:45px;
	background:#edeff0;
	height: 1px;
	width: 230px;
}
.cart-item .img-wrap{
	width:50px; 
	height:50px; 
	overflow:hidden;
	border:1px solid #edeff0;
	float:left;
	margin-left:-65px;	
}
.cart-item img{width:100%; position:relative;top:-10px;}
.cart-item strong{color:#5ff7d2; font-size:16px;}
.cart-item span{
	color: #393c45;
    display: block;
    font-size: 14px;
 }

.cart-item .delete-item{
	background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/delete-item.png") 0 0 no-repeat;
	width:15px;
	height:15px;
	float:right;
	margin-right:18px;
	display:none;
}
.cart-item:hover .delete-item{display:block;cursor:pointer}


#info{
	position: absolute;
	top: 20px;
	left: 676px;
	text-align: center;
	width: 413px;

}
#info p{font-size:15px; padding:3px;color:#b1b1b3}
#info a{text-decoration:none;} 
#checkout{
	border: 2px solid #5ff7d2;
	font-size: 13px;
	font-weight: 700;
	padding: 3px 9px;
	position: absolute;
	top: 137px;
	left: 181px;
	color: #5ff7d2;
	display:none;
}

.product.large{
	width:639px;
	margin-bottom:25px;
	overflow:hidden;
	-webkit-transition: all 500ms ease-in-out;
	   -moz-transition: all 500ms ease-in-out;
		-ms-transition: all 500ms ease-in-out;
		 -o-transition: all 500ms ease-in-out;
 		    transition: all 500ms ease-in-out;
}




/* ---------------- */
.floating-image-large{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.info-large{
	  display:none;
	  position: absolute;
	  top: 0;
	  left: 0px;
	  padding: 42px;
	  width: 245px;
	  height: 395px;
	  -webkit-transition: all 500ms ease-out;
	   -moz-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		 -o-transition: all 300ms ease-out;
 		    transition: all 300ms ease-out;
}
.large .info-large{
	left: 310px;
	-webkit-transition: all 300ms ease-out;
	   -moz-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;
		 -o-transition: all 300ms ease-out;
 		    transition: all 300ms ease-out;
}

.info-large h4{
	text-transform:uppercase;
	font-size:28px;
	color:#000;
	font-weight:400;
	padding:0;
}
div.sku{
	  font-weight: 700;
	  color: #d0d0d0;
	  font-size: 12px;
	  padding-top: 11px;
}
div.sku strong{
	color:#000;
}
.price-big{
	font-size: 34px;
    font-weight: 600;
    color: #5ff7d2;
    margin-top: 21px;
}
.price-big span{
	color:#d0d0d0;
	font-weight:400;
	text-decoration:line-through;
}

.add-cart-large{
	  border: 3px solid #000;
	  font-size: 17px;
	  background: #fff;
	  text-transform: uppercase;
	  font-weight: 700;
	  padding: 10px;
	  font-family: "Open Sans", sans-serif;
	  width: 246px;
	  margin-top: 38px;	
	  -webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
		-ms-transition: all 200ms ease-out;
		 -o-transition: all 200ms ease-out;
 		    transition: all 200ms ease-out;
}
.add-cart-large:hover{
	color: #5ff7d2;
	border-color:#5ff7d2;
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
		-ms-transition: all 200ms ease-out;
		 -o-transition: all 200ms ease-out;
 		    transition: all 200ms ease-out;
			cursor:pointer;
}
.info-large h3{
    letter-spacing: 1px;
    color: #262626;
    text-transform: uppercase;
    font-size: 14px;
	clear:left;
	margin-top:20px;
    font-weight: 700;
	margin-bottom:3px;
}


.colors-large{
	margin-bottom:38px;
}
.colors-large li{
	float:left;
	list-style:none;
	margin-right:7px;
	width:16px;
	height:16px;
}
.colors-large li a{
	float:left;
	width:16px;
	height:16px;
	border-radius:50%;
}
.colors-large li a:hover{
	width:19px;
	height:19px;
	position:relative;
	top:-1px;
	left:-1px;
}

.sizes-large{
}
.sizes-large span{
	font-weight:600;
	color:#b0b0b0;
}
.sizes-large span:hover{color:#000;cursor:pointer;}

.product.large:hover{
	box-shadow:0px 5px 31px -1px rgba(0, 0, 0, 0.15);	
}
            
          
!
            
              $(document).ready(function(){
	
	$(".largeGrid").click(function(){											
    $(this).find('a').addClass('active');
    $('.smallGrid a').removeClass('active');
    
    $('.product').addClass('large').each(function(){											
		});						
		setTimeout(function(){
			$('.info-large').show();	
		}, 200);
		setTimeout(function(){

			$('.view_gallery').trigger("click");	
		}, 400);								
		
		return false;				
	});
	
	$(".smallGrid").click(function(){		        
    $(this).find('a').addClass('active');
    $('.largeGrid a').removeClass('active');
    
		$('div.product').removeClass('large');
		$(".make3D").removeClass('animate');	
    $('.info-large').fadeOut("fast");
		setTimeout(function(){								
				$('div.flip-back').trigger("click");
		}, 400);
		return false;
	});		
	
	$(".smallGrid").click(function(){
		$('.product').removeClass('large');			
		return false;
	});
  
  $('.colors-large a').click(function(){return false;});
	
	
	$('.product').each(function(i, el){					

		// Lift card and show stats on Mouseover
		$(el).find('.make3D').hover(function(){
				$(this).parent().css('z-index', "20");
				$(this).addClass('animate');
				$(this).find('div.carouselNext, div.carouselPrev').addClass('visible');			
			 }, function(){
				$(this).removeClass('animate');			
				$(this).parent().css('z-index', "1");
				$(this).find('div.carouselNext, div.carouselPrev').removeClass('visible');
		});	
		
		// Flip card to the back side
		$(el).find('.view_gallery').click(function(){	
			
			$(el).find('div.carouselNext, div.carouselPrev').removeClass('visible');
			$(el).find('.make3D').addClass('flip-10');			
			setTimeout(function(){					
			$(el).find('.make3D').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
					$(el).find('.product-front, .product-front div.shadow').hide();															
				});
			}, 50);
			
			setTimeout(function(){
				$(el).find('.make3D').removeClass('flip90').addClass('flip190');
				$(el).find('.product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
				setTimeout(function(){				
					$(el).find('.make3D').removeClass('flip190').addClass('flip180').find('div.shadow').hide();						
					setTimeout(function(){
						$(el).find('.make3D').css('transition', '100ms ease-out');			
						$(el).find('.cx, .cy').addClass('s1');
						setTimeout(function(){$(el).find('.cx, .cy').addClass('s2');}, 100);
						setTimeout(function(){$(el).find('.cx, .cy').addClass('s3');}, 200);				
						$(el).find('div.carouselNext, div.carouselPrev').addClass('visible');				
					}, 100);
				}, 100);			
			}, 150);			
		});			
		
		// Flip card back to the front side
		$(el).find('.flip-back').click(function(){		
			
			$(el).find('.make3D').removeClass('flip180').addClass('flip190');
			setTimeout(function(){
				$(el).find('.make3D').removeClass('flip190').addClass('flip90');
		
				$(el).find('.product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
					$(el).find('.product-back, .product-back div.shadow').hide();
					$(el).find('.product-front, .product-front div.shadow').show();
				});
			}, 50);
			
			setTimeout(function(){
				$(el).find('.make3D').removeClass('flip90').addClass('flip-10');
				$(el).find('.product-front div.shadow').show().fadeTo( 100 , 0);
				setTimeout(function(){						
					$(el).find('.product-front div.shadow').hide();
					$(el).find('.make3D').removeClass('flip-10').css('transition', '100ms ease-out');		
					$(el).find('.cx, .cy').removeClass('s1 s2 s3');			
				}, 100);			
			}, 150);			
			
		});				
	
		makeCarousel(el);
	});
	
	$('.add-cart-large').each(function(i, el){
		$(el).click(function(){
			var carousel = $(this).parent().parent().find(".carousel-container");
			var img = carousel.find('img').eq(carousel.attr("rel"))[0];						
			var position = $(img).offset();	

			var productName = $(this).parent().find('h4').get(0).innerHTML;				
	
			$("body").append('<div class="floating-cart"></div>');		
			var cart = $('div.floating-cart');		
			$("<img src='"+img.src+"' class='floating-image-large' />").appendTo(cart);
			
			$(cart).css({'top' : position.top + 'px', "left" : position.left + 'px'}).fadeIn("slow").addClass('moveToCart');		
			setTimeout(function(){$("body").addClass("MakeFloatingCart");}, 800);
			
			setTimeout(function(){
			$('div.floating-cart').remove();
			$("body").removeClass("MakeFloatingCart");


			var cartItem = "<div class='cart-item'><div class='img-wrap'><img src='"+img.src+"' alt='' /></div><span>"+productName+"</span><strong>$39</strong><div class='cart-item-border'></div><div class='delete-item'></div></div>";			

			$("#cart .empty").hide();			
			$("#cart").append(cartItem);
			$("#checkout").fadeIn(500);
			
			$("#cart .cart-item").last()
				.addClass("flash")
				.find(".delete-item").click(function(){
					$(this).parent().fadeOut(300, function(){
						$(this).remove();
						if($("#cart .cart-item").size() == 0){
							$("#cart .empty").fadeIn(500);
							$("#checkout").fadeOut(500);
						}
					})
				});
 		    setTimeout(function(){
				$("#cart .cart-item").last().removeClass("flash");
			}, 10 );
			
		}, 1000);
			
			
		});
	})
	
	/* ----  Image Gallery Carousel   ---- */
	function makeCarousel(el){
	
		
		var carousel = $(el).find('.carousel ul');
		var carouselSlideWidth = 315;
		var carouselWidth = 0;	
		var isAnimating = false;
		var currSlide = 0;
		$(carousel).attr('rel', currSlide);
		
		// building the width of the casousel
		$(carousel).find('li').each(function(){
			carouselWidth += carouselSlideWidth;
		});
		$(carousel).css('width', carouselWidth);
		
		// Load Next Image
		$(el).find('div.carouselNext').on('click', function(){
			var currentLeft = Math.abs(parseInt($(carousel).css("left")));
			var newLeft = currentLeft + carouselSlideWidth;
			if(newLeft == carouselWidth || isAnimating === true){return;}
			$(carousel).css({'left': "-" + newLeft + "px",
								   "transition": "300ms ease-out"
								 });
			isAnimating = true;
			currSlide++;
			$(carousel).attr('rel', currSlide);
			setTimeout(function(){isAnimating = false;}, 300);			
		});
		
		// Load Previous Image
		$(el).find('div.carouselPrev').on('click', function(){
			var currentLeft = Math.abs(parseInt($(carousel).css("left")));
			var newLeft = currentLeft - carouselSlideWidth;
			if(newLeft < 0  || isAnimating === true){return;}
			$(carousel).css({'left': "-" + newLeft + "px",
								   "transition": "300ms ease-out"
								 });
			isAnimating = true;
			currSlide--;
			$(carousel).attr('rel', currSlide);
			setTimeout(function(){isAnimating = false;}, 300);						
		});
	}
	
	$('.sizes a span, .categories a span').each(function(i, el){
		$(el).append('<span class="x"></span><span class="y"></span>');
		
		$(el).parent().on('click', function(){
			if($(this).hasClass('checked')){				
				$(el).find('.y').removeClass('animate');	
				setTimeout(function(){
					$(el).find('.x').removeClass('animate');							
				}, 50);	
				$(this).removeClass('checked');
				return false;
			}
			
			$(el).find('.x').addClass('animate');		
			setTimeout(function(){
				$(el).find('.y').addClass('animate');
			}, 100);	
			$(this).addClass('checked');
			return false;
		});
	});
	
	$('.add_to_cart').click(function(){
		var productCard = $(this).parent();
		var position = productCard.offset();
		var productImage = $(productCard).find('img').get(0).src;
		var productName = $(productCard).find('.product_name').get(0).innerHTML;				

		$("body").append('<div class="floating-cart"></div>');		
		var cart = $('div.floating-cart');		
		productCard.clone().appendTo(cart);
		$(cart).css({'top' : position.top + 'px', "left" : position.left + 'px'}).fadeIn("slow").addClass('moveToCart');		
		setTimeout(function(){$("body").addClass("MakeFloatingCart");}, 800);
		setTimeout(function(){
			$('div.floating-cart').remove();
			$("body").removeClass("MakeFloatingCart");


			var cartItem = "<div class='cart-item'><div class='img-wrap'><img src='"+productImage+"' alt='' /></div><span>"+productName+"</span><strong>$39</strong><div class='cart-item-border'></div><div class='delete-item'></div></div>";			

			$("#cart .empty").hide();			
			$("#cart").append(cartItem);
			$("#checkout").fadeIn(500);
			
			$("#cart .cart-item").last()
				.addClass("flash")
				.find(".delete-item").click(function(){
					$(this).parent().fadeOut(300, function(){
						$(this).remove();
						if($("#cart .cart-item").size() == 0){
							$("#cart .empty").fadeIn(500);
							$("#checkout").fadeOut(500);
						}
					})
				});
 		    setTimeout(function(){
				$("#cart .cart-item").last().removeClass("flash");
			}, 10 );
			
		}, 1000);
	});
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console