calibrate this v2

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Rock+Salt');

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { border-radius: 0px;}
::-webkit-scrollbar-thumb { border-radius: 0px; background-color: #556764;}

body { background-color: #33383B; }

.box-a {position: absolute; left: 0%; bottom: -20%; height: 475px; width: 450px; background-color: #;}

.box-b {position: absolute; left: 15%; bottom: 30%; height: 250px; width: 750; background-color: #000; border-radius: 10px; }

.pic { position: absolute; left: 0%; bottom: 0%; height: 98%; width: 100%; background:url('http://i.picpar.com/4kCd.png') no-repeat; background-size: 100%; }

.text {position: absolute; left: 465px; bottom: 0px; height: 230px; width: 250px; font-family: 'Open Sans Condensed', sans-serif; color: #556764; font-size: 14px; overflow: auto; text-align: justify; background-color: #33383B; font-size: small; border-left: dashed 1px #000; border-right: dashed 1px #000; padding: 10px ;}

.title {position: absolute; bottom: 95%; left: 50%; background-color: transparent; font-family: 'Rock Salt', cursive; color: #556764; letter-spacing: 5px; font-size: 50px; }

.ring1 {
 position: fixed;
 bottom: 10%;
 left: -15%;
 animation: outer 10s infinite;
 animation-delay: ;
 animation-timing-function: linear;
 opacity: .5;
 z-index: -10;
}

.ring2 {
 position: fixed;
 bottom: 17%;
 left: -8%;
 animation: middle 15s infinite;
 animation-delay: ;
 animation-timing-function: linear;
 opacity: .6;
 z-index: -10;
}

.ring3 {
 position: fixed;
 bottom: 23%;
 left: -2%;
 animation: center 7s infinite;
 animation-delay: ;
 animation-timing-function: ;
 opacity: .7;
 z-index: -10;
}

.ring4 {
 position: fixed;
 bottom: 27%;
 left: 1%;
 animation: inner 7s infinite;
 animation-delay: ;
 animation-timing-function: ;
 opacity: .8;
 z-index: -10;
}

#nav { position: absolute; left: 60%; bottom: 40%; line-height: 10px; background: transparent;}

#nav a {display: block; height: 10px; width: 10px; text-decoration: none; border: 1px #000 solid; background: white; transition:all .3s ease-out;}

#nav a:hover { background: black; transition: all .3s ease-out;}

@keyframes outer {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(180deg); }

}

@keyframes middle {
 0% { transform: rotate(0deg); }
 50% { transform: rotate(-180deg); }
 100% { transform: rotate(-360deg); }
}

@keyframes center {
 0% { transform: rotate(0deg); }
 50% { transform: rotate(-180deg); }
 100% { transform: rotate(360deg); }
}

@keyframes inner {
 0% { transform: rotate(0deg); }
 25% { transform: rotate(-90deg); }
 50% { transform: rotate(180deg); }
 75% { transform: rotate(-180deg); }
 100% { transform: rotate(360deg); }
}


</style>
<body>

<div class="box-b">

<div class="title">Title here.</div>

<div id="nav">
<a href="#a"></a><br>
<a href="#b"></a><br>
<a href="#c"></a><br>
<a href="#d"></a>
</div>

<div class="text">

Hopefully this is good enough for you. All you really have to is just change the colors the way you want and maybe change the font style of the text box and title.<p>

Lorem ipsum dolor sit amet consectetur adipiscing elit, rutrum non tellus est nisi bibendum auctor, mi conubia ornare netus proin litora. Posuere volutpat tincidunt lobortis lacus montes sem penatibus hendrerit blandit scelerisque ut, primis tempus non nunc vitae natoque turpis erat in laoreet quisque aptent, fringilla enim eu morbi potenti ligula id taciti quam sed. Risus natoque sollicitudin at semper nulla morbi ligula id non, hac torquent primis malesuada montes justo vel eget lectus est, maecenas imperdiet blandit facilisis tincidunt ut fringilla sed.<p>

Est morbi pretium sociis habitant pharetra convallis inceptos montes himenaeos, varius odio interdum malesuada sagittis parturient diam mus, dapibus phasellus non tincidunt hac vel ornare euismod. Condimentum volutpat aliquam varius placerat magna porttitor dignissim penatibus ultrices nascetur nec et ornare tempor odio per, justo enim imperdiet mauris fusce torquent hac nullam bibendum quisque sem dictumst aliquet donec gravida. Erat vel habitasse urna curae viverra conubia non morbi, et habitant sollicitudin commodo magnis suspendisse netus.

</div>

<div class="box-a"><div class="pic"></div>

<div class="ring1">
<img src="http://i.picpar.com/pmCd.png" width="" ></div>
</div>

<div class="ring2">
<img src="http://i.picpar.com/qmCd.png" width="" ></div>
</div>

<div class="ring3">
<img src="http://i.picpar.com/smCd.png" width="" ></div>
</div>


<div class="ring4">
<img src="http://i.picpar.com/tmCd.png" width="" ></div>
</div>


</body>
</body>