<html>
<head>
<title>How To Create A Basic Bootstrap Ecommerce Website - Free Time Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<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="container-fluid">
<div class="main_shadow">
</div>
</div>
<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>*{
margin-left:auto;
margin-right:auto;
}
.row{ margin:0px;}
body{
font-family:Arial, Helvetica, sans-serif;
background:#FFF;
margin:0px;
}
.main_shadow{
-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;}
.m10_0{ margin:10px auto;} .m20_0{ margin:20px auto;} .m30_0{ margin:30px auto;} .m40_0{ margin:40px auto;} .m50_0{ margin:50px auto;}
@media only screen and (min-width:320px) and (max-width:480px){ #wrapper{ width:375px;} }
@media only screen and (min-width:600px) and (max-width:768px){#wrapper{ width:768px;} }
<div class="row main_header">
<div class="col-md-3 col-sm-3 col-xs-12 logo" align="center">
<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 form-top hidden-xs" align="center">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Here">
<span class="input-group-btn">
<button type="button" class="btn btn_search"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12" align="right">
<div class="row hidden-xs">
<div class="row">
<div class="header-top pull-right">
<ul>
<li><a href=""><i class="fa fa-facebook"></i> </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>
</div>
<div class="clearfix" style="margin:2px 0px;"></div>
<div class="row" align="center">
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="header-right-bottom">
<ul>
<li><a href="#!">Sign In</a></li>
<li style="border-right:none;"><a href="#!">Sign Up</a></li>
</ul>
</div>
</div>
<div class="col-md-5 col-sm-5 col-xs-12">
<div class="header-right-bottom">
<i class="fa fa-cart-plus cart_size"></i>
<i class="fa fa-inr inr_size"></i> <span class="amount">1569 /-</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.main_header{border-top:2px solid #df001a;}
.logo{ padding:12px 0px 0px;}
.btn_search{ background:#df001a !important; color:#FFF;}
.btn_search:hover, .btn_search:active, .btn_search:focus{ background:#bb0016; color:#FFF;}
.form-top{ margin-top:50px;}
.form-control{ border-radius:2px; margin:0px auto 4px;}
.form{padding:0px 10px; border:1px solid #df001a; border-radius:2px;}
.btn{ outline:none !important;}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
padding: 8px 10px 9px;
border-radius:2px;
}
.header-top{ height:35px; margin:10px auto 0px;}
.header-top ul{ list-style:none; margin:2px 5px 5px;}
.header-top ul li{ float:left; padding:0px 11px; margin-top:2px;}
.header-top ul li a{ font-size:12px; text-decoration:none; background:#df001a; color:#FFF;
padding:8px 10px; border-radius:100px; text-align:center;}
.header-top ul li a:hover{ background:#bb0016; color:#FFF;}
.header-right-bottom{ list-style:none;}
.header-right-bottom ul{list-style:none; margin:0px; padding-left:100px}
.header-right-bottom ul li{ list-style:none; font-family:arial; font-size:12px; padding:5px 0px;
margin:10px 0px; float:left; font-weight:bold;}
.header-right-bottom ul li a{ padding:5px 10px; border-radius:3px;
margin:2px 5px 5px; text-decoration:none; color:#FFF; background:#df001a;}
.header-right-bottom ul li a:hover{ color:#FFF; background:#bb0016;}
.cart_size{ font-size:30px !important; color:#df001a;}
.inr_size, .amount{ font-size:24px !important; color:#000;}
@media only screen and (min-width:960px) and (max-width:1024px){
.header-right-bottom ul{padding-left:35px;}
.header-right-bottom ul li{ margin: 0px 0px 10px;}
.cart_size{ font-size:20px !important;}
.inr_size, .amount{ font-size:16px !important;}
.form-top{ margin-top:40px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.header-right-bottom ul{padding-left:5px;}
.header-right-bottom ul li{ margin: 0px 0px 10px;}
.header-right-bottom ul li a{ padding:3px 5px; margin:2px 2px 5px;}
.cart_size{ font-size:16px !important;}
.inr_size, .amount{ font-size:14px !important;}
.form-top{ margin-top:30px;}
}
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a href="#!" class="navbar-brand">Logo</a>-->
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="http://freetimelearning.com/" target="_blank">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Men Shoes
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#!"> 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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Women Shoes
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#!"> 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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Kids Shoes
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#!"> 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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Formal Shoes
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#!"> 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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Top Brands
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#!"> 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>
</ul>
</div>
</nav>.navbar-brand {
float: left;
height: 65px;
padding: 5px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-default{
border-radius:2px;
background:#df001a;
margin-bottom:0px;
border:none !important;
}
.navbar-default ul{ padding:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{
color:#FFF;
padding:7px 27px;
font-size:13px;
font-weight:600;
font-style:italic;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
color:#000;
background:#df001a;
}
.dropdown-menu{ border-radius:1px; background:#df001a;}
.navbar-nav>li>.dropdown-menu{ margin-top:0px; border-top:#df001a 2px solid;}
.dropdown-menu>li>a{ color:#FFF !important; font-style:italic; font-size:12px; font-weight:bold;}
.dropdown-menu>li>a:hover{ color:#000 !important; background:#df001a !important;}
.navbar-default .navbar-nav>li>a:hover{ color:#000; background:#df001a;}
@media only screen and (min-width:320px) and (max-width:480px){ .logo{ padding:10px 0px 0px;} }
@media only screen and (min-width:600px) and (max-width:768px){
.navbar-default .navbar-nav>li>a{padding:7px 3px; font-size:11px; }
}
@media only screen and (min-width:1025px) and (max-width:1280px){
.navbar-default .navbar-nav>li>a{ padding:7px 21px; }
}
@media only screen and (min-width:960px) and (max-width:1024px){
.navbar-default .navbar-nav>li>a{ padding:7px 10px; }
}$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});
<div class="row">
<div class="slider">
<div class="slider-padding">
<div style="padding-top:30px;"><a href="#" class="btn">Click Here!</a></div>
</div>
</div>
</div>.slider{ background:url(../images/slider.jpg); height:300px;}
.slider-padding{padding:150px 0px 0px 100px;}
.btn{ background:#df001a; color:#FFF; padding:6px 20px; font-size:16px;
text-decoration:none; border-radius:3px; text-shadow:none; float:left;}
.btn:hover{ background:#bb0016; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
.slider-h3{ font-size:22px; padding:40px 0px 0px 30px;}
}
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<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="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div class="row" align="center">
<div class="categories-right">All Products</div>
<div class="content-right">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/1.jpg" class="img-responsive" alt="Top Shoes"></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>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/2.jpg" class="img-responsive" alt="Top Shoes"></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>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/3.jpg" class="img-responsive" alt="Top Shoes"></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>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/4.jpg" class="img-responsive" alt="Top Shoes"></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>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/5.jpg" class="img-responsive" alt="Top Shoes"></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>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="content-right-product">
<div><img src="images/6.jpg" class="img-responsive" alt="Top Shoes"></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>
</div>
</div>
</div>
</div>.categories{ font-size:24px; background:#EEE; padding:8px 15px; border:1px solid #df001a; margin-top:15px;}
#content_left_menu,
#content_left_menu a,
#content_left_menu li,
#content_left_menu ul {
margin: 0;
padding: 0;
border: 0;
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>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{ margin:0px -15px;}
.categories-right{
font-variant:small-caps; font-size:23px; background:#EEE;
margin:15px 15px 0px; padding:8px 15px; border:1px solid #df001a;
}
.content-right-product{
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{font-size:18px; font-weight:600; color:#000; padding:5px 15px; float:left; text-align:center !important;}
.content-right-product-p{color:#333; line-height:26px; padding:5px 15px; float:left; text-align:center !important;}
.content-right-product-amount{color:#df001a !important; font-weight:bold; font-size:26px; padding:5px 15px 10px; clear:both;
text-align:center !important;}
.cart{ margin:0px 27% 10px; clear:both; float:left;}
@media only screen and (min-width:600px) and (max-width:768px){.cart{ margin:0px 15% 10px;} }$( 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;
}
});
});
});
<div class="row footer">
<div class="col-md-3 col-sm-6 col-xs-12">
<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>
<div class="col-md-3 col-sm-6 col-xs-12">
<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 & Conditions</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<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>
<div class="col-md-3 col-sm-6 col-xs-12">
<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 fa_footer"></i></a>
<a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin fa_footer"></i></a>
<a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter fa_footer"></i></a>
<a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus fa_footer"></i></a>
</div>
<div style="padding-left:20px; padding-top:15px; font-size:22px;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Subscribe Now">
<span class="input-group-btn">
<button type="button" class="btn btn_search"><i class="fa fa-search"></i></button>
</span>
</div><br />
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="copyrights">
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="copyrights-left">
© 2018. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>.
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="copyrights-right">
Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</a>
</div>
</div>
</div>
</div>.footer{background:#eb3d51;}
.footer-parts{padding:0px 10px;}
.fa_footer{ color:#FFF;}
.about-footer{ padding:10px 10px; color:#FFF; text-align:justify;}
.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{font-size:12px; background:#df001a; clear:both; padding:15px 30px; color:#FFF; float:left; width:100%; }
.copyrights-left{ list-style:none;}
.copyrights-left a{ color:#FFF; text-decoration:none;}
.copyrights-left a:hover{color:#CCC;}
.copyrights-right{ text-align:right;}
.copyrights-right a{ color:#FFF; text-decoration:none;}
.copyrights-right a:hover{color:#CCC;}
@media only screen and (min-width:320px) and (max-width:480px){.copyrights-right{ text-align:center;}}