Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fira+Mono&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Trochut:400,400italic' rel='stylesheet' type='text/css'>
<style type="text/css">


.soartempc {
width: 350px;
padding: 10px;
background: rgba(255,255,255,0.2);
border: 1px solid #99295b;
}

.stctitle {
background: #1e1e1e;
font-family: fjalla one;
font-size: 10px;
text-transform: uppercase;
padding: 25px 0px;
padding-right: 50px;
text-align: right;
border-bottom: 10px solid #99295b;
width: 300px;
font-style: italic;
color: #fafafa;
}

.stccont {
margin-left: auto;
margin-right: auto;
font-family: fira mono;
font-size: 10px;
line-height: 11px;
text-align: justify;
color: #1e1e1e;
overflow-y: scroll;
max-height: 300px;
margin-top:-20px;
padding-top: -10px;
}

.stccont img {
width:60px; height: 60px;
border-radius: 60px; -moz-border-radius: 60px; -o-border-radius: 50px; -webkit-border-radius: 60px; 
max-width: 60px; float:left; margin-right: 10px; margin-left: 30px;}

.stcmg {
margin-top:-30px;
width: 320px;
padding: 15px 0px;
text-align: right;
padding-right: 50px;
font-family: fjalla one;
font-size: 10px;
text-transform: uppercase;
font-style: italic;
color: #fafafa;
margin-bottom: 5px;
margin-right: 10px;
float: left;
}

.stccont b {
font-family: fjalla one;
font-size: 10px;
color: #99295b;
}

#CODE-WRAP td#CODE  { 
background: #fffaec;
font-family: fira mono;
text-align: justify;
text-transform: none;
word-wrap: break-word;
max-width: 500px;
color: #232323;
font-style: normal;
padding: 10px;
}

#CODE-WRAP {
background: #ffefc5;
}

#CODE-WRAP td {
text-align: center;
font-family: fjalla one;
padding: 10px 0px;
color: #d69945;
font-size: 10px;
letter-spacing: 1px;
font-style: italic;
text-transform: lowercase;
}

#CODE-WRAP td b {
font-weight: 400;
}
.j8image {
  background-image: url(http://sf.uploads.ru/Mu8Rz.png) !important;}
#j8container {
  margin: 20px auto;
  width: 580px;
  position: relative;
}

#j8container ::-webkit-scrollbar { background: #efd594; width: 5px; height:8px; margin-left:-10px; }
#j8container ::-webkit-scrollbar-thumb { background: #000; width:3px; margin-left:-10px;}
#j8container ::-webkit-scrollbar-corner { background: #000; margin-left:-10px;}



#j8container h5 {
  margin-bottom: -25px;
  padding-top: -20px;
  width: 580px;
  height: 70px;
  font: normal 45px playball;
  text-shadow: 1px 1px #4c3319;
  color: #f6efcd;
  text-align: center;
  text-transform: lowercase;
  background-color: #d6a35c;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
 }
#j8container h6 {
  font: normal 8px calibri;
  text-transform: uppercase;
  color: #f7e3c5;
  text-align: center;
  letter-spacing: 3px;
  margin-top: -10px;}

.j8image {
  width: 60px;
  height: 60px;
  margin: -5px;
  background-color: #999;
  background-size: 80px 80px;
  border-radius: 50%;
  border: solid 5px #fff;
  box-shadow: 0px 0px 1px #666;
  position: absolute;
  top: 0px;
  left: 480px;
}


.j8trianglewhite {
  width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #f2d99c;
  position: absolute;
  top: 48px;
  left: 25px;
}

.j8speech {
  width: 554px;
  background-color: #d6a35c ;
  margin: 3px auto;
  -webkit-box-shadow: inset 0px -1px 64px -2px #d6a35c ;
  padding: 10px;
border-bottom: 15px #d6a35c solid;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-left: 3px #d6a35c solid;
border-right: 3px #d6a35c solid;}

.j8speech2 {
  width: 540px;
  background-color: #ffedbe;
  -webkit-box-shadow: inset 0px -1px 64px -2px #e9cb83;
  margin: -10px -8px;
  font: normal normal normal 11px Calibri;
  padding: 15px;
  text-align: justify;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;}


.banner1 {
  width: 350px;
  height: 60px;

  background-color: #ffedbe;
  -webkit-box-shadow: inset 0px -1px 10px -2px #e9cb83;
  margin: -4px -2px;
  font: normal 30px playball;
 border-top-left-radius: 15px;
border-top-right-radius: 15px;
 border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
  text-align: center;
   margin-left:auto; 
    margin-right:auto;}



.bodyfan {
width: 560px;
 margin-left:auto; 
    margin-right:auto;}
.banner2 {
text-align:center;
font-size:16px;
  text-transform: uppercase;

}
table.center {
    margin-left:auto; 
    margin-right:auto;
  }
.alphabet {
border-style:double;
border-color: #ffffff;
text-align:center;
font-size:30px;
font-family: 'Trochut', cursive;
color:#916a34;
background:#f6e0a6;
	letter-spacing:2px;
	margin:0px auto 5px auto;
	padding:5px 7px 5px 7px;
width:90%;
height: 36px;
margin-top: -15px;
}

</style>
<div id="j8container"><div class="j8border">
    <h5> timeline </h5>
  <h6>  T H E  N E W  B E G I N N I N G  </h6>
<div class="j8image"></div></div><div class="j8trianglewhite"></div><div class="j8speech"><div class="j8speech2">
Стараемся в нескольких предложениях расписать точку отсчета для вашего фэндома, по возможности указываем сезон [для сериалов]/ часть [для франшиз] или же любую другую четкую информацию о вашем фэндоме для ваших будущих партнеров. Если на форуме уже зарегистрировались некоторые представители вашего фэндома, то убедительная просьба согласовать с ними все нюансы, а затем уже заполнять кому-то одному шаблон. Если в вашей ветке произойдут заметные сюжетные изменения, то обновляйте описание и тут. <br><br>
<table border='0' align='center' width='95%' cellpadding='3' cellspacing='1' id='CODE-WRAP'><tr><td><b>если ваш фэндом уже в списке [не забываем процитировать фэндом!]</b> </td></tr><tr><td id='CODE'><!--ec1--><!--c2-->
&lt;b&gt;»&lt;/b&gt; точка отсчета со стороны заполняющего персонажа.<br></td></tr>

<tr><td><b>если же фэндома в списке нет</b> </td></tr><tr><td id='CODE'><!--ec1--><!--c2-->&lt;P&gt;&lt;img src="http://sf.uploads.ru/qhimZ.jpg"&gt;&lt;br/&gt;&lt;br /&gt;
&lt;div class="stcmg" style="background: #d6a35c;"&gt;название фандома на английском&lt;/div&gt;&lt;br clear="left"&gt;&lt;P&gt;&lt;P&gt;
&lt;b&gt;»&lt;/b&gt; точка отсчета со стороны заполняющего персонажа.</td></tr>
</table>
<br><br>
<div class = "alphabet"> A » B » C </div><br><br>
<div class="stccont"><P><img src="http://sf.uploads.ru/1RYmM.png"><br/><br /> <div class="stcmg" style="background: #d6a35c;">a song of ice and fire</div><br clear="left"><P><P> <b>»</b>
<P><img src="http://sf.uploads.ru/oj1aR.jpg"><br/><br /> <div class="stcmg" style="background: #d6a35c;">bojack horseman</div><br clear="left"><P><P> <b>»</b> игра ведётся после первого сезона.

</div> <br>

<div class = "alphabet"> D » E » F </div><br><br>
<div class="stccont"></div><br><br>


<div class = "alphabet"> G » H » I </div><br><br>
<div class="stccont"><P><img src="http://sf.uploads.ru/cbpgh.png"><br/><br />
<div class="stcmg" style="background: #d6a35c;">harry potter</div><br clear="left"><P><P>
<b>»</b><br /></div><br><br>
<div class="stccont"><P><img src="http://funkyimg.com/i/Ezpk.png"><br/><br />
<div class="stcmg" style="background: #d6a35c;">hunger games</div><br clear="left"><P><P>
<b>»</b> игра ведётся по третьей книге. <br /></div><br><br>

<div class = "alphabet"> J » K » L </div><br><br>
<div class="stccont"></div><br><br>

<div class = "alphabet"> M » N » O </div><br><br>
<div class="stccont"><P><img src="http://sf.uploads.ru/qhimZ.jpg"><br/><br /> <div class="stcmg" style="background: #d6a35c;">MARVEL</div><br clear="left"><P><P> <b>»</b> игра ведется после событий фильма Тор 2</div><br><br>

<div class = "alphabet"> P » Q » R </div><br><br>
<div class="stccont"></div><br><br>
<div class = "alphabet"> S » T » U » V </div><br><br>
<div class="stccont"><P><img src="http://sf.uploads.ru/ATsWZ.gif"><br/><br /> <div class="stcmg" style="background: #d6a35c;">tolkien's legendarium</div><br clear="left"><P><P> <b>»</b> игра ведется после событий "хоббита"</a > <br />




</div><br><br>
<div class = "alphabet"> W » X » Y » Z </div><br><br>
<div class="stccont"></div><br><br>
</div></div><br><br>