[html]<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type='text/css'>
    #policy{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/zT5LU5C.jpg);
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #policy .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
  background: linear-gradient(180deg, rgba(110,94,34,1) 0%, rgba(203,195,167,1) 27%, rgba(115,87,34,1) 100%);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #policy:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }

  #organizations{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/0SFd08N.jpg);
    background-position: 30% 0%;
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #organizations .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
    position: absolute;
    top:200px;
    background: linear-gradient(180deg, rgba(110,94,34,1) 0%, rgba(203,195,167,1) 27%, rgba(115,87,34,1) 100%);
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #organizations:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
    #culture{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/bkBlwpu.jpg);
    background-position: 80% 50%;
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #culture .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
  background: linear-gradient(180deg, rgba(110,94,34,1) 0%, rgba(203,195,167,1) 27%, rgba(115,87,34,1) 100%);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #culture:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }

    #magic{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/d7duSqr.jpg);
    background-position: 50% 0%;
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #magic .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #magic:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #society {
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/IFkbZlj.jpg);
    background-position: 0% 50%;
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #society .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #society:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  } 
 
  #brothercatthoor {
    width: 250px;
    height: 250px;
    background-image:url(https://thumbs.gfycat.com/CompleteHopef … ricted.gif);
    background-position: 50% 20%;
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #brothercatthoor .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #brothercatthoor:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  .request-name {
    font-family:'Calibri', sans-serif;
    color:rgba(255,255,255,1);
    text-transform: uppercase;
    font-style: italic;
    font-size: 10px;
    letter-spacing: 3px;
    text-align: left;
    margin-bottom:40px;
  }
 
  .request-important {
    font-family:'Calibri', sans-serif;
    color: rgba(255,255,255,1);
    text-transform: uppercase;
    font-style: italic;
    font-size: 10px;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 10px;
  }
 
  .request-details {
    font-family: 'Calibri', sans-serif;
    background: rgba(255,255,255,1);
    color:rgb(0,0,0);
    width:180px;
    height: 160px;
    padding: 10px 15px;
    text-align: justify;
    font-size: 12px;
    overflow: auto;
  }
#education{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/nC789rc.jpg);
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #education .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #education:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
#world{
    width: 250px;
    height: 250px;
    background-image:url(https://i.imgur.com/6eHaqBM.png);
    --accentcolour:rgba(110,94,34,1);
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
  }
  #world .request-content {
    width: 210px;
    height: 290px;
    padding: 20px;
    background: var(--accentcolour);
  background: linear-gradient(180deg, rgba(110,94,34,1) 0%, rgba(203,195,167,1) 27%, rgba(115,87,34,1) 100%);
    position: absolute;
    top:200px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }
 
  #world:hover .request-content{
    top:-50px;
    transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
  }

   .fa {
     color:rgba(255,255,255,1);
}
 
a {
position: relative;
color: #00a650; /*задаём цвет ссылки*/
cursor: pointer;
line-height: 1; /*задаём высоту строки*/
text-decoration: none; /*убираем подчёркивание*/

}
a:after {
display: block;
position: absolute;
left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
width: 0;/*задаём длинну линии до наведения курсора*/
height: 1px; /*задаём ширину линии*/
background-color: black; /*задаём цвет линии*/
content: "";
transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}
</style>
  <center>
<table><tr>
<td>
    <div id="policy">
     <div class="request-content">
      <div class="request-name">
       государство
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        государство
      </div>
      <div class="request-details">
        <b>Объединенные королевства Вестероса</b> [United kingdoms of Westeros] (ОКВ) по форме правления наиболее приближены к конституционной дуалистической монархии. Монарха ограничивает  <b>Большой свод законов и Великий совет</b> лордов девяти областей, называемых Землями. Правящая династия — Таргариены. Король — <b>Визерис II Таргариен</b>. Во главе правительства стоит десница Дамон Ланнистер, он назначает «министров» — мастеров над определенной сферой общественной жизни. Граждане государства могут влиять на политику через выборы в «парламент» — <b>Совет государства</b> (и «парламенты» Земель — Народные советы), однако по-прежнему главами Земель, владений и районов остаются местные лорды. Несмотря на это, все люди Вестероса равны перед законом, и за любой произвол будут одинаково отвечать в суде.<br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=5#p6" style="color: black">Узнать больше</a> 
      </div>
    </div>
   </div>
  </td>
  <td>
    <div id="society">
     <div class="request-content">
      <div class="request-name">
       общество
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        общество
      </div>
      <div class="request-details">
В королевстве сосуществуют <b>сословная и классовая стратификации</b> общества. Несмотря на то, что все население Вестероса равно перед законом, сохраняются некоторые наследуемые привилегии: место в палате лордов Совета государства, управление Землей, владением или районом, исключительное право на высшие офицерские чины и должности. <b>Подобающие обращения</b> к королю и королеве: ваше величество, ваша милость. Подобающее обращение к мужу правящей королевы, принцу-консорту: ваше королевское высочество, к принцам и принцессам крови: ваше высочество, к лордам и леди, а также ближайшим членам их семьи: миледи, милорд. Одновременно с этим свобода собственности и торжество капитализма обеспечивают имущественную дифференциацию классов, не зависимо от сословия.<br>
С 12 лет все граждане оформляют id - <b>Westeros Card</b., которую меняют в 16 лет (можно получить водительские права, возраст согласия) и 18 лет (совершеннолетие).
        <br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=5#p26" style="color: black">Узнать больше</a> 
      </div>
    </div>
   </div>
  </td>
    <td>
    <div id="organizations">
     <div class="request-content">
      <div class="request-name">
       организации
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        организации
      </div>
      <div class="request-details">
        Коммерческие и не коммерческие организации не входят в государственную структуру, но многие из них играют значительную роль в Вестеросе и даже по всему миру. К ним относятся различные <b>ордена</b> с длинной и славной историей: Королевская гвардия, Ночной дозор (личная гвардия Старков теперь); <b>мейстеры</b> — профессиональные ученые с разными степенями; <b>Вольный народ</b>, который когда-то пренебрежительно называли «Одичалые» (теперь они национальность Севера, живущие в регионе Дар недалеко на юг от Стены); шпионские, благотворительные организации, корпорации. Особыми организациями являются криминальные группировки и картели, среди которых по масштабу и жестокости никто не сравнится с картелем <b>Железная кровь</b>.<br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=10#p11" style="color: black">Узнать больше</a> 
      </div>
    </div>
   </div>
  </td>
</tr>
<tr>
<td>
    <div id="education">
     <div class="request-content">
      <div class="request-name">
       образование
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        образование
      </div>
      <div class="request-details">
         Получение образования в возрасте <b>от 6 до 16 лет</b> является не только правом, но и обязанностью гражданина Объединенных королевств Вестероса. Впоследствии подросток может начать работать, продолжить обучение в школе до 18 лет для подготовки к поступлению в высшее учебное заведение или получить профессиональное образование. Среди некоторых обеспеченных семей распространено <b>домашнее образование</b> с частными учителями, однако появление образовательных онлайн-платформ делает домашнее самообучение все более доступным. <b>Высшее образование</b> представлено несколькими уровнями: бакалавриат в зависимости от специальности 4 или 5 лет и магистерская программа на 1 - 2 года. Для мальчиков и девочек (в некоторых Землях), желающих <b>построить карьеру в армии или стать миротворцем</b> («полицейским»), существуют военные академии. Поступление туда доступно с 14 лет и длится до 18 лет.<br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=11#p12" style="color: black">Узнать больше</a>
      </div>
    </div>
   </div>
  </td>
    <td>
    <div id="culture">
     <div class="request-content">
      <div class="request-name">
       культура
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        культура
      </div>
      <div class="request-details">
        Объединенные королевства Вестероса — светское государство, и среди его граждан распространен атеизм или агностицизм. Однако во многих Землях вера предков является почитаемой и заложена в основе традиций, которые влияют на частную жизнь. Совершать религиозные ритуалы в торжественных случаях также считается признаком хорошего тона. На Севере наиболее велик процент верующих в <b>Старых богов</b>, на Железных островах — в <b>Утонувшего бога</b>, а в остальных Землях — в <b>Семерых</b>. Появился и новый <b>культ Матери драконов</b> — фанатики, которые ждут возвращения драконов и королевы Дейнерис.<br>
Наиболее консервативными являются северяне (они осуждают «распутное, нетрадиционное» сексуальное и «неподобающее» поведение, наличие бастардов), наиболее толерантными ко всему — дорнийцы. Во всех землях люди читают журналы и газеты, смотрят телевизор, слушают радио и все чаще через <b>Интернет</b>. Несмотря на размер и разнообразие собственных территорий, жизнь на других континентах интересует граждан ОКВ: они стремятся побывать за границей или хотя бы узнать о других странах и людях дистанционно. <br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=3" style="color: black">Узнать больше</a>
      </div>
    </div>
   </div>
  </td>
    <td>
    <div id="magic">
     <div class="request-content">
      <div class="request-name">
       магия
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        магия
      </div>
      <div class="request-details">
        Магия циклична и может исчезать и возвращаться по необъяснимым причинам. Она никогда не покидает мир полностью, и где-то всегда можно найти ее отголоски. Однако после смерти последнего дракона постепенно люди перестали в нее верить и отвели место исключительно в фольклоре, а все «магические» <b>артефакты</b> поместили в музеи и тайное хранилище в Цитадели. Этому активно потворствовали мейстеры, которые почивали на лаврах, когда наука заняла место магии. Те, кто продолжал в нее верить, объявлялись сумасшедшими либо шарлатанами. Поэтому люди, которые открывают в себе способности <b>оборотней, сновидцев или пиромантов</b> либо отрицают собственную природу, либо тщательно ее скрывают. Должно произойти что-то очень значительное, чтобы перевернуть настоящее положение вещей.<br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=6" style="color: black">Узнать больше</a>
      </div>
    </div>
   </div>
  </td>
</tr>
<tr>
<td>
    <div id="world">
     <div class="request-content">
      <div class="request-name">
       остальной мир
       <i class="fa fa-bars" style="float: right"></i>
      </div>
      <div class="request-important">
        остальной мир
      </div>
      <div class="request-details">
        Мир за пределами Вестероса составляют еще три континента: Эссос, Соториос, Ультос и множество островов. Наиболее тесные контакты у ОКВ сложились с Вольными государствами Эссоса — наследниками Вольных городов ввиду географического соседства через Узкое море и древних многосторонних контактов. В 905 — 910 годах между ОКВ и конфедераций Вольных городов Эссоса разразилась война за мировое первенство и власть над колониями в менее развитых Соториосе, Ультосе и Летних островах. Она получила название <b>Мировой войны</b>, поскольку в роли союзников с обеих сторон был вовлечён практически весь мир. К 1019 году конфедерация распалась, мир становится многополярным, возвышаются другие страны, готовые соперничать в разных сферах со старым миром в лице Вестероса и западного Эссоса. Например, республика И-Ти и царство Омбер. Однако что-то остается неизменным: загадочный Край Теней по-прежнему малоизученная и опасная земля, откуда никто не возвращается.
<br>
<a href="http://gotreincarnation.f-rpg.me/viewtopic.php?id=253" style="color: black">Узнать больше</a> 
      </div>
    </div>
   </div>
  </td>
</tr>
</table>

   

  </center>[/html]
hide-autor