[html]<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet"><style>/* shipovnik */
#ship13, #ship13h {
  --bgw: 700px; /* максимальная ширина главного блока */
  --bg1: transparent; /* главный фон */
  --clr1: #773124;   /* ХРОНОЛОГИЯ цвет названия */
  --clr2: #969696;   /* цвет строки под хронологией */
  --clr3: #000; /* цвет рамки */
  --clr4: rgba(119, 49, 36, .4);   /* полупрозрачная цифра */
  --clr5: #642418;   /* цвет ссылок */
  margin: auto; /* отступы от краев */
}

#ship13 {display:block; width:700px; box-sizing:border-box; padding:24px; max-width: var(--bgw); background: var(--bg1);}
#ship13 *, #ship13h * {box-sizing:border-box;}
/*** ХРОНОЛОГИЯ название ***/
#ship13h {display:block; box-sizing:border-box; width:auto; max-width: var(--bgw); padding: 14px 0; background:var(--bg1); color: var(--clr1); text-align:center; font-weight:600; font-size:24px; font-family: 'Playfair Display', Georgia, serif;}
/* цифра */
.boxf {display:block; position:relative; z-index:3; width: 50%; min-height:50px; background:transparent; border-right: 1px solid var(--clr3);}
.boxf:nth-child(2n) {display: block; position: relative; margin-top: -40px; margin-bottom: -40px; margin-left: calc(50% - 1px); width: 50%; min-height: 50px; border-right: 0px none transparent; border-left: 1px solid var(--clr3);}
/* категория */
.boxcat {display:block; padding:0 10px 4px 10px; text-align:left; border-bottom: 1px solid var(--clr3);
text-transform:uppercase; font-weight:600; font-size:16px; font-family: 'Playfair Display', Georgia, serif;}
.boxf:nth-child(2n) .boxcat {text-align:right;}
.boxcat::after {display: block; content: ""; height: 6px; width: 6px; float: right; margin: 23px -13px auto auto; background: var(--clr3); border-radius: 50%;}
.boxf:nth-child(2n) .boxcat::after {float: left; margin: 22px auto auto -13px;}
.boxf:last-of-type {margin-bottom:0.3em;}
/* цифры */
.numbrow {display: block; margin: auto auto -46px 30px !important; z-index: 2; width: auto; background: transparent; text-align: left; font-style: normal !important; font-size: 76px; height: 76px; line-height: 76px; letter-spacing: -3px; font-family: 'Yeseva One', Arial, sans-serif; color: var(--clr4);}
.boxf:nth-child(2n) .numbrow {text-align: right; margin: auto 25px -52px auto !important;}
/* текстовый блок */
.textf {display:block; padding:20px; line-height:130%; text-align:justify; font-weight: 400; font-size: 11px;}
.textf > p {margin:0px !important; padding: 0 0 16px 0 !important; line-height: 110% !important;}
.textf > p:last-child {padding-bottom:0px !important;}
#ship13 a {color: var(--clr5); text-decoration: none;}
#ship13 a:hover {text-decoration: underline;}</style>

<div id="ship13h">Хронология</div>
<div id="ship13"><!НАЧАЛО БЛОКОВ>

<!2007 год. сюжетные>
<div class="boxf"><em class="numbrow">07</em><div class="boxcat">2007 год. сюжетные</div>
<div class="textf">
<p><a href="ССЫЛКА">Название эпизода</a> - продолжается/отыгран</p>
</div></div>

<!2007 год. личные>
<div class="boxf"><em class="numbrow">07</em><div class="boxcat">2007 год. личные</div>
<div class="textf">
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=153"> Как подружиться с вором</a> - продолжается</p>
</div></div>

<!2008 год. сюжетные>
<div class="boxf"><em class="numbrow">08</em><div class="boxcat">2008 год. сюжетные</div>
<div class="textf">
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=149">[19.12] Dont tread on me</a> - отыгран</p>
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=167">[23.11] Seekers and Finders</a> - отыгран</p>
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=164">[20.12] Fire Show</a> - продолжается</p>
</div></div>

<! 2008 год. личные>
<div class="boxf"><em class="numbrow">08</em><div class="boxcat">2008 год. личные</div>
<div class="textf">
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=155">[17.01] Maybe i like the pain?</a> - продолжается</p>
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=166">[12.10] No way</a> - продолжается</p>
<p><a href="https://fallofgotham.rolka.me/viewtopic.php?id=171">[08.11] Welcome To Gotham City!</a> - отыгран</p>
</div></div>

<! 2009 год. сюжетные>
<div class="boxf"><em class="numbrow">09</em><div class="boxcat">2009 год. сюжетные</div>
<div class="textf">
<p><a href="ССЫЛКА">[ЧЧ.ММ] Название</a> - продолжается/отыгран</p>
</div></div>

<! 2009 год. личные>
<div class="boxf"><em class="numbrow">09</em><div class="boxcat">2009 год. личные</div>
<div class="textf">
<p><a href="ССЫЛКА">[ЧЧ.ММ] Название</a> - продолжается/отыгран</p>
</div></div>

<!КОНЕЦ БЛОКОВ></div>[/html]

[html]
<style>
/************************************************** PRESENTATION POST APOCALYPTIQUE **************************************************/

/* AJOUT DE LA POLICE STREAMSTER */
@font-face {
      font-family: 'Streamster';
      src: url('http://ls-halloween.fr/Streamster.ttf');
      font-weight: normal;
      font-style: normal;
}

/* GENERALITES */
#pres_apo {
    color: #262525;
    font-family: 'Lato', sans-serif;
    background: #ececec;
    width: 500px;
    margin: auto;
    font-size: 12px;
    line-height: 2;
}

#pres_apo p {
    font-family: 'Lato', sans-serif;
}

/* COMPETENCES */
#pres_apo .competences {
    background: url(https://i.imgur.com/yOKZyRw.png);
    width: 100%;
    height: 673px;
    box-sizing: border-box;
    color: #ececec;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    margin: 0;
}

#pres_apo .competences h3 {
    text-align: left;
    margin: 0 0 0 10%;
    padding: 10% 0 13% 0;
}

#pres_apo .ligne_abilities {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 90%;
    text-align: center;
    height: 60px;
}

#pres_apo .bloc_abilities {
    width: 80%;
    background: url(https://i.imgur.com/yZdlTRa.png) no-repeat;
}

#pres_apo .ligne_defaut {
    position: relative;
    width: 85%;
    height: 3px;
    background: #ececec;
    box-sizing: border-box;
    border: 1px solid #262625;
    margin: 5.1% 0 0 5%;
}

#pres_apo .intitule_abilities {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2% 0 0;
}

#pres_apo .intitule_abilities img {
    width: 17px;
    height: 17px;
    margin: 0 2% 0 0;
}

#pres_apo .lvl_compet {
    height: 3px;
    background: #ac0d0d;
    position: absolute;
    top: -1px;
    left: -1px;
}

#pres_apo .intitule_abilities h4 span {
    color: #ac0d0d;
}

#pres_apo .intitule_abilities h4 {
    margin: 0;
    text-transform: uppercase;
}

#pres_apo .stat {
    border: 1px solid;
    border-radius: 100px;
    padding: 1.5%;
}

</style>

<link href="https://fonts.googleapis.com/css?family=Lato|Oswald:200,300,400,600|Volkhov|Yanone+Kaffeesatz" rel="stylesheet"><link href="https://dl.dropbox.com/s/45xx3nwrz5x42d7/Streamster.ttf?dl=0" rel="stylesheet"><!-- DEBUT FICHE

--><div id="pres_apo">

<!-- DEBUT COMPETENCES --><div class="competences"><h3>My <span>abilities</span></h3><!-- Debut competence 1
--><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 20%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/HFgAqAq.png" alt="Shoot" class="symbole_abilities" /><h4>Sho<span>ot</span></h4></div></div><div class="stat">20%</div></div><!-- Fin competence 1

Debut competence 2 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 40%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/9cue8Aa.png" alt="Hunt" class="symbole_abilities" /><h4>Hu<span>nt</span></h4></div></div><div class="stat">40%</div></div><!-- Fin competence 2

Debut competence 3 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 60%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/OzJ2RE8.png" alt="Orientation" class="symbole_abilities" /><h4>Orient<span>ation</span></h4></div></div><div class="stat">60%</div></div><!-- Fin competence 3

Debut competence 4 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 35%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/YknuRKz.png" alt="Endurance" class="symbole_abilities" /><h4>Endur<span>ance</span></h4></div></div><div class="stat">35%</div></div><!-- Fin competence 4

Debut competence 5 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 13%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/n9Davpg.png" alt="Build" class="symbole_abilities" /><h4>Bui<span>ld</span></h4></div></div><div class="stat">13%</div></div><!-- Fin competence 5

Debut competence 6 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 90%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/EZAQa8S.png" alt="Ingenuity" class="symbole_abilities" /><h4>Ingen<span>uity</span></h4></div></div><div class="stat">90%</div></div></div><!-- FIN COMPETENCES  -->

</div>

[/html]