[hideprofile][html]<style>
.wonmain {
  border: 1px solid #d7d7d7;
  line-height: normal;
  width: 640px;
  padding: 20px;
  background-color: white;
  color: #000;
}

.wonmain a {
  text-decoration: none;
  color: #000;
  font-weight: 900;
}

.wonmain b {
  color: var(--border);
  font-weight: 900;
}

.wontitle {
font-family: var(--font-subtitle);
font-size: 40px;
color: var(--color-white);
text-shadow: 2px 2px 6px var(--color-main);
text-transform: uppercase;
letter-spacing: 2px;
}

.wondesc {
  width: 300px;
  font-family: lato;
  font-weight: 400;
  font-size: 10px;
  text-align: justify;
  margin-bottom: 15px;
  color: #000;
}

.wonmiddle {
  width: 0px;
  position: relative;
  padding-bottom: 70px;
  border-right: 1px solid #000;
}

.woncenter {
  position: relative;
  right: 125px;
}

.wonleft {
  width: 250px;
  position: relative;
  right: 90px;
}

.wonleftnumber {
  font-family: cinzel;
  font-weight: 900;
  letter-spacing: -3px;
  font-size: 60px;
  color: var(--border);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.wonleftbox {
  position: relative;
  z-index: 2;
  right: 10px;
  top: 45px;
}

.wonleftcircle {
  position: absolute;
  right: 20px;
  font-family: arial;
  font-size: 30px;
  top: -5px;
}

.wonleftname {
  font-family: lato;
  font-weight: 900;
  color: #000;
  font-size: 12px;
  width: 200px;
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-align: left;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 16px;
}

.wonlefttext {
  margin-right: 20px;
  width: 180px;
  text-align: justify;
  font-family: lato;
  font-weight: 400;
  line-height: 13px;
  font-size: 1.1em;
  color: #000;
}

.wonright {
  width: 250px;
  position: relative;
  left: 90px;
}

.wonrightnumber {
  font-family: cinzel;
  font-weight: 900;
  letter-spacing: -3px;
  font-size: 60px;
  color: var(--border);
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}

.wonrightbox {
  position: relative;
  z-index: 2;
  left: 10px;
  top: 45px;
}

.wonrightcircle {
  position: absolute;
  left: 20px;
  font-family: arial;
  font-size: 30px;
  top: -5px;
}

.wonrightname {
  font-family: lato;
  font-weight: 900;
  color: #000;
  font-size: 13px;
  width: 200px;
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-align: right;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 16px;
}

.wonrighttext {
  margin-left: 20px;
  width: 180px;
  text-align: justify;
  font-family: lato;
  font-weight: 400;
  line-height: 13px;
  font-size: 1.1em;
  color: #000;
}
</style>

<center>
  <div class="wonmain">
    <div class="wontitle">ХРОНОЛОГИЯ МИРА</div>
    <div class="wondesc">
      short description here. if you don't want to add a description you can always add lyrics to supplement or just completely ignore this it doesn't really matter. <b>this is bold</b> isn't that nice.
    </div>
    <div class="wonmiddle">
      <div class="woncenter">

        <div class="wonleft">
          <div class="wonleftnumber">5000</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">Около 5000 лет назад</div>
            <div class="wonlefttext">
              Эрдана была создана
            </div>

          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">3000</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">Около 3000 лет назад</div>
            <div class="wonrighttext">
              состоялась битва между воплощениями Хаоса и Порядка, последний победил, но разделился на две части
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">2500</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">Около 2500 лет назад</div>
            <div class="wonlefttext">
              Маллеус, один из богов и воплощение Зла, был повержен братом-близнецом Сакрой и заключен в земные глубины
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">1500</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">Около 1500 лет назад</div>
            <div class="wonrighttext">
              появились первые ведьмы и драконы
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">1057</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">1057 лет назад (1 год эпохи Света)</div>
            <div class="wonlefttext">
              впервые ведьмам и драконам был дан полноценный отпор
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">...</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname"><...></div>
            <div class="wonrighttext">
              <...>
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">686</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">686 лет назад (1 год эпохи Смуты)</div>
            <div class="wonlefttext">
              королевства порвали все отношения друг с другом, началась война "все против всех"
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">...</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname"><...></div>
            <div class="wonrighttext">
              <...>
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">430</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">430 лет назад (256 год эпохи Смуты)</div>
            <div class="wonlefttext">
              создание Алиджаннатского султаната
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">421</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">421 год назад (1 год эпохи Возрождения)</div>
            <div class="wonrighttext">
              создание Империи Нобелькроне и победа над Ковеном
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">421 - 415</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">421 - 415 лет назад (1 - 7 годы эпохи Возрождения)</div>
            <div class="wonlefttext">
              война с Алиджаннатским султанатом
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">...</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname"><...></div>
            <div class="wonrighttext">
              <...>
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">...</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname"><...></div>
            <div class="wonlefttext">
              <...>
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">212</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">212 лет назад (209 год эпохи Возрождения)</div>
            <div class="wonrighttext">
              начало промышленной революции
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">...</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname"><...></div>
            <div class="wonlefttext">
              <...>
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">156</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">156 лет назад (265 год эпохи Возрождения)</div>
            <div class="wonrighttext">
              присоединение Данадеша, Хэго и Ямато к Империи Нобелькроне
            </div>
          </div>
        </div>

      </div>
    </div>
   </div>
</center>

<center>
  <div class="wonmain">
    <div class="wontitle">ХРОНОЛОГИЯ Игр</div>
    <div class="wondesc">
      short description here. if you don't want to add a description you can always add lyrics to supplement or just completely ignore this it doesn't really matter. <b>this is bold</b> isn't that nice.
    </div>
    <div class="wonmiddle">
      <div class="woncenter">

        <div class="wonleft">
          <div class="wonleftnumber">01</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">1060-1057 лет назад</div>
            <div class="wonlefttext">
              состоялась первая Игра - победителя нет
            </div>

          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">02</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">424 - 421 год назад</div>
            <div class="wonrighttext">
              состоялась Игра - выиграл Прекрасный Принц (Микаэль Блументаль)
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">03</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">212 - 209 лет назад</div>
            <div class="wonlefttext">
              состоялась Игра - выиграла Марья-Искусница (Мария Блументаль)
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">04</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">159 - 156 лет назад</div>
            <div class="wonrighttext">
              состоялась Игра - выиграл
            </div>
          </div>
        </div>

        <div class="wonleft">
          <div class="wonleftnumber">05</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">53 - 50 лет назад</div>
            <div class="wonlefttext">
              состоялась Игра - победителя нет
            </div>
          </div>
        </div>

        <div class="wonright">
          <div class="wonrightnumber">06</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">Настоящее время</div>
            <div class="wonrighttext">
              Настоящее время - началась игра
            </div>
          </div>
        </div>

      </div>
    </div>
   </div>
</center>[/html]