<!--HTML-->
<style type="text/css">
	  @import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC');
	  @import url('https://fonts.googleapis.com/css?family=Alice');
	
  .lili li {
  list-style-type: none; /* Убираем маркеры у списка */
   }
  .lili li:before {
    content: "ᛟ "; /* Добавляем в качестве маркера символ */
   }


.alink a{text-decoration: none;
    font-family: 'Alice', serif;
    color: #444;}
    
.alink a:hover{
    	color: #983322;
    }



</style>

<div style="
    background-image: url(https://3dnews.ru/assets/external/illustrations/2017/02/09/947265/The-Banner-Saga-Xbox-One-port.jpg);
    background-size: cover;
    width: 590px;
    height: 900px;
    padding: 10px;
    ">
	
	<div style="
    /* background-color: rgba(255, 255, 255, 0.78); */
    width: 549px;
    height: 850px;
    margin: 0 auto;
    margin-top: 20px;
    ">
    
        <div style="
    margin: 0 auto;
    text-align: center;
    display: block;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(156, 163, 181, 0.82);
    /* width: 421px; */
    color: #444;"><h1 style="font-family: 'IM Fell English SC', serif; ">Ragnarok: battle for Mitgard</h1></div>

    <div style="
    text-align: center;
    font-family: 'Alice', serif;
    padding: 20px;
    margin-top: 18px;
    font-size: 18px;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(181, 189, 204, 0.77);
"><p>Здравствуй, добрый путник! Что, привела тебя сюда жажда приключений?
    Мир людей и варлов в опасности. Даже боги не могут его защитить и вынуждены в нем укрываться, то бы спасти хотя бы себя.
    Враг не дремлет. Йотуны приходят из далеких земель. Наступает "Великанская Зима".
    Выбери, на чьей ты стороне и попробуй выжить в таких суровых условиях!</p></div>


    <div class="lili" style="
    /* text-align: center; */
    font-family: 'Alice', serif;
    padding: 20px;
    font-size: 16px;
    display: block;
    width: 220px;
    margin-top: 25px;
    position: absolute;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(181, 189, 204, 0.77);
">
    	<ul>
        <li><a href="#">Ссылка в тексте</a></li>
        <li><a href="#">Ссылка в тексте</a></li>
        <li><a href="#">Ссылка в тексте</a></li>
    	</ul>
    </div>

    <div class="lili" style="
    /* text-align: center; */
    font-family: 'Alice', serif;
    padding: 20px;
    font-size: 16px;
    display: block;
    width: 220px;
    margin-top: 25px;
    margin-left: 290px;
    position: absolute;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(181, 189, 204, 0.77);
">
    	<ul>
        <li><a class="alink" href="#">Ссылка в тексте</a></li>
        <li><a class="alink" href="#">Ссылка в тексте</a></li>
        <li><a class="alink" href="#">Ссылка в тексте</a></li>
    	</ul>
    </div>

 <div style="
        text-align: center;
        font-family: 'Alice', serif;
        padding: 20px;
        font-size: 18px;
        position: relative;
        margin-top: 165px;
        box-shadow: 2px 2px 6px #1f232f;
        background: rgba(181, 189, 204, 0.77);
"><p>Когда все прочитано и ты в курсе всех событий, но остались некоторые вопросы - задавай их в этой теме. Так же, если ты выбрал себе роль и ее необходимо придержать, то заявку так же оставляй здесь, но помни, что у тебя есть всего 5 дней с момента бронирования для написания анкеты.</p></div>



 <div style="
    /* text-align: center; */
    font-family: 'Alice', serif;
    padding: 20px;
    font-size: 16px;
    display: block;
    width: 220px;
    margin-top: 25px;
    position: absolute;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(181, 189, 204, 0.77);
">
    	<b>Придержанные роли</b>
    	<p>
        - <br>
        - <br>
        - <br>
    	</p>
    </div>


     <div style="
    /* text-align: center; */
    font-family: 'Alice', serif;
    padding: 20px;
    font-size: 16px;
    display: block;
    width: 220px;
    margin-top: 25px;
    margin-left: 291px;
    position: absolute;
    box-shadow: 2px 2px 6px #1f232f;
    background: rgba(181, 189, 204, 0.77);
">
    	<b>Придержанные внешности</b>
    	<p>
        - <br>
        - <br>
        - <br>
    	</p>
    </div>


	</div>

</div>