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

<!-- header #1 -->
<header class="header" id="header1">
<img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" alt="">
<div class="circle">
<div class="caption">
<h2 class="title display-3">Alphad Design &<strong>Андрей дизайнер</strong></h2>
<p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.</p>
</div>
</div>
</header>
<style>
/* =======================================
 header
========================================*/
.header {
 position: relative;
 width: 100vw;
 height: 600px;
}
.header .center {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 25%;
 transform:translate(-50%,-50%);
 z-index: 15;
 padding: 1rem;
}
.header .left {
 position: absolute;
 top: 0%;
 left: 0%;
 width: 50%;
 height: 100%;
 z-index: 5;
}
.header .right {
 position: absolute;
 top: 0%;
 left: 50%;
 width: 50%;
 height: 100%;
 z-index: 5;
}
.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 {
}
.header .right {
}
}
 
 
/* =======================================
 header#1
========================================*/
#header1 {
 background: linear-gradient(to right, #614385, #516395);
 overflow: hidden;
 background-size: 400% 400%;
 -webkit-animation: gradanim-2 8s ease infinite;
 -moz-animation: gradanim-2 8s ease infinite;
 animation: gradanim-2 8s ease infinite;
}
@-moz-keyframes gradanim-2 {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
@keyframes gradanim-2 {
 0%{background-position:11% 0%}
 50%{background-position:90% 100%}
 100%{background-position:11% 0%}
}
#header1 img {
 position: absolute;
 left: 50%;
}
#header1 .circle {
 position: absolute;
 left: 10%;
 top: 10%;
 width: 50vw;
 height: 50%;
}
 /*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header1 {
}
#header1 img {
 z-index: 5;
}
#header1 .circle {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 40vw;
 height: 40vw;
 border-radius: 50%;
 background: linear-gradient(to left, #ff512f, #dd2476);
 background-size: 200% 200%;
 -webkit-animation: gradanim-2 8s ease infinite;
 -moz-animation: gradanim-2 8s ease infinite;
 animation: gradanim-2 8s ease infinite;
}
@-moz-keyframes gradanim-2 {
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
@keyframes gradanim-2 {
 0%{background-position:11% 0%}
 50%{background-position:90% 100%}
 100%{background-position:11% 0%}
}
#header1 .caption {
 color: #fff;
 position: relative;
 top: 15%;
 left: -5%;
 padding-right: 3rem;
}
}
</style>