Custom bio code #1 by wehelprps

<!-- Please don't steal nor use as a base code! Thank you! -->



<!-- METATAGS -->



<meta name="color:BioColor1" content="#ffffff" />
<meta name="color:BioColor2" content="#f9ad81" />
<meta name="color:BioColor3" content="#d07440" />



/* CSS */



@font-face {
    font-family: 'BebasNeue';
    src: url('http://static.tumblr.com/xm4tcac/Uzzmm5co8/bebasneue-webfont.ttf');
}

.topbar, .name, .subtitle, .biography, .info {
    display:inline-block;
}

.topbar, .name, .biography, .info {
    margin-bottom:12px;
}

.topbar {
    width:500px;
    height:75px;
    background:{color:BioColor2}; /* Color 2 */
    color:{color:BioColor1}; /* Color 1 */
}

.name {
    font-family: 'BebasNeue';
    font-size:35pt;
    color:{color:BioColor1}; /* Color 1 */
    text-align:center;
    width:500px;
    margin-top:10px;
    line-height:100%;
    text-transform:uppercase;
    text-shadow: 0 0 0.2em {color:BioColor3}; /* Color 3 */
}

.subtitle {
    position:absolute;
    font-family:Calibri;
    font-size:10px;
    text-align:center;
    width:500px;
    color:{color:BioColor1}; /* Color 1 */
    margin-top:-15px;
    line-height:100%;
    text-transform:uppercase;
    text-shadow: 0 0 0.2em {color:BioColor3}; /* Color 3 */
}

.biography {
    width:470px;
    height:170px;
    padding:15px;
    color:{color:BioColor1}; /* Color 1 */
    background:{color:BioColor2}; /* Color 2 */
    overflow:auto;
    font-family:Calibri;
    font-size:10pt;
    text-align:right;
    line-height:120%;
    text-shadow: 0 0 0.2em {color:BioColor3}; /* Color 3 */
}

.biography::-webkit-scrollbar-thumb {
    background-color:{color:BioColor2}; /* Color 2 */
    height:10px;
}

.biography::-webkit-scrollbar {
    background-color:{color:BioColor2}; /* Color 2 */
    height:8px;
    width:5px;
}

.info {
    width:480px;
    height:25px;
    padding:10px;
    text-align:center;
    color:{color:BioColor1}; /* Color 1 */
    background:{color:BioColor2}; /* Color 2 */
    font-family:Calibri;
    font-size:10px;
    text-transform:uppercase;
    text-shadow: 0 0 0.2em #{color:BioColor3}; /* Color 3 */
}



<!-- HTML -->


<div class="topbar">
<div class="name">CHARACTER'S NAME</div>
<div class="subtitle"><em>subtitle</em></div>
</div>
<div class="biography">Biography here</div>
<div class="info"><em>FC: name of celebrity<br />this character is open</em></div>