Этот код не является обязательным! Вы можете оформлять хронологию, как Вам вздумается
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>
.chr0 {
--marg: auto; /* отступ от левого края */
--bgclr: transparent; /* цвет подложки */
--shp1: #171b1c; /* фон шапки */
--shc: #c9c5b8; /* текст шапки */
--shs: rgba(255,255,255,0.05); /* тень текста в шапке */
--epc: #7e8474; /* цвет ссылок простых */
--epa: #171b1c; /* активный эпизод */
--epz: #858181; /* завершенный эпизод */
}
.chr0 * {box-sizing: border-box;}
.chr0 {max-width: 700px; min-width: 470px; margin: 20px auto 20px var(--marg);
overflow:hidden; position:relative; display:block; padding-bottom:6px; background: var(--bgclr); border-radius:12px; font-family: Tahoma, Arial, sans-serif; font-size:11px;}
.shpk1 {position:relative; display:grid; grid-template-columns: 200px 1fr; grid-template-rows: auto; align-items: center; margin: 10px 0px 20px; padding: 14px 35px 14px 10px; background: var(--shp1); color: var(--shc); text-shadow: 0 1px 6px var(--shs);}
.shpk1 img {object-fit:cover; object-position: 50% 50%; margin:auto; width:150px; height:60px; grid-row: 1 / 2; grid-column: 1 / 2;}
.shpk1 > ul {grid-row: 1 / 2; grid-column: 2 / 3;}
.shpk1 > ul li:nth-child(2) {padding-top:4px; font-style:italic; font-size:10px; font-family: Georgia, serif; letter-spacing:0.06em; opacity:0.5;}
.chr0 .shpk1:first-child {margin-top:0px;}
.chr0 p, p.epp {display:block; padding: 0 30px 26px !important;}
p.epp > em {display:block; padding: 4px 0; font-style:normal !important; font-size:11px; font-family: Georgia, Tahoma, serif; opacity:0.8;}
.chr0 a {color:var(--epc); text-decoration: none;}
.chr0 a:hover {filter:brightness(1.25);}
.chr0 .epp a.act {color: var(--epa);}
.chr0 .epp a.close {color: var(--epz);}
.epp a.close:before {content: '×'; margin-right:8px;}
.shpk1 > ul li:first-child, .epp > a {font-family: Oswald, Georgia, serif;}
.shpk1 > ul li:first-child {font-size:24px;}
.epp > a {font-size: 16px;}
.ep-desc {
max-height: 100px;
overflow: auto;
}
</style>
<div class="chr0">
<!--- START --->
<!--- НАСТОЯЩЕЕ --->
<div class="shpk1">
<img src="https://i.pinimg.com/564x/b7/19/90/b71990b60cb37a80d099c970b826a953.jpg" decoding="async">
<ul>
<li>Настоящее</li>
<li>ваша очень красивая фраза о смысле бытия</li>
</ul>
</div>
<!--- ЭПИЗОДЫ --->
<p class="epp">
<a href="ссылка" class="act">Название эпизода</a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<p class="epp">
<a href="ссылка" class="close"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<!------------------------------------------>
<!--- ПРОШЛОЕ --->
<div class="shpk1">
<img src="https://i.pinimg.com/564x/5d/94/aa/5d94aaaccc2c141e50e762308aed6e89.jpg" decoding="async">
<ul>
<li>Прошлое</li>
<li>ваша очень красивая фраза о смысле бытия</li>
</ul>
</div>
<!--- ЭПИЗОДЫ --->
<p class="epp">
<a href="ссылка" class="act"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<p class="epp">
<a href="ссылка" class="close"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<!------------------------------------------>
<!--- END --->
</div>
[/html]
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>
.chr0 {
--marg: auto; /* отступ от левого края */
--bgclr: transparent; /* цвет подложки */
--shp1: #171b1c; /* фон шапки */
--shc: #c9c5b8; /* текст шапки */
--shs: rgba(255,255,255,0.05); /* тень текста в шапке */
--epc: #7e8474; /* цвет ссылок простых */
--epa: #171b1c; /* активный эпизод */
--epz: #858181; /* завершенный эпизод */
}
.chr0 * {box-sizing: border-box;}
.chr0 {max-width: 700px; min-width: 470px; margin: 20px auto 20px var(--marg);
overflow:hidden; position:relative; display:block; padding-bottom:6px; background: var(--bgclr); border-radius:12px; font-family: Tahoma, Arial, sans-serif; font-size:11px;}
.shpk1 {position:relative; display:grid; grid-template-columns: 200px 1fr; grid-template-rows: auto; align-items: center; margin: 10px 0px 20px; padding: 14px 35px 14px 10px; background: var(--shp1); color: var(--shc); text-shadow: 0 1px 6px var(--shs);}
.shpk1 img {object-fit:cover; object-position: 50% 50%; margin:auto; width:150px; height:60px; grid-row: 1 / 2; grid-column: 1 / 2;}
.shpk1 > ul {grid-row: 1 / 2; grid-column: 2 / 3;}
.shpk1 > ul li:nth-child(2) {padding-top:4px; font-style:italic; font-size:10px; font-family: Georgia, serif; letter-spacing:0.06em; opacity:0.5;}
.chr0 .shpk1:first-child {margin-top:0px;}
.chr0 p, p.epp {display:block; padding: 0 30px 26px !important;}
p.epp > em {display:block; padding: 4px 0; font-style:normal !important; font-size:11px; font-family: Georgia, Tahoma, serif; opacity:0.8;}
.chr0 a {color:var(--epc); text-decoration: none;}
.chr0 a:hover {filter:brightness(1.25);}
.chr0 .epp a.act {color: var(--epa);}
.chr0 .epp a.close {color: var(--epz);}
.epp a.close:before {content: '×'; margin-right:8px;}
.shpk1 > ul li:first-child, .epp > a {font-family: Oswald, Georgia, serif;}
.shpk1 > ul li:first-child {font-size:24px;}
.epp > a {font-size: 16px;}
.ep-desc {
max-height: 100px;
overflow: auto;
}
</style>
<div class="chr0">
<!--- START --->
<!--- НАСТОЯЩЕЕ --->
<div class="shpk1">
<img src="https://i.pinimg.com/564x/b7/19/90/b71990b60cb37a80d099c970b826a953.jpg" decoding="async">
<ul>
<li>Настоящее</li>
<li>ваша очень красивая фраза о смысле бытия</li>
</ul>
</div>
<!--- ЭПИЗОДЫ --->
<p class="epp">
<a href="ссылка" class="act">Название эпизода</a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<p class="epp">
<a href="ссылка" class="close"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<!------------------------------------------>
<!--- ПРОШЛОЕ --->
<div class="shpk1">
<img src="https://i.pinimg.com/564x/5d/94/aa/5d94aaaccc2c141e50e762308aed6e89.jpg" decoding="async">
<ul>
<li>Прошлое</li>
<li>ваша очень красивая фраза о смысле бытия</li>
</ul>
</div>
<!--- ЭПИЗОДЫ --->
<p class="epp">
<a href="ссылка" class="act"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<p class="epp">
<a href="ссылка" class="close"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>
<!------------------------------------------>
<!--- END --->
</div>Ваша зона начинается на блоке <!--- START --->
В блоках <!--- НАСТОЯЩЕЕ ---> и <!--- ПРОШЛОЕ ---> вы можете заменить красивую фразу и картинку. Картинка сама будет уменьшаться под нужные параметры, вам нужно вставить только ссылку.
Блоки под открытые и закрытые эпизоды различны!
Код под открытый и играемый эпизод:
<p class="epp">
<a href="ссылка" class="act"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>Код под закрытый или отыгранный эпизод:
<p class="epp">
<a href="ссылка" class="close"> Название эпизода </a>
<em> Дата//Участник 1, Участник 2 </em>
<div class="ep-desc">
описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...описание эпизода, возможно, даже длинное описание эпизода, ...
</div>
</p>Если Вам нужно сделать абзац в описании эпизода, воспользуйтесь следующем кодом:
<p>Это абзац текста. Здесь может быть любой контент, который вы хотите отобразить как один параграф. Следующий абзац нужно будет заключить в подобный же код</p>
Если у Вас появляются вопросы или требуется помощь, обращайтесь к администратору.
