<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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--
instagram: www.instagram.com/programmingtutorial
site: programlamadersleri.net
-->
<footer>
<div class="search-text">
<div class="container">
<div class="row text-center">
<div class="form">
<h4>SIGN UP TO OUR NEWSLETTER</h4>
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Email Address">
<button type="submit" class="btn-search">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-facebook fa-2x"></i>Facebook</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-twitter fa-2x"></i>Twitter</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-flickr fa-2x"></i>Flickr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-tumblr fa-2x"></i>Tumblr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-github fa-2x"></i>Github</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-google-plus fa-2x"></i>Google</a>
</div>
</div>
</div>
<div class="container" style="border-top:1px solid grey;">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3">
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="copyright">
<div class="container">
<div class="row text-center">
<p>Copyright © 2017 All rights reserved</p>
</div>
</div>
</div>
<a href="#" id="top" style="display: inline;">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
<!-- Footer 2 -->
<footer style="margin-top:300px;">
<div class="search-text">
<div class="container">
<div class="row text-center">
<div class="form">
<h4>SIGN UP TO OUR NEWSLETTER</h4>
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Email Address">
<button type="submit" class="btn-search">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-top2">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-facebook fa-2x"></i>Facebook</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-twitter fa-2x"></i>Twitter</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-flickr fa-2x"></i>Flickr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-tumblr fa-2x"></i>Tumblr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-github fa-2x"></i>Github</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-google-plus fa-2x"></i>Google</a>
</div>
</div>
</div>
<div class="container" style="border-top:1px solid grey;">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3">
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="copyright">
<div class="container">
<div class="row text-center">
<p>Copyright © 2017 All rights reserved</p>
</div>
</div>
</div>
<!-- Footer 2 End -->
<!-- Footer 3 -->
<footer style="margin-top:300px;">
<div class="search-text">
<div class="container">
<div class="row text-center">
<div class="form">
<h4>SIGN UP TO OUR NEWSLETTER</h4>
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Email Address">
<button type="submit" class="btn-search">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer-top3">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-facebook fa-2x"></i>Facebook</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-twitter fa-2x"></i>Twitter</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-flickr fa-2x"></i>Flickr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-tumblr fa-2x"></i>Tumblr</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-github fa-2x"></i>Github</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<a href="#"><i class="fa fa-google-plus fa-2x"></i>Google</a>
</div>
</div>
</div>
<div class="container" style="border-top:1px solid grey;">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3">
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="copyright">
<div class="container">
<div class="row text-center">
<p>Copyright © 2017 All rights reserved</p>
</div>
</div>
</div>
<!-- Footer 3 End -->
body{
font-family: 'Raleway', sans-serif;
}
.search-text{
padding-bottom:60px;
}
.search-text .input-search{
height:45px;
width:40%;
padding-left:20px;
color:#333;
}
.search-text .btn-search{
background: #545454;
font-family:Roboto;
border:none;
color:#FFF;
height: 45px;
width: 80px;
}
.search-text h4{
color:#888582;
font-weight: 700;
}
footer{
background-color:#222222;
padding: 60px 0px;
}
footer ul{
list-style:none;
margin:0 auto;
display:inline-block;
padding-top:50px;
}
footer ul li{
float:left;
}
footer ul li a{
color:#b1aca1;
padding:20px;
}
footer ul li a:hover{
color:#7dabdb;
text-decoration:none;
}
.footer-top{
padding-bottom:50px;
}
.footer-top .fa{
font-size:18px;
color: #FFF;
padding-right:10px;
}
.footer-top a{
color:#FFF;
background:#333333;
padding: 10px;
}
.footer-top .col-lg-2:hover .fa , .footer-top .col-lg-2:hover a{
color:#7dabdb;
text-decoration:none;
}
.copyright{
background-color:#f0f0f0;
}
.copyright p{
font-size:12px;
padding:15px 0 10px 0;
}
#top{
color: #fff;
background: #7dabdb;
cursor: pointer;
font-size: 18px;
line-height: 40px;
height: 40px;
width: 40px;
right: 30px;
position: fixed;
border-radius: 3px;
text-align: center;
bottom: 350px;
}
/* Footer 2 */
.footer-top2 a{
display: block;
color: #FFF;
background: #333333;
border-radius: 72px;
height: 100px;
width: 100px;
padding: 43px 0px;
}
.footer-top2{
padding-bottom:50px;
}
.footer-top2 .fa{
font-size:18px;
color: #FFF;
padding-right:10px;
}
.footer-top a{
color:#FFF;
background:#333333;
padding: 10px;
}
.footer-top2 .col-lg-2:hover a{
color:#FFF;
text-decoration:none;
background:#7dabdb;
transition: all 2s ease-in-out;
}
/* Footer 2 End */
/* Footer 3 */
.footer-top3 .fa{
background: #333333;
color:#FFF;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
font-size:14px;
margin-right:5px;
}
.footer-top3 .fa:hover{
color:#FFF;
background:#7dabdb;
transition: all 2s ease-in-out;
}
.footer-top3 a{
color:#FFF;
text-decoration:none;
}
/* Footer 3 End */