HTML ve CSS Basit bir kaç satır kod lazım

Merhaba arkadaşlar. Aşağıdaki gibi bir footer için HTML ve CSS kodlarına ihtiyacım var.

Resimdeki gibi 3 bölümden oluşacak, mobilde sağ ve sol kısımlar görünmeyecek. Sadece copyright kısmı gözükecek.



Teşekkür ederim.

https://www.w3schools.com/howto/tryi...yhow_js_topnav benzer bir şey az bakarak yaparsın

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">




<div class="search-text">
<div class="container">
<div class="row text-center">
<div class="form">
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Search">
<button type="submit" class="btn-search">Search</button>
</form>
</div>
</div>
</div>
</div>

<footer>
<div class="container">
<div class="row text-center">

<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-inline">

<li>
<a href="#"><i class="fa fa-facebook fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-dropbox fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-flickr fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-github fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</li>

</ul>
</div>

<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="menu list-inline">

<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>



<br><br><br><br><br><br>



<div class="search-text">
<div class="container">
<div class="row text-center">

<div class="form">
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Search">
<button type="submit" class="btn-search">Search</button>
</form>
</div>

</div>
</div>
</div>

<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="menu list-inline">
<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 class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-dropbox fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-flickr fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-github fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></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>
<!-- End -->


<br><br><br><br><br><br>


<!-- Footer 3 -->
<div class="search-text">
<div class="container">
<div class="row text-center">

<div class="form">
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search" placeholder="Search">
<button type="submit" class="btn-search">Search</button>
</form>
</div>

</div>
</div>
</div>

<footer>
<div class="container">
<div class="row text-center">
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-dropbox fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-flickr fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-github fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
</li>

<li>
<a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
</li>
</ul>
</div>

<div class="row text-center">
<ul class="menu list-inline">
<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>
</footer>

<div class="copyright">
<div class="container">
<div class="row text-center">
<p>Copyright © 2017 All rights reserved</p>
</div>
</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins');

body{
font-family: 'Poppins', sans-serif;
}

.search-text{
    margin-top:50px;
    background-color:#7dabdb;
    padding-top:60px;
    padding-bottom:60px;
}
    
.search-text .input-search{
    height:45px;
    width:400px;
    padding-left:20px;
color:#333;
}

.search-text .btn-search{
    background-color:#7dabdb;
    border:1px solid #FFF;
    color:#FFF;
    padding: 11px 22px;
}

.search-text .btn-search:hover{
    background-color:#FFF;
    color:#7dabdb;
}

.copyright{
background-color:#f0f0f0;
}

.copyright p{
margin:15px 0px;
}

footer{
    background-color:#222222;
    padding: 60px 0px;
}

footer .menu li a{
    color:#b1aca1;
    padding:10px;
    text-decoration:none;
}

footer .menu li a:hover{
    color:#7dabdb;
}

.fa.fa-facebook ,
.fa.fa-dropbox,
.fa.fa-flickr ,
.fa.fa-github ,
.fa.fa-linkedin ,
.fa,fa-tumblr ,
.fa.fa-google-plus ,
.fa.fa-tumblr {
    color:#b1aca1;
    font-size:20px;
    padding:10px;
}

.fa.fa-facebook:hover,
.fa.fa-dropbox:hover,
.fa.fa-flickr:hover,
.fa.fa-github:hover,
.fa.fa-linkedin:hover,
.fa,fa-tumblr:hover,
.fa.fa-google-plus:hover,
.fa.fa-tumblr:hover {
    color:#6794c2;
}

hocam işinizi görücektir.