[html]<div class='postcolor'>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<style>
#set {
    width: 719px;
    margin: auto;
    border: 1px solid
#292B29;
background:
    #202020;
    border-radius: 21px;
    overflow: hidden;
}
#set h1 {
    height: 90px;
    width: 96%;
    background:
#202020;
margin: 0;
line-height: 90px;
padding-left: 20px;
font-family: playfair display;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 3px;
font-size: 25px;
color:
    #d0b000;
    border-radius: 21px;
}
#set blockquote {background: #D2DFB9; margin: 0; padding: 25px; font-family: poppins; text-transform: uppercase; text-align: justify; font-size: 8px; font-weight: 600; letter-spacing: 1px; line-height: 12px; color: #161616;width: 92.4% !important;}
#set blockquote b {
    color:
#FFF;
background:
    #202020;
}
.set-face {
    width: 348px;
    background:
    #202020;
}
.post-content td {
    border-width: 1px !important;
    border-style: none !important;
    padding: 0.4em 0.5em !important;
    overflow: hidden;
}
.set-name {
    height: auto;
    width: 345px;
    font-family: poppins;
    text-align: center !important;
    color:
    #161616;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 8px;
    display: inline-block;
}

/*EDIT ACCORDING TO MEMBERGROUP, CAN CHANGE GROUPS TO NAMES OF MEMBERGROUPS AS WELL AS COLOURS, CAN ADD AS MANY AS YOU WANT*/
m1 .set-name {
    background:
    #DCE6BA;
}
m2 .set-name {
    background:
    #D5FFC1;
}
m3 .set-name {background: #CEDDA2;}
m4 .set-name {background: #EBFFBF;}
m5 .set-name {
    background:
    #B2FFA8;
}
m6 .set-name {
    background:
    #d0b000;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
}
.set-name strong {
    width: 100%;
    display: block;
    height: 100%;
    font-size: 12px !important;
    padding-top: 2%;
}
.set-name a {
    color:
    #c4a600 !important;
}
m8 .set-name {
    background:
    #d0b000;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
}
.set-name-left {
    float: left;
    width: 50%;
    text-align: center;
}
.set-name-right {
    float: right;
    width: 50%;
}
m7 .set-name {
    background:
    #d0b000;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
}
</style>
<div id="set">
  <h1>Внешности и имена/фамилии</h1>
  <blockquote><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Phasellus quis arcu scelerisque, pulvinar odio nec, mollis ipsum. Integer ac orci at neque cursus maximus non vitae elit. Nam id orci rutrum, sagittis enim ut, suscipit mi. In vitae eleifend purus, id placerat neque. Etiam quis massa id ligula pellentesque elementum in sit amet ante. Morbi non ligula enim. Sed euismod posuere ex, id congue eros euismod scelerisque.
</blockquote>
<table cellspacing="0" cellpadding="0">
  <td valign="top"><div class="set-face">
  <m7><div class="set-name">
    <div class="set-name-left">
    Мужские
        </div>
        <div class="set-name-right">
    Женские
        </div>
        </div>
    </m7>
    <m4>
    <div class="set-name">
        <strong>
        A - B - C - D
        </strong>
    <div class="set-name-left">
   
        Brendon Urie - <a href="#">Dariusz Ringer</a>
   
        </div>
        <div class="set-name-right">
        Adria Arjona - <a href="#">Kemerin Arber</a>
       
        </div>
        </div>
    </m4>
     <m3>
      <div class="set-name">
         <strong>
        E - F - G - H
        </strong>
    <div class="set-name-left">
   
         - <a href="#"></a>
   
        </div>
        <div class="set-name-right">
         - <a href="#"></a>
       
        </div>
      </div>
</m3>
     <m2>
      <div class="set-name">
         <strong>
        I - J - K - L
        </strong>
    <div class="set-name-left">
       
         - <a href="#"></a>
   
        </div>
        <div class="set-name-right">
         - <a href="#"></a>
       
        </div>
      </div>
</m2>
     <m5>
      <div class="set-name">
         <strong>
        M - N - O - P
        </strong>
    <div class="set-name-left">
   
         - <a href="#"></a>
   
        </div>
        <div class="set-name-right">
         - <a href="#"></a>
   
        </div>
      </div>
     </m5>
     <m1>
      <div class="set-name">
         <strong>
        Q - R - S - T
        </strong>
    <div class="set-name-left">
       
         - <a href="#"></a>
       
        </div>
        <div class="set-name-right">
         - <a href="#"></a>
   
        </div>
      </div>
     </m1>
     <m4>
    <div class="set-name">
        <strong>
        U - V - W - X - Y - Z
        </strong>
    <div class="set-name-left">
       
         - <a href="#"></a>
       
        </div>
        <div class="set-name-right">
         - <a href="#"></a>
   
        </div>
        </div>
    </m4>
  </div></td>
  <td valign="top"><div class="set-face">
  <m8><div class="set-name">
      <div class="set-name-left">
        <div>
        Имена
        </div>
        </div>
        <div class="set-name-right">
        фамилии
        </div>
        </div>
    </div>
</m8>
       <m2>
        <div class="set-name">
        <strong>
        A - B - C - D
        </strong>
    <div class="set-name-left">
       
        Annie | Энни
       
        </div>
        <div class="set-name-right">
        Bates | Бэйтс
       
        </div>
        </div>
       </m2>
     <m5>
      <div class="set-name">
        <strong>
        E - F - G - H
        </strong>
    <div class="set-name-left">
       
       
       
        </div>
        <div class="set-name-right">
   
       
        </div>
        </div>
     </m5>
     <m1>
      <div class="set-name">
        <strong>
        I - J - K - L
        </strong>
    <div class="set-name-left">
       
       
       
        </div>
        <div class="set-name-right">
   
       
        </div>
        </div>
     </m1>
     <m4>
      <div class="set-name">
        <strong>
        M - N - O - P
        </strong>
    <div class="set-name-left">
       
       
       
        </div>
        <div class="set-name-right">
   
       
        </div>
        </div>
     </m4>
     <m3>
      <div class="set-name">
        <strong>
        Q - R - S - T
        </strong>
    <div class="set-name-left">
       
       
       
        </div>
        <div class="set-name-right">
   
       
        </div>
        </div>
     </m3>
     <m2>
        <div class="set-name">
        <strong>
        U - V - W - X - Y - Z
        </strong>
    <div class="set-name-left">
       
   
       
        </div>
        <div class="set-name-right">
       
       
        </div>
        </div>
       </m2>
     
    </div>
</td>
</table>
</div>
</div>

[/html]

ЗАЯВКА ЗАКЛЮЧАЕТСЯ В ТЭГ КОДА

Код:
Внешность на англ - <a href="ссылка на ваш профиль">Имя и фамилия персонажа на англ</a>

Имя персонажа на англ | Имя персонажа на русском
Фамилия персонажа на англ | Фамилия персонажа на русском