Шаблоны хронологии (необязательные)

Страница: 1

Тема закрыта

Сообщений 1 страница 2 из 2

Поделиться12025-04-27 14:03:17

Автор: Raven
Администратор
I just died
in your arms
Они терзают нас в ночи, с каждым криком оставляя шрамы в наших головах.
Сообщений: 488
Уважение: +571

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
<style>.chr2, .chr2 * {box-sizing:border-box;}
.chr2 {
--chrw: 600px; /* ширина блока */
--chrbg: #f4f4f4; /* цвет фона */
--chrd: #ffffff; /* активный эпизод */
--chrc: #6a8972; /* закрытый эпизод */
--chbs: rgba(0,0,0,0.3); /* цвет границы */
}
.chr2 {width:var(--chrw); background:var(--chrbg); border-radius:16px; border:1px solid var(--chbs);
margin:10px auto 10px 10px; padding:26px 20px 24px 10px; position:relative;}
.chr2 p {padding:0px !important; margin:0px !important;}
.chr2 h7 {display:block; text-align:center; font-family:Cuprum, Tahoma, sans-serif; font-size:24px;}
.ch1 {position:relative; padding: 15px 0px; display:grid; grid-template-columns: 180px 1fr; grid-template-rows:auto; align-items:stretch;}
.ch1:first-of-type {/*shipovnik*/ padding-top:0px;}
.ch1:last-of-type {padding-bottom:0px;}
.ch2 {display:block; grid-column:1 / 2; grid-row:1 / -1; text-align:center; padding-right:10px; border-right:1px solid var(--chbs);}
.ch3 {display:block; grid-column:-2 / -1; grid-row:1 / -1; padding-left:14px; text-align:justify;}
.ch2 em {display:block; font-style:normal !important; font-weight:600; font-family:Cuprum, Tahoma, sans-serif; font-size:16px; padding-bottom:4px;}
.ch4 {text-transform:uppercase; font-family:Oswald, Tahoma, sans-serif; font-size:14px; letter-spacing:0.03em;}
.ch1:before {content:''; display:block; width:12px; height:12px; border-radius:50%; position:absolute; top:15px; left:-10px; transform:translateX(-50%);
background: var(--chrd); border:1px solid var(--chbs);}
.close.ch1:before {background:var(--chrc);}
</style>
<div class="chr2">

<div class="ch1">
<div class="ch2"><em> дата эпизода </em>
Участники
</div>
<div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
<p> Описание эпизода </p>
</div>
</div>

<div class="ch1 close">
<div class="ch2"><em> дата эпизода </em>
Участники
</div>
<div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
<p> Описание эпизода </p>
</div>
</div>

</div>[/html]

Код:

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
<style>.chr2, .chr2 * {box-sizing:border-box;}
.chr2 {
--chrw: 600px; /* ширина блока */
--chrbg: #f4f4f4; /* цвет фона */
--chrd: #ffffff; /* активный эпизод */
--chrc: #6a8972; /* закрытый эпизод */
--chbs: rgba(0,0,0,0.3); /* цвет границы */
}
.chr2 {width:var(--chrw); background:var(--chrbg); border-radius:16px; border:1px solid var(--chbs);
margin:10px auto 10px 10px; padding:26px 20px 24px 10px; position:relative;}
.chr2 p {padding:0px !important; margin:0px !important;}
.chr2 h7 {display:block; text-align:center; font-family:Cuprum, Tahoma, sans-serif; font-size:24px;}
.ch1 {position:relative; padding: 15px 0px; display:grid; grid-template-columns: 180px 1fr; grid-template-rows:auto; align-items:stretch;}
.ch1:first-of-type {/*shipovnik*/ padding-top:0px;}
.ch1:last-of-type {padding-bottom:0px;}
.ch2 {display:block; grid-column:1 / 2; grid-row:1 / -1; text-align:center; padding-right:10px; border-right:1px solid var(--chbs);}
.ch3 {display:block; grid-column:-2 / -1; grid-row:1 / -1; padding-left:14px; text-align:justify;}
.ch2 em {display:block; font-style:normal !important; font-weight:600; font-family:Cuprum, Tahoma, sans-serif; font-size:16px; padding-bottom:4px;}
.ch4 {text-transform:uppercase; font-family:Oswald, Tahoma, sans-serif; font-size:14px; letter-spacing:0.03em;}
.ch1:before {content:''; display:block; width:12px; height:12px; border-radius:50%; position:absolute; top:15px; left:-10px; transform:translateX(-50%);
background: var(--chrd); border:1px solid var(--chbs);}
.close.ch1:before {background:var(--chrc);}
</style>
<div class="chr2"><!----- START ----->

<div class="ch1">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

<div class="ch1">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

<div class="ch1 close">
  <div class="ch2"><em> дата эпизода </em>
  Участники
  </div>
  <div class="ch3"><a href="ссылка" class="ch4">Название эпизода</a>
  <p> Описание эпизода </p>
  </div>
</div>

<!----- END -----></div>[/html]

Поделиться22025-04-27 14:03:37

Автор: Raven
Администратор
I just died
in your arms
Они терзают нас в ночи, с каждым криком оставляя шрамы в наших головах.
Сообщений: 488
Уважение: +571

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
.ship7 {
--shtxt: #11001a; /* текст в заголовках*/
--shbg: #fdfbf9; /* фон в заголовках */
--shbrd: #11001a; /* границы заголовка и картинки */
--shots: 14px; /* отступы эпизодов друг от друга */
--shotg: 16px; /* отступ текста от картинки */
--shotz: auto auto 16px -40px; /* отступ заголовка */
--shgrad: linear-gradient(90deg, transparent 10%, #11001a 50%, transparent 90%);
}
.ship7 {max-width:700px; /* ограничиваем ширину блока*/
position:relative; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns: 120px auto; align-items: start; margin: 8px auto auto 2em;}
.ship7 * {box-sizing:border-box;}
.ship7 *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.ship7 *::-webkit-scrollbar-thumb {background: var(--shbg);}
.ship7 *::-webkit-scrollbar-corner {background: transparent;}
.ship7 .sh1 {display:block; min-height: 100px; height:100%; padding:0px !important; background: var(--shbg) 50% 0% repeat; border: 1px solid var(--shbrd);} /* shipovnik */
.ship7 .sh2 {display:block; height: 100%; width: auto; padding: 20px 6px 14px var(--shotg);}
.ship7 .sh3 {display:block; margin-top:34px;}
.ship7 .sh3:nth-child(1) {margin-top:0px;}
.ship7 h7 {font-family: 'Cuprum', Georgia, serif; font-size: 18px; display:block; background:var(--shbg); color:var(--shtxt); padding: 8px 14px 7px; width: 85%; margin: var(--shotz); border: 1px solid var(--shbrd);}
.ship7 p.sh5 {display:block; overflow:auto; scroll-behavior: smooth; padding-right:8px; max-height: 60px;}
.ship7 .sh4 {position:relative; padding: 0 !important; margin-bottom:var(--shots); text-align: justify; font-size: 11px; line-height: 120%;}
.ship7 .sh4:last-child {margin-bottom:0px;}
.ship7 .sh4::after {display:block; content:""; width:auto; height:1px; background:var(--shgrad); margin-top:var(--shots); }
.ship7 .sh4:last-child::after {display:none;}
.ship7 a.epss {font-family: 'Oswald', Tahoma, sans-serif; font-size: 15px; display:block; width:max-content;}
.ship7 .pers {font-size: 10px; font-family: Tahoma, sans-serif; color: rgba(0, 0, 0, 0.6); font-style:normal !important; display:block; width:max-content; margin: 3px auto 5px 0px;}
</style><div class="ship7">

<div class="sh3"><h7> Настоящее </h7>

<div class="sh4"><a href="#" class="epss"> Название эпизода </a>
<em class="pers"> Список игроков </em>
<p class="sh5">
текст-описание
</p></div>

<div class="sh4"><a href="#" class="epss"> Название эпизода </a>
<em class="pers"> Список игроков </em>
<p class="sh5">
текст-описание
</p></div>

<div class="sh4"><a href="#" class="epss"> Название эпизода </a>
<em class="pers"> Список игроков </em>
<p class="sh5">
текст-описание
</p></div>

</div>

<div class="sh3"><h7> Прошлое </h7>

</div>

</div></div>[/html]

Код:

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
.ship7 {
  --shtxt: #11001a;   /* текст в заголовках*/
  --shbg: #fdfbf9; /* фон в заголовках */
  --shbrd: #11001a; /* границы заголовка и картинки */
  --shots: 14px;   /* отступы эпизодов друг от друга */
  --shotg: 16px;   /* отступ текста от картинки */
  --shotz: auto auto 16px -40px;   /* отступ заголовка */
  --shgrad: linear-gradient(90deg, transparent 10%, #11001a 50%, transparent 90%);
}
.ship7 {max-width:700px;  /* ограничиваем ширину блока*/
position:relative; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns: 120px auto; align-items: start; margin: 8px auto auto 2em;}
.ship7 * {box-sizing:border-box;}
.ship7 *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.ship7 *::-webkit-scrollbar-thumb {background: var(--shbg);}
.ship7 *::-webkit-scrollbar-corner {background: transparent;}
.ship7 .sh1 {display:block; min-height: 100px; height:100%; padding:0px !important; background: var(--shbg) 50% 0% repeat; border: 1px solid var(--shbrd);} /* shipovnik */
.ship7 .sh2 {display:block; height: 100%; width: auto; padding: 20px 6px 14px var(--shotg);}
.ship7 .sh3 {display:block; margin-top:34px;}
.ship7 .sh3:nth-child(1) {margin-top:0px;}
.ship7 h7 {font-family: 'Cuprum', Georgia, serif; font-size: 18px; display:block; background:var(--shbg); color:var(--shtxt); padding: 8px 14px 7px; width: 85%; margin: var(--shotz); border: 1px solid var(--shbrd);}
.ship7 p.sh5 {display:block; overflow:auto; scroll-behavior: smooth; padding-right:8px; max-height: 60px;}
.ship7 .sh4 {position:relative; padding: 0 !important; margin-bottom:var(--shots); text-align: justify; font-size: 11px; line-height: 120%;}
.ship7 .sh4:last-child {margin-bottom:0px;}
.ship7 .sh4::after {display:block; content:""; width:auto; height:1px; background:var(--shgrad); margin-top:var(--shots); }
.ship7 .sh4:last-child::after {display:none;}
.ship7 a.epss {font-family: 'Oswald', Tahoma, sans-serif; font-size: 15px; display:block; width:max-content;}
.ship7 .pers {font-size: 10px; font-family: Tahoma, sans-serif; color: rgba(0, 0, 0, 0.6); font-style:normal !important; display:block; width:max-content; margin: 3px auto 5px 0px;}
</style><div class="ship7"><!-- START -->

<div class="sh1" style="background-image:url(https://i.imgur.com/Os4u6uk.jpeg);"></div><div class="sh2">


<!-------- ПЕРВЫЙ ГОД -------->
  <div class="sh3"><h7> Настоящее </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_2 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

</div><!-- КОНЕЦ ГОДА -->



<!-------- ВТОРОЙ ГОД -------->
    <div class="sh3"><h7> Прошлое </h7>

    <!-- Эпизод_1 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_2 -->
    <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
    <em class="pers">  Список игроков  </em>
    <p class="sh5">
текст-описание
  </p></div>

    <!-- Эпизод_3 -->
  <div class="sh4"><a href="#" class="epss">  Название эпизода  </a> 
  <em class="pers">  Список игроков  </em>
  <p class="sh5">
текст-описание
  </p></div>

</div><!-- КОНЕЦ ГОДА -->


<!-- END --></div></div>[/html]

Тема закрыта

Страница: 1