<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"><style type="text/css">#abase {width: 480px; height: 650px; background: #0f0f0f;} .ttl {font-family: 'Dosis'; font-size: 30px; padding: 10px; text-align: center;} .line {width: 450px; height: 3px; background: #141318;} .img {width: 100px; height: 100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 3px solid #141318;} .data {width: 200px; height: 15px; display: inline-block; margin: 5px; background: #141318; font-family: 'Calibri'; font-size: 15px; text-align: center;} .info {width: 450px; height: 397px; overflow: auto; padding: 10px; font-family: 'Arial' normal; font-size: 14px; text-align: justify; border: 1px solid #141318;} .subtt {width: 200px; font-family: 'Dosis'; font-size: 16px; color: #fff; text-align: left; border-bottom: 3px solid #141318;} .crt {font-family: Calibri; font-size: 10px; text-transform: uppercase;}</style>

<center><div id="abase"><div class="ttl">Name</div><div class="line"></div><div class="img" style="background-image:url(http://via.placeholder.com/100x100)";></div><div class="data">Data 1</div><div class="data">Data 2</div>
<div class="data">Data 3</div><div class="data">Data 4</div><div class="info"><div class="subtt">Story</div>Nunc orci felis, feugiat id efficitur vel, tempus vitae elit. Curabitur sollicitudin at sapien in venenatis. Fusce suscipit tempor leo nec vehicula. Maecenas id dolor vitae leo accumsan porta nec nec sem. Vivamus tincidunt rhoncus ante, vitae dictum velit volutpat at. Vestibulum sed ex maximus dolor tempus viverra. Morbi nec sapien vitae ante laoreet venenatis. Nunc tristique sapien lorem, vitae dapibus risus interdum vitae. Curabitur nec metus quis eros blandit interdum. In id orci vitae nulla tristique finibus.

<div class="subtt">Data here</div>► Fact 1
► Fact 2
► Fact 3
► Fact 4
► Fact 5</div></div><div class="crt"><a href="http://alherya.tumblr.com">Alherya</a></div></center>