cart1234

In this example below you will see how to do a cart1234 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ferencok, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ferencok ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>cart1234 </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!---
<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
<div class="tab">
        <div id="tab-1" class="tab-content">
            <p>Lorem iplibfelis.</p></div>
        <div id="tab-2" class="tab-content">
            <p>Donec sempera.</p></div>
        <div id="tab-3" class="tab-content">
            <p>Duis  porta. </p></div>
        <div id="tab-4" class="tab-content">
            <p>Proin sollici odio. </p></div>
    </div>
</div>



--> 


<ul id="tabs">
    <li><a href="#" title="tab1">All</a></li>
    <li><a href="#" title="tab2">Spraypaint Packs</a></li>
    <li><a href="#" title="tab3">Records</a></li>
    <li><a href="#" title="tab4">Markers</a></li>    
</ul>

<div id="content"> 
    <!-----    All Products -------->
   <div id="tab1"> 
     
      <div class="a1">
							    <div class="cl">&nbsp;</div>
     <!-----     Records Vinyls   ------->
   <div class="a1a">
					<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
				    
		<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </div>
							   <div class="a1a">
							    
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    
    							</div> 
   <div class="cl">&nbsp;</div>
  </div>
  
  <!-----------  Spraypaint Packs  -------------->
  
    <div id="tab2" class="items">
  <div class="cl">&nbsp;</div>
      <ul>
							        
							        <li>
							    	
							    		</li>
    							
     </ul><div class="cl">&nbsp;</div>
  
  
  </div>
 
  
  
  <!-----     Records Vinyls   ------->
    <div id="tab3" class="items">
      <div class="cl">&nbsp;</div>
      <ul>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/people" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/people" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        
							    		
					<li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/people" alt="Lorem pixel" /></a>
							    
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/people" alt="Lorem pixel" /></a>
							    
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    
							    		<a href="#"><img src="http://lorempixel.com/200/200/people" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
    							
     </ul> 
      <div class="cl">&nbsp;</div>
      </div>
  
  <!-----     Markers   ------->
  
    <div id="tab4" class="items">
      <div class="cl">&nbsp;</div>
       <ul>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							   
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    	
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
							        <li>
							    
							    		<a href="#"><img src="http://lorempixel.com/200/200/food" alt="Lorem pixel" /></a>
							    	
							    	<p>
							    		Item Number: <span>125515</span><br />
							    		Size List : <span>8/8.5/9.5/10/11</span><br />
							    		Brand Name: <a href="#">Adidas Shoes</a>
							    	</p>
							    	<p class="price">Wholesale Price: <strong>53 USD</strong></p>
							    </li>
    							</ul> 
  <div class="cl">&nbsp;</div></div>
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/cart1234-oxVdNX */
img{ width: 100%;}

.cl { font-size:0; 
  line-height:0; 
  clear:both;
  display:block; height:0; 
}

#tabs {
  overflow: auto;
  width: 960px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  background: ;
}

#tabs li {
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a {
    box-shadow: -5px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 40px;
    text-decoration: none;
}

#tabs a:hover {
    background: #c93434;
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);     
}

#tabs a:focus {
    outline: 0 ;
}

#tabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}

#content {
    background-color: #fff;
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0px 3px 3px 3px;
    box-shadow: 0 2px 10px #000, 0 -1px 0 #fff inset;
    padding: 10px 10px;
  width: 980px;
  margin: 0 auto;
  height: 500px;
  
}

/* Remove the rule below if you want the content to be "organic" */
#content div {
   min-height: ; 
 }
.items { 
  width: 960px; 
  margin-right:-20px; 
  padding-bottom:5px; 
  background-color: #fff;
  height: 100vh;

  
 }
.items ul{ list-style-type: none;}
img{ text-align: center;}
div.a1a{ float:left; border:solid 1px #cfcfcf; 
  width:194px; 
  margin:0 8px 12px 0; padding:13px; }
div.a1a span{ color:#890000}
div.a1a p.price{ padding-top:15px; }
.items ul li p.price strong{ color:#890000; font-size:14px;}







/*Downloaded from https://www.codeseek.co/Ferencok/cart1234-oxVdNX */
$(document).ready(function() {
    $("#content .a1").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content .a1a:first").fadeIn(); // Show first tab content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();

Comments