[html]<link href="https://fonts.googleapis.com/css?family=Inconsolata|Libre+Franklin|Questrial" rel="stylesheet">
<style>

#char1 .b-titleblock, #char1 .b-underblock, #char1 .b-charaimgover, #char1 .b-charatext::-webkit-scrollbar-thumb {background: #5942f4;}
#char2 .b-titleblock, #char2 .b-underblock, #char2 .b-charaimgover, #char2 .b-charatext::-webkit-scrollbar-thumb {background: #41a0f4;}
#char3 .b-titleblock, #char3 .b-underblock, #char3 .b-charaimgover, #char3 .b-charatext::-webkit-scrollbar-thumb {background: #2cc19e;}
#char4 .b-titleblock, #char4 .b-underblock, #char4 .b-charaimgover, #char4 .b-charatext::-webkit-scrollbar-thumb {background: #217a3d;}
#beloved { width: 500px; height: auto; border: 1px solid #ddd; background: #fff; position: relative; margin: 20px auto 0px; padding: 20px 0px 20px 0px; overflow: hidden; }
.b-introtitle { font-size: 15px; padding: 20px 10px; background: black; font-family: inconsolata; text-transform: uppercase; color: #fff; text-align: right; position: relative; letter-spacing: 4px; line-height:200%; z-index: 2; }
.b-greyblock { height: 100%; background: #eee; width: 55px; position: absolute; top: 0px; left:20px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; z-index: 1; }
.b-introtext { overflow: auto; position: relative; font-family: libre franklin; color: #777; height: 70px; width: 375px; left: 100px; font-size: 11px; text-align: justify; top: 10px; padding-right: 5px; margin-bottom: 10px; line-height: 160%; }
.b-charain { height: 150px; width: 500px; position: relative; left: 0px; top: 10px; z-index: 0; margin: 10px 0px; }
.b-charain:nth-child(odd) { z-index: 2; }
.b-charaimg { width: 100px; height: 150px; position: absolute; left: 400px; background-size: cover; }
.b-charaimgover { width: 100px; height: 150px; position: absolute; top: 0px; left: 0px; background: #5942f4; mix-blend-mode: multiply; }
.b-titleblock { width: 380px; position: relative; top: 0px; left: 0px; background: #5942f4; height: 10px; font-family: inconsolata; font-size: 14px; letter-spacing: 2px; color: #fff; padding: 10px 10px 15px; text-align: right; text-transform: uppercase; line-height: 120%; }
.b-charatext { overflow: auto; position: absolute; font-family: libre franklin; color: #777; height: 60px; width: 275px; left: 100px; font-size: 11px; text-align: justify; top: 45px; padding-right: 5px; margin-bottom: 10px; line-height: 150%; }
.b-underblock { width: 380px; position: absolute; bottom: 0px; left: 0px; background: #5942f4; height: 10px; font-family: inconsolata; font-size: 11px; letter-spacing: 2px; color: #fff; padding: 10px 10px 15px; text-align: right; text-transform: uppercase; line-height: 120%; }
.b-charatext::-webkit-scrollbar { width: 5px; }
.b-charatext::-webkit-scrollbar-track { background: none!important; border: none !important; }
.b-charatext::-webkit-scrollbar-thumb { background: black; border: none !important; }
.b-introtext::-webkit-scrollbar { width: 5px; }
.b-introtext::-webkit-scrollbar-track { background: white!important; border: none !important; }
.b-introtext::-webkit-scrollbar-thumb { background: black !important; border: none !important; }

</style>
<div id="beloved">
<div class="b-greyblock"></div>
<div class="b-introtitle">
   Корпорация №1
</div>
<div class="b-introtext">

Intro description here

</div>

<div class="b-charain"><div id="char1">
<div class="b-charaimg" style="background-image: url(https://placehold.it/150x100)"><div class="b-charaimgover"></div></div>
<div class="b-titleblock">Title here</div>
   <div class="b-charatext">
     
Description here

   </div>
   <div class="b-underblock">face, age, detail</div>
</div></div>

<div class="b-charain"><div id="char2">
<div class="b-charaimg" style="background-image: url(https://placehold.it/150x100)"><div class="b-charaimgover"></div></div>
<div class="b-titleblock">Title here</div>
   <div class="b-charatext">

Description here

   </div>
   <div class="b-underblock">face, age, detail</div>
</div></div>

<div class="b-charain"><div id="char3">
<div class="b-charaimg" style="background-image: url(https://placehold.it/150x100)"><div class="b-charaimgover"></div></div>
<div class="b-titleblock">Title here</div>
   <div class="b-charatext">
     
Description here

   </div>
   <div class="b-underblock">face, age, detail</div>
</div></div>

<div class="b-charain"><div id="char4">
<div class="b-charaimg" style="background-image: url(https://placehold.it/150x100)"><div class="b-charaimgover"></div></div>
<div class="b-titleblock">Title here</div>
   <div class="b-charatext">

Description here

   </div>
   <div class="b-underblock">face, age, detail</div>
</div></div>

</div>
<center><a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/html]