<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid img-responsive">
<div class="topnav">
<div class="row">
<div class="col-xs-1">
<a class="active" href="#home">Home</a>
</div>
<div class="cols-xs-1">
<a href="#news">News</a>
</div>
<div class="col-xs-1">
<a href="#contact">Contact</a>
</div>
<div class="col-xs-1">
<a href="#about">About</a>
</div>
</div>
</div>
<br>
<div class="md-form mt-0 row" >
<div class="input-group">
<input type="text" class="form-control mx-auto" placeholder="Search for your favorite fan art">
<span class="input-group-btn">
<button class="btn btn-search" type="button"><i class="fa fa-search fa-fw"></i> Search</button>
</span>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-xs-3">
<img src="https://sun9-54.userapi.com/c845123/v845123883/2e226/af6y6vStsX8.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://sun9-9.userapi.com/c841124/v841124392/82435/urJ4f0pLr3k.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://sun9-32.userapi.com/c824201/v824201420/18cd3f/BZX-Y4O5v7k.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://sun9-34.userapi.com/c543101/v543101902/51581/6S8Q-AMnRHc.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<img src="https://sun9-22.userapi.com/c850436/v850436057/ff06a/pnPY9FuTj74.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://sun9-37.userapi.com/c855128/v855128464/bced7/9Ua8UtrL6Rg.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<br>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/ef/e9/57/efe957148ad4eb28c0e6449ecf65e958.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/c3/08/ff/c308ffe28d4c90c6a47888bf9a5cdd14.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<br>
<div class="row">
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/4a/fc/cb/4afccbbc76aa6af9eb4ca65c7c232d1a.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/8f/c1/82/8fc18259b6152768740088ca157d3513.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<br>
<div class="col-xs-3">
<br>
<br>
<img src="https://i.pinimg.com/236x/84/b8/04/84b8040353e34455c1157949938b0468.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
<br>
<div class="col-xs-3">
<br>
<br>
<img src="https://i.pinimg.com/236x/9f/fb/22/9ffb2279376c0392c569f206574fbbdd.jpg" class="rounded mx-auto d-block" alt="..." style="width:300px;height:300px;">
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/11/f0/0c/11f00c6d3bfefa5221e309ff8f0cbc1b.jpg" alt="..." class="rounded mx-auto d-block" style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/44/dd/fa/44ddfa7d51e36add695687c0264a6f00.jpg" alt="..." class="rounded mx-auto d-block" style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/84/6a/de/846adee4c6ca956605ffa5da9a667a7d.jpg" alt="..." class="rounded mx-auto d-block" style="width:300px;height:300px;">
</div>
<div class="col-xs-3">
<img src="https://i.pinimg.com/236x/42/ef/bc/42efbca4f1db5bf786e7a1310e691938.jpg" alt="..." class="rounded mx-auto d-block" style="width:300px;height:300px;">
</div>
</div>
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float:left;
color: #f2f2f2;
padding: 14px 16px;
font-size: 1.25em;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#search{
float:center;
padding:15px 10px;
text-align:Center;
}
.btn-search {
background: #424242;
border-radius: 0;
color: #fff;
border-width: 1px;
border-style: solid;
border-color: #1c1c1c;
}
.btn-search:link, .btn-search:visited {
color: #fff;
}
.btn-search:active, .btn-search:hover {
background: #1c1c1c;
color: #fff;
}
.D{
max-height: 100px;
max-width: 100px;
width: 100px;
height: 100px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.