<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<!-- Footer -->
<footer class="myfooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h4 class="title-widget">Sumi</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, libero a molestie consectetur, sapien elit lacinia mi.</p>
<!--
<ul class="social-icon">
<a href="#" class="social"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="social"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="social"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
<a href="#" class="social"><i class="fa fa-google" aria-hidden="true"></i></a>
<a href="#" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
</ul>
-->
<ul class="social social-circle">
<li> <a href="#" class="icoFacebook"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> </a> </li>
<li> <a href="#" class="icoGoogle"> <i class="fa fa-google-plus"></i> </a> </li>
<li> <a href="#" class="icoRss"> <i class="fa fa-youtube"></i> </a> </li>
</ul>
</div>
<div class="col-sm-3">
<h4 class="title-widget">My Account</h4>
<span class="acount-icon">
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i> Wish List</a>
<a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i> Cart</a>
<a href="#"><i class="fa fa-user" aria-hidden="true"></i> Profile</a>
<a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language</a>
</span>
</div>
<div class="col-sm-3">
<h4 class="title-widget">Category</h4>
<div class="category">
<a href="#" class="zoom">men</a>
<a href="#" class="zoom">women</a>
<a href="#" class="zoom">boy</a>
<a href="#" class="zoom">girl</a>
<a href="#" class="zoom">bag</a>
<a href="#" class="zoom">teshart</a>
<a href="#" class="zoom">top</a>
<a href="#" class="zoom">shos</a>
<a href="#" class="zoom">glass</a>
<a href="#" class="zoom">kit</a>
<a href="#" class="zoom">baby dress</a>
<a href="#" class="zoom">kurti</a>
</div>
</div>
<div class="col-sm-3">
<h4 class="title">Payment Methods</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="payment">
<li><a href="#"><i class="fa fa-cc-amex zoom" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-credit-card zoom" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-paypal zoom" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-cc-visa zoom" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<hr>
<div class="row text-center"> © 2017. Gopiballavpur.com</div>
</div> <!-- ./container -->
</footer>
<div class="myfooter-bottom">
<div class="container">
<p class="pull-left"> Copyright © Footer E-commerce Plugin 2014. All right reserved. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-cc-visa"></i></li>
<li><i class="fa fa-cc-mastercard"></i></li>
<li><i class="fa fa-cc-amex"></i></li>
<li><i class="fa fa-cc-paypal"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,800,800italic,900,900italic);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
/* myfooter */
.myfooter {
padding: 50px 0 20px 0;
background-color: #35404f;
color: #878c94;
}
.myfooter .title-widget {
text-align: left;
color:#fff;
font-size: 25px;
font-weight: 300;
line-height: 1;
position: relative;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
margin-top: 0;
margin-right: 0;
margin-bottom: 25px;
margin-left: 0;
padding-left: 28px;
}
.myfooter .title-widget::before {
background-color: #ea5644;
content: "";
height: 22px;
left: 0px;
position: absolute;
top: -2px;
width: 5px;
}
.myfooter .social-icon{padding:0px;margin:0px;}
.myfooter .social-icon a{display:inline-block;color:#fff;font-size:25px;padding:5px;}
.myfooter .acount-icon a{display:block;color:#fff;font-size:18px;padding:5px;text-decoration:none;}
.myfooter .acount-icon .fa{margin-right:25px;}
.myfooter .category a {
text-decoration: none;
color: #fff;
display: inline-block;
padding: 5px 20px;
margin: 1px;
border-radius:4px;
margin-top: 6px;
background-color: black;
border: solid 1px #fff;
}
.myfooter ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.myfooter .payment{margin:0px;padding:0px;list-style-type:none}
.myfooter .payment li{list-style-type:none}
.myfooter .payment li a {
text-decoration: none;
display: inline-block;
color: #fff;
float: left;
font-size: 25px;
padding: 10px 10px;
}
.myfooter ul.social {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
.myfooter ul.social li {
display: inline;
margin: 0 5px;
}
.myfooter .social li:hover {
transform: scale(1.15) rotate(360deg);
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
}
.myfooter .social a.icoRss:hover {
background-color: #F56505;
}
.myfooter .social a.icoFacebook:hover {
background-color:#3B5998;
}
.myfooter .social a.icoTwitter:hover {
background-color:#33ccff;
}
.myfooter .social a.icoGoogle:hover {
background-color:#BD3518;
}
.myfooter .social a.icoVimeo:hover {
background-color:#0590B8;
}
.myfooter .social a.icoLinkedin:hover {
background-color:#007bb7;
}
.myfooter .social a.icoRss:hover i, .myfooter .social a.icoFacebook:hover i, .myfooter .social a.icoTwitter:hover i,
.myfooter .social a.icoGoogle:hover i, .myfooter .social a.icoVimeo:hover i, .myfooter .social a.icoLinkedin:hover i {
color:#fff;
}
a.myfooter .socialIcon:hover, .myfooter .socialHoverClass {
color:#44BCDD;
}
.myfooter .social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.myfooter .social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.myfooter .social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.myfooter .social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.myfooter-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.myfooter-bottom p.pull-left {
padding-top: 6px;
}
.payments {
font-size: 1.5em;
}
/* zooming class */
.zoom:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
}
.zoom {
-webkit-transform: scale(1);
/* Browser Variations: */
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
