Reference Websites
E Commerce Website
  Start Coding
 Basic Structure
  HTML Code
<html>
<head>
<title>E-Commerce Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>

<div class="main">


</div>

</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
body{ font-family:Arial, Helvetica, sans-serif; background:#FFF; margin:0px;}
.main{ 
	width:1300px; 
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
	margin-bottom:20px;
}
.clearfix{ clear:both;}
 Step 1 : Header
Reference Image
  HTML Code
<div class="header">
	<div class="header-left">
        <a href="http://www.freetimelearning.com" target="_blank">
            <img src="images/logo.png" class="loggocomlogo" />
        </a>
    </div>
    <div class="header-right">
    	<!--<a href="#"><input type="text" class="form" placeholder="Search Product"><img src="images/search.png" /></a>-->
    	<div class="header-right-top">
        	<ul>
            	<li><a href=""><i class="fa fa-facebook"></i>&nbsp;</a></li>
                <li><a href=""><i class="fa fa-twitter"></i></a></li>
                <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                <li><a href=""><i class="fa fa-google"></i></a></li>
            </ul>
        </div>
    	<div class="header-right-bottom">
        	<div class="header-right-bottom-left">
        		<a href="#"><input type="text" class="form" placeholder="Search Product"><img src="images/search.png" /></a>
            </div>
            <div class="header-right-bottom-center">
                <ul>
                    <li><a href="#!">Sign In</a></li>
                    <li style="border-right:none;"><a href="#!">Sign Up</a></li>
                </ul>
            </div>
            <div class="header-right-bottom-right">
            	<i class="fa fa-cart-plus" style="color:#df001a; font-size:30px;"></i> &nbsp; 
                <i class="fa fa-inr" style="color:#000; font-size:20px;"></i> 1569 /-
            </div>
        </div>
    </div>
    
</div>
  CSS Code
.header{
	width:1300px; height:100px; float:left; border-top:2px solid #df001a;
	border-bottom:2px solid #df001a; background:#FFF;
}
.header-left{ width:250px; float:left;}
.header-right{ width:1050px; float:left; padding-top:10px;}
.header-right-top{ width:300px; height:35px; float:left; padding-left:750px; margin:0;}
.header-right-top ul{ list-style:none; float:left; margin:5px 20px;}
.header-right-top ul li{ float:left; padding:0px 10px;}
.header-right-top ul li a{ font-size:12px; text-decoration:none; background:#df001a; color:#FFF; 
padding:8px 10px; border-radius:100px; text-align:center;}
.header-right-top ul li a:hover{ background:#bb0016; color:#FFF;}
.form{ height:35px; width:350px; padding:0px 10px; float:left; border:1px solid #df001a; border-radius:2px 0px 0px 0px;}
.header-right-bottom{ width:1050px; height:40px; float:left;}
.header-right-bottom-left{width:470px;float:left; padding-left:100px;}
.header-right-bottom-center{width:250px; float:left;}
.header-right-bottom-center ul{list-style:none; margin:0px; padding-left:100px}
.header-right-bottom-center ul li{
	list-style:none; font-family:arial; font-size:12px; padding:5px 0px; 
	margin:10px 0px; float:left; font-weight:bold; border-right:1px solid #000; }
.header-right-bottom-center ul li a{ padding:5px 10px; border-radius:3px;
margin:2px 5px 5px; text-decoration:none; color:#FFF; background:#df001a;}
.header-right-bottom-center ul li a:hover{ color:#FFF; background:#bb0016;}
.header-right-bottom-right{width:180px; float:left; margin-left:50px; margin-top:5px; font-size:20px;}
 Step 2 : Menu (or) Navbar
Reference Image
  HTML Code
<div class="ftl_menu">
	<ul id="navbar">
	   <li><a href="#!">Home</a></li>
	   <li><a href="#">Men Shoes &nbsp;<i class="fa fa-caret-down"></i></a>
			<ul>
				<li><a href="#!">&nbsp; Barnd Name</a></li>
				<li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
			</ul>
		</li>
        <li><a href="#">Women Shoes &nbsp;<i class="fa fa-caret-down"></i></a>
			<ul>
				<li><a href="#!">&nbsp; Barnd Name</a></li>
				<li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
			</ul>
		</li>
		<li><a href="#">Kids Shoes &nbsp;<i class="fa fa-caret-down"></i></a>
			<ul>
				<li><a href="#!">&nbsp; Barnd Name</a></li>
				<li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
			</ul>
		</li>
	   <li><a href="#">Formal Shoes &nbsp;<i class="fa fa-caret-down"></i></a>
			<ul>
				<li><a href="#!">&nbsp; Barnd Name</a></li>
				<li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
			</ul>
		</li>
		<li><a href="#">Top Brands &nbsp;<i class="fa fa-caret-down"></i></a>
			<ul>
				<li><a href="#!">&nbsp; Barnd Name</a></li>
				<li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
                <li><a href="#!"> Barnd Name</a></li>
			</ul>
		</li>
        <li><a href="#!">Products</a></li>
        <li><a href="#!">Services</a></li>
        <li><a href="#!">Gallery</a></li>
		<li><a href="#!">Branches</a></li>
		<li class="pad"></li>
	</ul>
</div>
  CSS Code
.ftl_menu {
    width: 1280px;
    height: 50px;
    margin: 0px auto;
    padding:0px 10px;
	float:left;
	background:#df001a;
    border-radius:2px
}
#navbar li,
#navbar li a {
    background: #df001a;
    float: left;
    position: relative
}

#navbar li,
#navbar li a,
.ftl_menu {
    position: relative
}

#navbar li a,
#navbar ul li a {
    font-weight: 700;
    font-style: italic
}
#navbar,
#navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}
#navbar {
    height: 45px;
    left: 0;
    overflow: hidden;
    top: 0
}
#navbar li {
    z-index: 10
}
#navbar li a {
    color: #fff;
    display: block;
    font-size: 13px;
    height: 45px;
    line-height: 40px;
    padding: 0 25px;
    text-decoration: none;
    z-index: 20
}
#navbar li:first-child a {
    padding-left: 35px
}
#navbar li ul li:first-child a {
    background-image: none;
    padding-left: 10px
}
#navbar li.pad {
    display: block;
    height: 45px;
    width: 35px
}
#navbar ul,
#navbar ul li {
    width: 180px
}
#navbar ul {
    height: auto;
    padding: 10px 2px;
    position: absolute;
    top: -120px;
    z-index: 1;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    transition: .8s ease-in-out;
    -moz-transition: .8s ease-in-out;
    -o-transition: .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out
}
#navbar ul li a {
    background: 0 0;
    line-height: 20px;
    width: 180px;
    font-size: 12px;
    padding: 3px 15px;
    height: auto!important
}
#navbar:hover {
    height: 350px
}
#navbar li:hover ul {
    -moz-transform: translate(0, 161px);
    -o-transform: translate(0, 161px);
    -webkit-transform: translate(0, 161px)
}
#navbar a:hover,
#navbar li:hover>a {
    color: #000;
}
 Step 3 : Slider
Reference Image
  HTML Code
<div class="slider">
   <div class="slider-padding">
        <div style="padding-top:30px;"><a href="#" class="btn">Click Here!</a></div>
   </div>
</div>
  CSS Code
.slider{ width:1300px; background:url(../images/slider.jpg); height:300px; float:left; }
.slider-padding{padding:150px 0px 0px 100px;}
.btn{ background:#df001a; color:#FFF; padding:9px 20px; font-size:16px; 
text-decoration:none; border-radius:3px; text-shadow:none; float:left;}
.btn:hover{ background:#bb0016;}
 Step 4 : Content
Reference Image
  HTML Code
<div class="content">

	<div class="content-left">
        <div id='content_left_menu'>
        <div class="categories">All Categories</div>
        <ul>
        	<li class='has-sub'><a href='#'><span>Featured brands</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
            <li class='has-sub'><a href='#'><span>Men's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Women's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Kids's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Shoe care & accessories</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>Formal Shoes</span></a></li>
           <li><a href='#'><span>Party Wear Shoes</span></a></li>
           <li><a href='#'><span>Leather Shoes</span></a></li>
           <li><a href='#'><span>International Shoes Store</span></a></li>
        </ul>
        </div>
    </div>
    <div class="content-right">
 		<div class="categories-right">All Products</div>
        <div align="center">
            <div class="content-right-product">
                <div><img src="images/1.jpg" width="270" height="200"></div>
                <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
            <div class="content-right-product">
            	<div><img src="images/2.jpg" width="270" height="200"></div>
                 <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 2159.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
            <div class="content-right-product">
            	<div><img src="images/3.jpg" width="270" height="200"></div>
                 <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 4999.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
        </div>
        <div align="center">
            <div class="content-right-product">
                <div><img src="images/4.jpg" width="270" height="200"></div>
                <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 2599.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
            <div class="content-right-product">
            	<div><img src="images/5.jpg" width="270" height="200"></div>
                 <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 2999.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
            <div class="content-right-product">
            	<div><img src="images/6.jpg" width="270" height="200"></div>
                 <div class="content-right-product-h4">Lorem Ipsum</div>
                <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1990.00</div>
                <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
            </div>
        </div>
    </div>

</div>
  CSS Code
.content{ width:1300px; float:left; padding-bottom:20px;}
.content-left{width:300px; height:auto; float:left; padding:20 15px;}
.categories{ font-size:24px; background:#EEE; width:258px; padding:8px 15px; border:1px solid #df001a;}
#content_left_menu,
#content_left_menu a,
#content_left_menu li,
#content_left_menu ul {
    margin: 0;
    padding: 0;
    border: 0;
	width:250px;
    list-style: none;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps!important;
    position: relative
}
#content_left_menu a { line-height: 1.3}
#content_left_menu {width: 250px}
#content_left_menu>ul>li>a {
    padding-right: 40px;
    font-weight: 700;
    display: block;
    background: #df001a;
    color: #fff;
    border-bottom: 1px solid #590000
}
#content_left_menu>ul>li>a>span { background: #bb0016;padding: 12px 15px; display: block; font-size: 16px; font-weight: 300}
#content_left_menu>ul>li>a:hover {text-decoration: none}
#content_left_menu>ul>li.active {border-bottom: none}
#content_left_menu>ul>li.active>a { color: #fff;}
#content_left_menu>ul>li.active>a span { background: #df001a;}
#content_left_menu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: 0 0}
#content_left_menu ul ul {display: none}
#content_left_menu ul ul li {border: 1px solid #e0e0e0; border-top: 0}
#content_left_menu ul ul a { padding: 10px; display: block;color: #ed1144; font-size: 13px}
#content_left_menu ul ul a:hover { color: #bd0e36;}
#content_left_menu ul ul li.odd {background: #f4f4f4;}
#content_left_menu ul ul li.even { background: #fff;}

.content-right{ width:930px; height:auto; float:left; padding:20px 20px 0px 20px;}
.categories-right{ 
font-variant:small-caps; font-size:23px; background:#EEE; width:870px; 
margin:0px 15px; padding:8px 15px; border:1px solid #df001a;
}
.content-right-product{ 
width:270px; padding:0px 5px; margin:15px; float:left;
 -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
}
.content-right-product-h4{ width:240px; font-size:18px; font-weight:600; color:#000; padding:5px 15px; float:left; text-align:center !important;} 
.content-right-product-p{width:240px; color:#333; line-height:26px; padding:5px 15px; float:left; text-align:center !important;}
.content-right-product-amount{width:240px; color:#df001a !important; font-weight:bold; font-size:26px; padding:5px 15px 10px; float:left; text-align:center !important;}
.cart{ width:140px; float:left; margin-bottom:10px; padding:0px 25px 0px 75px;}
  JavaScript Code
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).ready(function(){

$('#content_left_menu> ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#content_left_menuul ul li:odd').addClass('odd');
$('#content_left_menuul ul li:even').addClass('even');
$('#content_left_menu> ul > li > a').click(function() {
  $('#content_left_menuli').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#content_left_menuul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
});
</script>
 Step 5 : Footer
Reference Image
  HTML Code
<div class="footer">
	<div class="footer-parts">
    	<div class="footer-parts-h4">About Us</div>
        <div class="about-footer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
    </div>
    <div class="footer-parts">
    	<div class="footer-parts-h4">Extra Links</div>
    	<ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Terms &amp; Conditions</a></li>
        </ul>
    </div>
    <div class="footer-parts">
    	<div class="footer-parts-h4">Extra Links</div>
    	<ul>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Diclimer</a></li>
        </ul>
    </div>
    <div class="footer-parts">
    	<div class="footer-parts-h4">Social Links</div><br />
        <div style="padding-left:20px; font-size:22px;">
            <a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook"></i></a> &nbsp; &nbsp;
            <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin"></i></a> &nbsp; &nbsp;
            <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter"></i></a> &nbsp; &nbsp;
            <a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus"></i></a>
        </div>
        <div style="padding-left:20px; padding-top:15px; font-size:22px;">
        	<form action="" method="post">
            	<a href="#!"><input type="text" class="form-2" placeholder="Subscribe"><img src="images/search.png" /></a>
            </form>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="copyrights">
    	<div class="copyrights-left">
        &copy; 2018. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>.
        </div>
        <div class="copyrights-right">
        	Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</a>
        </div>
    </div>
</div>
  CSS Code
.footer{ width:1300px; float:left; background:#eb3d51;}
.footer-parts{ width:300px; float:left; padding:0px 10px;}
.footer-parts-h4{ font-size:18px; padding:15px 10px 0px; color:#FFF;}
.footer-parts ul{list-style:none; padding:0px;}
.footer-parts ul li{list-style:none; font-size:12px; padding:5px; margin:5px 0px; font-weight:bold;}
.footer-parts ul li a{padding:8px 10px; margin:2px 0px; text-decoration:none; color:#FFF;}
.footer-parts ul li a:hover{color:#000;}
.copyrights{ width:1240px; font-size:12px; background:#df001a; float:left; padding:15px 30px 15px 30px; color:#FFF; }
.copyrights-left{ width:940px; float:left;}
.copyrights-left a{ color:#FFF; text-decoration:none;}
.copyrights-left a:hover{color:#CCC;}
.copyrights-right{ width:300px; float:left; text-align:right;}
.copyrights-right a{ color:#FFF; text-decoration:none;}
.copyrights-right a:hover{color:#CCC;}
.fa{ color:#FFF;}
.about-footer{ padding:10px 10px; width:280px; color:#FFF; float:left; text-align:justify;}
.form-2{ height:35px; width:200px; padding:0px 10px; float:left; border:1px solid #df001a; border-radius:2px 0px 0px 0px;}