Шапка сайта для Инстант на bootstrap

<!-- header #2 -->
<header class="header" id="header2">
<div class="left">
<div class="caption">
<h2 class="title display-3 animated bounceInLeft">Шапка сайта</h2>
<p class="text animated bounceInLeft">В целом, конечно, высококачественный прототип будущего проекта предоставляет широкие возможности для распределения внутренних резервов и ресурсов. С учётом сложившейся международной обстановки, внедрение современных методик создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса позиций, занимаемых участниками в отношении поставленных задач. Кстати, ключевые особенности структуры проекта, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут представлены в исключительно положительном свете.</p>
<div class="action input-group animated bounceInLeft delay">
 <input type="text" class="form-control" placeholder="Search for..." required>
 <span class="input-group-btn">
 <button class="btn btn-success" type="button">Go!</button>
 </span>
 </div>
</div>
</div>
<i class="scroll fa fa-angle-double-down"></i>
</header>
<style>
.header {
 position: relative;
 width: 100%;
 height: 600px;
}
.header .center {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .left {
 position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .right {
 position: absolute;
top: 50%;
left: 50%;
width: 90%;
transform:translate(-50%,-50%);
z-index: 5;
 padding: 1rem;
}
.header .scroll {
 position: absolute;
 top: 95%;
 left: 50%;
 transform:translate(-50%,-50%);
 color: #fff;
 font-size: 1.5rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
.header .center {
 width: 50%;
}
.header .left {
 position: absolute;
 top: 20%;
 left: 10%;
 width: 40%;
 height: 60%;
 transform:translate(0, 0);
 padding: 1rem;
}
.header .right {
 position: absolute;
 top: 20%;
 left: 50%;
 width: 40%;
 height: 60%;
 transform:translate(0, 0);
 padding: 1rem;
}
.delay {
 animation-delay: 0.6s;
}
}
 
#header2 {
background: #355c7d;
 background:
 linear-gradient(
 rgba(53, 92, 125, 0.8), /* #355c7d */
 rgba(108, 91, 123, 0.8), /* #6c5b7b */
 rgba(192, 108, 123, 0.8) /* #c06c7b */
 ),
 url('https://cdn.stocksnap.io/img-thumbs/960w/LPPN6E2YK4.jpg') no-repeat left top;
 background-size: cover;
z-index: 0; /* bottom layout */
}
#header2 .caption {
z-index: 5;
 text-align: center;
 color: #fff;
}
#header2 .caption .title {
margin-bottom: 1.5rem;
}
#header2 .caption .text {
margin-bottom: 1.5rem;
}
#header2 .caption .action {
 display: flex;
margin-bottom: 1rem;
margin-left: 15%;
 width: 70%;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header2 .caption {
 text-align: left;
}
#header2 .caption .action {
 display: flex;
 margin-bottom: 1rem;
 margin-left: 0%;
 width: 80%;
}
</style>