Код:
<link href='http://fonts.googleapis.com/css?family=Vidaloka' rel='stylesheet' type='text/css'>

<style type="text/css">

.nsyncbye { width: 400px; padding: 20px; background-color: #dcdcdc; text-align: justify; line-height: 12px; text-transform: none; color: #000; font-family: arial; font-size: 13px; border: 1px solid #eee;}

.nsyncbye b { font-size: 15px; }

.nsyncbye i { font-size: 15px; }

.yoyohi { padding: 10px; background-color: #ffffff; text-align: center; line-height: 10px; text-transform: uppercase; color: #000; font-family: 'Vidaloka'; font-size: 15px; letter-spacing: 2px; border-bottom: 5px solid #eee; }

.yoyobye {  width: 375px; padding: 12px; background-color: #ffffff; text-align: justify; line-height: 16px; text-transform: none; color: #000; font-family: arial; font-size: 12px; }

.yayo { padding: 10px; background-color: #ffffff; text-align: left; line-height: 10px; text-transform: uppercase; color: #000; font-family: 'Vidaloka'; font-size: 13px;  transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; }

.yayo:hover { letter-spacing: 5px; }


</style>
<center>

<div class="nsyncbye">
<div class="yayo"><i>Общая информация.</i></div><br>
 
<p>
<div class="yoyobye">
Три года тому назад, внук мультимиллионера был атакован монстром и спасён случайным прохожим. Когда мультимиллионер узнал о том, что произошло, ему в голову пришла идея создания существующей ныне системы и основания Геройской Ассоциации с национальным реестром героев на собственные средства. Тем не менее, сейчас Ассоциация также существует и за счёт пожертвований от обычных граждан. Практически в каждом городе присутствует штаб-квартира Геройской Ассоциации. Герои, зарегистрированные в реестре Ассоциации, получают свою долю пожертвований из Геройского Фонда в соответствии с количеством совершённых ими дел. Для того, чтобы пройти регистрацию в реестре героев нужно сдать два теста: на физическую подготовку и письменный. Минимальное количество баллов для прохождения по итогам двух тестов — семьдесят. По итогам теста, каждому новоявленному герою присваивается свой ранг и класс. Эта классификация всегда в центре внимания СМИ и общества.

</div><p>
<div class="yayo"><i>Классификация.</i></div><br>
 
<p>
<div class="yoyobye">
<b>Герои</b> - люди, которые стоят на защите мира и справедливости. Их долгом так же является защита невинных жителей от всех видов опасности будь то мистическое существо, природный катаклизм или злодеи. Большинство героев зарегистрированы в Геройской Ассоциации и имеют свой <u>класс.</u> Незарегистрированных героев же не упоминают в каких-либо видах масс-медиа и называют "чудаками". <br>

<b>С-class</b> - самый низкий ранг, в который определяют новичков, показавших низкие результаты тестов при поступлении в Геройскую Ассоциацию. Они обязаны еженедельно совершать геройства, иначе их выгонят. Достигая номера один в этом классе, герой может перейти в более высокий класс. На данный момент состоит из <u>390</u> героев.<br>

<b>B-class</b> - герои этого класса не обязаны совершать еженедельные геройства. Достигая номера один в этом классе, герой может перейти в более высокий класс. На данный момент состоит из <u>101</u> героя.<br>

<b>A-class</b> - герои этого класса довольно сильны физически и часто многие из них становятся популярными среди общественности. Достигая номера один в этом классе, герой может перейти в более высокий класс. На данный момент состоит из <u>38</u> героев.<br>

<b>S-class</b> - герои этого класса являются самыми сильными во всей Ассоциации, сила которых зачастую выходит за рамки человеческих возможностей. На данный момент состоит из <u>17</u> героев.

</div><p>

<div class="yayo"><i>Уровни опасности.</i></div><br>
 

<p>

 
<div class="yoyobye">
<center><b>Уровень опасности</b></center>
Определение, которое Геройская Ассоциация присваивает мистическому существу или природному катаклизму, основываясь на количестве жертв, которое будет затронуто.
<br>
<center><b>Тигриный Уровень</b></center>
<center><img src="http://i75.fastpic.ru/big/2016/0113/03/dd6bff3915682ec9f1342aa91e9d4703.png" /></center>
Мистическое существо или природный катаклизм, который несёт угрозу большому количеству людей.
<br>
<center><b>Демонический Уровень</b></center>
<center><img src="http://i74.fastpic.ru/big/2016/0113/5f/aeb38b64b404aaf9f8d790c8dc63895f.png" /></center>
Мистическое существо или природный катаклизм, который несёт угрозу всему городу и его населению.
<br>
<center><b>Драконий Уровень</b></center>
<center><img src="http://i75.fastpic.ru/big/2016/0113/a5/015c5cfbe265e6718c50bda9e6f0cfa5.png" /></center>
Мистическое существо или природный катаклизм, который несёт угрозу нескольким городам.
<br>
<center><b>Божественный Уровень</b></center>
<center><img src="http://i74.fastpic.ru/big/2016/0113/cb/c91c4c34291caf1b7acadabc355107cb.png" /></center>
Мистическое существо или природный катаклизм, который несёт угрозу человечеству как виду.

</div><p>

 
</center>