Можно использовать любое удобное оформление хронологии или воспользоваться тем, которое представлено здесь:
[html]
<style>@font-face {font-family: FRACTAL;src: url(https://forumstatic.ru/files/001b/df/86/31052.ttf);}
#mainbox {display:block; width:auto; max-width: 610px; padding:24px; background-image: url('https://i.ibb.co/DQDhbsk/sdfdsf.png');background-repeat: repeat;outline: 7px solid #1a243e;border: 2px solid #e7af19;margin: 20px auto;height: 555px; overflow: auto;}
#mainbox::-webkit-scrollbar { width: 2px; height: 2px; }#mainbox::-webkit-scrollbar-track { background: #1a243e }
#mainbox::-webkit-scrollbar-thumb { background: #e7af19; }#chronos {text-align:center; font-family: FRACTAL; color: #e7af19; font-size: 50px; letter-spacing: 15px;margin-top: 10px;margin-bottom: 70px; }
.box {display:block; position:relative; z-index:3;
width:300px; min-height:50px; background:transparent; border-right: 2px solid #e7af19;
}.box:nth-child(2n) {display:block; position:relative; margin-top: -40px; margin-bottom: -40px; margin-left:300px;
width:300px; min-height:50px;border-right: 0px none transparent; border-left: 2px solid #e7af19;}.box:last-child {
margin-bottom:0px;}.line {border-bottom: 2px solid #e7af19;}.box:nth-child(2n) .lyncat {text-align:right;}.box:nth-child(2n) .lyncat::after {float: left; margin: 23px auto auto -13px;}.tex1 {display: block;
margin: auto auto -5px 5px !important; z-index: 2; width: auto; background: transparent; color: #e7af19; text-align: left; font-style: normal !important; font-size: 30px; font-family: FRACTAL;}.box:nth-child(2n)
.tex1 {text-align: right;margin: auto 5px -5px auto !important;}.tex2 {padding:10px; line-height:110%; text-align:justify; font-family:Arial; font-weight: 400;font-size: 11px;color: #b6b6b6; }
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin#punbb-admain a:visited {text-decoration: none;color: #ad850f;}.name {margin-top: -15px; padding:5px; line-height:1.1; text-align:justify; font-family: FRACTAL;font-size: 18px;}</style><div id="mainbox"><!----- НАЧАЛО БЛОКОВ -----><div id="chronos">ХРОНОЛОГИЯ</div><!----- ГОД ----->
<div class="box"><em class="tex1">1400</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">1414</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div><!----- ГОД ----->
<div class="box"><em class="tex1">1420</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">1423</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">альтернатива</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- КОНЕЦ БЛОКОВ -----></div>[/html]
[html]
<style>@font-face {font-family: FRACTAL;src: url(https://forumstatic.ru/files/001b/df/86/31052.ttf);}
#mainbox {display:block; width:auto; max-width: 610px; padding:24px; background: #e5e5e5;background-repeat: repeat;outline: 7px solid #1a243e;border: 2px solid #e7af19;margin: 20px auto;height: 555px; overflow: auto;}
#mainbox::-webkit-scrollbar { width: 2px; height: 2px; }#mainbox::-webkit-scrollbar-track { background: #1a243e }
#mainbox::-webkit-scrollbar-thumb { background: #e7af19; }#chronos {text-align:center; font-family: FRACTAL; color: #e7af19; font-size: 50px; letter-spacing: 15px;margin-top: 10px;margin-bottom: 70px; }
.box {display:block; position:relative; z-index:3;
width:300px; min-height:50px; background:transparent; border-right: 2px solid #e7af19;
}.box:nth-child(2n) {display:block; position:relative; margin-top: -40px; margin-bottom: -40px; margin-left:300px;
width:300px; min-height:50px;border-right: 0px none transparent; border-left: 2px solid #e7af19;}.box:last-child {
margin-bottom:0px;}.line {border-bottom: 2px solid #e7af19;}.box:nth-child(2n) .lyncat {text-align:right;}.box:nth-child(2n) .lyncat::after {float: left; margin: 23px auto auto -13px;}.tex1 {display: block;
margin: auto auto -5px 5px !important; z-index: 2; width: auto; background: transparent; color: #e7af19; text-align: left; font-style: normal !important; font-size: 30px; font-family: FRACTAL;}.box:nth-child(2n)
.tex1 {text-align: right;margin: auto 5px -5px auto !important;}.tex2 {padding:10px; line-height:110%; text-align:justify; font-family:Arial; font-weight: 400;font-size: 11px;color: #1a243e; }
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin#punbb-admain a:visited {text-decoration: none;color: #ad850f;}.name {margin-top: -15px; padding:10px; line-height:1.1; text-align:justify; font-family: FRACTAL;font-size: 18px;}</style><div id="mainbox"><!----- НАЧАЛО БЛОКОВ -----><div id="chronos">ХРОНОЛОГИЯ</div><!----- ГОД ----->
<div class="box"><em class="tex1">1400</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">1414</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div><!----- ГОД ----->
<div class="box"><em class="tex1">1420</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">1423</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- ГОД ----->
<div class="box"><em class="tex1">альтернатива</em><div class="line"></div>
<div class="tex2">
<p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div>
сезон/точная дата | локация
<br>— участники</p>
</div></div>
<!----- КОНЕЦ БЛОКОВ -----></div>[/html]
хронология сделана на основе кода Шиповника
Тёмная
Светлая
[html] <style>@font-face {font-family: FRACTAL;src: url(https://forumstatic.ru/files/001b/df/86/31052.ttf);} #mainbox {display:block; width:auto; max-width: 610px; padding:24px; background-image: url('https://i.ibb.co/DQDhbsk/sdfdsf.png');background-repeat: repeat;outline: 7px solid #1a243e;border: 2px solid #e7af19;margin: 20px auto;height: 555px; overflow: auto;} #mainbox::-webkit-scrollbar { width: 2px; height: 2px; }#mainbox::-webkit-scrollbar-track { background: #1a243e } #mainbox::-webkit-scrollbar-thumb { background: #e7af19; }#chronos {text-align:center; font-family: FRACTAL; color: #e7af19; font-size: 50px; letter-spacing: 15px;margin-top: 10px;margin-bottom: 70px; } .box {display:block; position:relative; z-index:3; width:300px; min-height:50px; background:transparent; border-right: 2px solid #e7af19; }.box:nth-child(2n) {display:block; position:relative; margin-top: -40px; margin-bottom: -40px; margin-left:300px; width:300px; min-height:50px;border-right: 0px none transparent; border-left: 2px solid #e7af19;}.box:last-child { margin-bottom:0px;}.line {border-bottom: 2px solid #e7af19;}.box:nth-child(2n) .lyncat {text-align:right;}.box:nth-child(2n) .lyncat::after {float: left; margin: 23px auto auto -13px;}.tex1 {display: block; margin: auto auto -5px 5px !important; z-index: 2; width: auto; background: transparent; color: #e7af19; text-align: left; font-style: normal !important; font-size: 30px; font-family: FRACTAL;}.box:nth-child(2n) .tex1 {text-align: right;margin: auto 5px -5px auto !important;}.tex2 {padding:10px; line-height:110%; text-align:justify; font-family:Arial; font-weight: 400;font-size: 11px;color: #b6b6b6; } .punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin#punbb-admain a:visited {text-decoration: none;color: #ad850f;}.name {margin-top: -15px; padding:10px; line-height:1.1; text-align:justify; font-family: FRACTAL;font-size: 18px;}</style> <div id="mainbox"><!----- НАЧАЛО БЛОКОВ -----><div id="chronos">ХРОНОЛОГИЯ</div><!----- ГОД -----> <div class="box"><em class="tex1">1400</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1414</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1420</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1423</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">альтернатива</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- КОНЕЦ БЛОКОВ -----></div>[/html][html] <style>@font-face {font-family: FRACTAL;src: url(https://forumstatic.ru/files/001b/df/86/31052.ttf);} #mainbox {display:block; width:auto; max-width: 610px; padding:24px; background: #e5e5e5;background-repeat: repeat;outline: 7px solid #1a243e;border: 2px solid #e7af19;margin: 20px auto;height: 555px; overflow: auto;} #mainbox::-webkit-scrollbar { width: 2px; height: 2px; }#mainbox::-webkit-scrollbar-track { background: #1a243e } #mainbox::-webkit-scrollbar-thumb { background: #e7af19; }#chronos {text-align:center; font-family: FRACTAL; color: #e7af19; font-size: 50px; letter-spacing: 15px;margin-top: 10px;margin-bottom: 70px; } .box {display:block; position:relative; z-index:3; width:300px; min-height:50px; background:transparent; border-right: 2px solid #e7af19; }.box:nth-child(2n) {display:block; position:relative; margin-top: -40px; margin-bottom: -40px; margin-left:300px; width:300px; min-height:50px;border-right: 0px none transparent; border-left: 2px solid #e7af19;}.box:last-child { margin-bottom:0px;}.line {border-bottom: 2px solid #e7af19;}.box:nth-child(2n) .lyncat {text-align:right;}.box:nth-child(2n) .lyncat::after {float: left; margin: 23px auto auto -13px;}.tex1 {display: block; margin: auto auto -5px 5px !important; z-index: 2; width: auto; background: transparent; color: #e7af19; text-align: left; font-style: normal !important; font-size: 30px; font-family: FRACTAL;}.box:nth-child(2n) .tex1 {text-align: right;margin: auto 5px -5px auto !important;}.tex2 {padding:10px; line-height:110%; text-align:justify; font-family:Arial; font-weight: 400;font-size: 11px;color: #1a243e; } .punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin#punbb-admain a:visited {text-decoration: none;color: #ad850f;}.name {margin-top: -15px; padding:10px; line-height:1.1; text-align:justify; font-family: FRACTAL;font-size: 18px;}</style> <div id="mainbox"><!----- НАЧАЛО БЛОКОВ -----><div id="chronos">ХРОНОЛОГИЯ</div><!----- ГОД -----> <div class="box"><em class="tex1">1400</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1414</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1420</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">1423</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- ГОД -----> <div class="box"><em class="tex1">альтернатива</em><div class="line"></div> <div class="tex2"> <p><div class="name"><a href="ссылка на эпизод"> название эпизода </a></div> сезон/точная дата | локация <br>— участники</p> </div></div> <!----- КОНЕЦ БЛОКОВ -----></div>[/html]
[hideprofile]
