разные кодеки

Страница: 1

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

Поделиться12023-08-07 19:12:11

Автор: Garrett Hawk
Администратор
Сообщений: 44
Уважение: +6
казна: 3000 $
посты: 16
лз:
гаррет хоук, 36
Не открывай мне свое сердце, маг. Не то рано или поздно, я его у тебя вырву.
Последний визит:
2024-06-25 13:17:29
плашка:
драконы не в моде
МАТЬ ВОЛЬКУРОЧЕК

Поделиться22023-08-07 19:13:52

Автор: Garrett Hawk
Администратор
Сообщений: 44
Уважение: +6
казна: 3000 $
посты: 16
лз:
гаррет хоук, 36
Не открывай мне свое сердце, маг. Не то рано или поздно, я его у тебя вырву.
Последний визит:
2024-06-25 13:17:29
плашка:
драконы не в моде
МАТЬ ВОЛЬКУРОЧЕК

Бесплатные HTML-шаблоны для всех. Можно перетаскивать и выкладывать где угодно, только авторство положите рядышком, пожалуйста. Можно менять как захочется и ставить куда угодно.

Код:

<!--HTML-->
<div class="anders_wrapper">
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/eb7siVm.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Tessa Mollenar, 25
      <em>Lili Reinhart</em>
      </span>
      <div class="anders_desc">
        <p>Она та, кто знает все и обо всех в этом городе, потому что, работая барменом в клубе Воронов, ты невольно становишься собеседником для сотен незнакомцев, что после пары бокалов крепкого алкоголя, готовы выложить всю правду о себе. Умеет разговорить и тонко вытянуть любую информацию, чтобы в последствии предоставить ее Инеж для проверки, только никто не знает, что эта милая девушка играет на обе стороны Кеттердама.</p>
        <p>У Пекки Роллинса есть на нее некий компромат, который девушка боится обнародовать, поэтому ту информацию, что она получает в клубе Воронов, она охотно передает и в руки этого шантажиста. Возможно, ей бы стоило признаться во всем Казу, чтобы найти выход из сложившейся ситуации, но она молчит, чем повышает цену за свою голову, ведь если кто-то узнает о предательстве – ее убьют. Так может смысл в том, чтобы не попасться? Или все же пришло время положиться на милосердие хозяина и ждать участи или прощения?</p>
      </div>
    </div>
  </div>
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/CcJigsb.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Rich Hunt, 28
      <em>Dave Franco</em>
      </span>
      <div class="anders_desc">
        <p>Относительно недавнее, но очень полезное приобретение Каза Бреккера, помогающее Клубу выйти на новый уровень прибыли. Вам уже интересно какими талантами он обладает? Все просто. Он профессиональный карточный шулер, который может так легко обвести вокруг пальца зрителя, что тот даже не успеет уловить обман.</p>
      </div>
    </div>
  </div>
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/HMKRMoi.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Peter White, 30
      <em>Matthew Daddario</em>
      </span>
      <div class="anders_desc">
        <p>Если вам кажется, что самая сложная работа у тех, кто работает внутри Клубов, то вы ошибаетесь, потому что самая серьезная ответственность падает на плечи тех, кому приходится следить за порядком, умело избегая конфликтов и нередко решая их с применением силы.</p>
      </div>
    </div>
  </div>
  
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap');

.anders_wrapper {
  --bg: transparent; /* общий фон, можно ставить цветом*/
  --card-bg: #FFFBEF; /* фон под текстом карточек */
  --text: #292929; /* цвет текста */
  --accent: #C75267; /* акцентный цвет */
  --shadow: 4px 4px 15px rgba(0, 0, 0, 0.08); /* тень карточки */
  --radius: 40px; /* радиус скругления */
  --padding: 25px 30px; /* осттупы */
  --font: 400 12px/150% 'Noto Sans Display'; /* шрифт */
  --overlay: linear-gradient(180deg, transparent 0%, #FFFBEF 70%); /* градиент на тексте, ставить цвет фона под текстом */
  --w: 300px; /* ширина карточки */
  --h: 350px; /* высота карточки */
  --h-container: 250px; /* высота контейнера с текстом */
}

.anders_wrapper {
  width: 100%;
  height: auto;
  padding: 30px;
  background: var(--bg);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box
}

.anders_card-wrap {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: var(--w);
  overflow: hidden;
  height: var(--h);
  position: relative;
  font: var(--font);
}

.andres_img img {
  width: var(--w);
  height: calc(var(--h) - 110px);
  object-fit: cover;
}

.anders_container {
  background: var(--card-bg);
  position: absolute;
  bottom: -100px;
  border-radius: var(--radius) 0 0 0;
  width: 100%;
  height: var(--h-container);
  padding: var(--padding);
  box-sizing: border-box;
  transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}

.anders_angle {
  position: absolute;
  top: -45px;
  right: 0px;
  width: 50px;
  height: 45px;
}

.anders_angle path {
  fill: var(--card-bg);
  d: path("M0.0979309 44.9119L0 45H3H50V0L49.9566 0.039093C48.8889 25.0505 28.2742 45 3 45C2.02544 45 1.05779 44.9703 0.0979309 44.9119Z");
}

.anders_container span {
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.anders_container em {
  font-style: normal;
  display: block;
  opacity: .75;
  color: var(--text);
  font-size: 11px;
  font-weight: 400;
}

.anders_desc {
  text-align: justify;
  margin-bottom: 25px;
  height: calc(var(--h-container) - 100px);
  overflow-y: auto;
  padding-right: 10px;
  position: relative;
}

.anders_desc p {
  padding: 0 !important;
  margin: 0 !important;
  font: var(--font) !important;
}

.anders_desc p + p {
  margin-top: 15px !important;
}

.anders_card-wrap:after {
  content: "";
  background: var(--overlay);
  display: block;
  width: 100%;
  height: 100px;
  z-index: 5;
  bottom: 0px;
  left: 0;
  position: absolute;
  transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}

.anders_card-wrap:hover .anders_container {
  bottom: 0;
}

.anders_card-wrap:hover:after {
  height: 0px
}
</style>

HTML. Ставить в сообщение или в любое другое место, где они нужны.

Код:

<div class="anders_wrapper">
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/eb7siVm.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Tessa Mollenar, 25
      <em>Lili Reinhart</em>
      </span>
      <div class="anders_desc">
        <p>Она та, кто знает все и обо всех в этом городе, потому что, работая барменом в клубе Воронов, ты невольно становишься собеседником для сотен незнакомцев, что после пары бокалов крепкого алкоголя, готовы выложить всю правду о себе. Умеет разговорить и тонко вытянуть любую информацию, чтобы в последствии предоставить ее Инеж для проверки, только никто не знает, что эта милая девушка играет на обе стороны Кеттердама.</p>
        <p>У Пекки Роллинса есть на нее некий компромат, который девушка боится обнародовать, поэтому ту информацию, что она получает в клубе Воронов, она охотно передает и в руки этого шантажиста. Возможно, ей бы стоило признаться во всем Казу, чтобы найти выход из сложившейся ситуации, но она молчит, чем повышает цену за свою голову, ведь если кто-то узнает о предательстве – ее убьют. Так может смысл в том, чтобы не попасться? Или все же пришло время положиться на милосердие хозяина и ждать участи или прощения?</p>
      </div>
    </div>
  </div>
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/CcJigsb.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Rich Hunt, 28
      <em>Dave Franco</em>
      </span>
      <div class="anders_desc">
        <p>Относительно недавнее, но очень полезное приобретение Каза Бреккера, помогающее Клубу выйти на новый уровень прибыли. Вам уже интересно какими талантами он обладает? Все просто. Он профессиональный карточный шулер, который может так легко обвести вокруг пальца зрителя, что тот даже не успеет уловить обман.</p>
      </div>
    </div>
  </div>
  
  <div class="anders_card-wrap">
    <div class="andres_img">
      <img src="https://i.imgur.com/HMKRMoi.jpg">
    </div>
    <div class="anders_container">
      <svg class="anders_angle" xmlns="http://www.w3.org/2000/svg"><path></path></svg>
      <span>Peter White, 30
      <em>Matthew Daddario</em>
      </span>
      <div class="anders_desc">
        <p>Если вам кажется, что самая сложная работа у тех, кто работает внутри Клубов, то вы ошибаетесь, потому что самая серьезная ответственность падает на плечи тех, кому приходится следить за порядком, умело избегая конфликтов и нередко решая их с применением силы.</p>
      </div>
    </div>
  </div>
  
</div>

CSS. Ставить в свой стиль.

Код:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap');

.anders_wrapper {
  --bg: transparent; /* общий фон, можно ставить цветом*/
  --card-bg: #FFFBEF; /* фон под текстом карточек */
  --text: #292929; /* цвет текста */
  --accent: #C75267; /* акцентный цвет */
  --shadow: 4px 4px 15px rgba(0, 0, 0, 0.08); /* тень карточки */
  --radius: 40px; /* радиус скругления */
  --padding: 25px 30px; /* осттупы */
  --font: 400 12px/150% 'Noto Sans Display'; /* шрифт */
  --overlay: linear-gradient(180deg, transparent 0%, #FFFBEF 70%); /* градиент на тексте, ставить цвет фона под текстом */
  --w: 300px; /* ширина карточки */
  --h: 350px; /* высота карточки */
  --h-container: 250px; /* высота контейнера с текстом */
}

.anders_wrapper {
  width: 100%;
  height: auto;
  padding: 30px;
  background: var(--bg);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box
}

.anders_card-wrap {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: var(--w);
  overflow: hidden;
  height: var(--h);
  position: relative;
  font: var(--font);
}

.andres_img img {
  width: var(--w);
  height: calc(var(--h) - 110px);
  object-fit: cover;
}

.anders_container {
  background: var(--card-bg);
  position: absolute;
  bottom: -100px;
  border-radius: var(--radius) 0 0 0;
  width: 100%;
  height: var(--h-container);
  padding: var(--padding);
  box-sizing: border-box;
  transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}

.anders_angle {
  position: absolute;
  top: -45px;
  right: 0px;
  width: 50px;
  height: 45px;
}

.anders_angle path {
  fill: var(--card-bg);
  d: path("M0.0979309 44.9119L0 45H3H50V0L49.9566 0.039093C48.8889 25.0505 28.2742 45 3 45C2.02544 45 1.05779 44.9703 0.0979309 44.9119Z");
}

.anders_container span {
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.anders_container em {
  font-style: normal;
  display: block;
  opacity: .75;
  color: var(--text);
  font-size: 11px;
  font-weight: 400;
}

.anders_desc {
  text-align: justify;
  margin-bottom: 25px;
  height: calc(var(--h-container) - 100px);
  overflow-y: auto;
  padding-right: 10px;
  position: relative;
}

.anders_desc p {
  padding: 0 !important;
  margin: 0 !important;
  font: var(--font) !important;
}

.anders_desc p + p {
  margin-top: 15px !important;
}

.anders_card-wrap:after {
  content: "";
  background: var(--overlay);
  display: block;
  width: 100%;
  height: 100px;
  z-index: 5;
  bottom: 0px;
  left: 0;
  position: absolute;
  transition: all .3s cubic-bezier(0.78, 0.01, 0.47, 0.99) 0s !important;
}

.anders_card-wrap:hover .anders_container {
  bottom: 0;
}

.anders_card-wrap:hover:after {
  height: 0px
}

Поделиться32023-08-07 19:30:59

Автор: Garrett Hawk
Администратор
Сообщений: 44
Уважение: +6
казна: 3000 $
посты: 16
лз:
гаррет хоук, 36
Не открывай мне свое сердце, маг. Не то рано или поздно, я его у тебя вырву.
Последний визит:
2024-06-25 13:17:29
плашка:
драконы не в моде
МАТЬ ВОЛЬКУРОЧЕК

Код:

<!--HTML-->
<div class="f_timeline-wrap"> 
    <h4 class="f_timeline-year">
     <div class="f_timeline-mark"></div>
      1500 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      1992 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      2000 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      2023 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item closed">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item closed">
    <div class="f_timeline-mark"></div>
      <span>4 утешника</span>
      <a href="http://dragonageone.mybb.ru/viewtopic.php?id=1128">The Shepherd’s lost and his home is far</a>
      <p>Известия из Тевинтера приходят не самые радостные. Дориан обеспокоен. Фенрис обеспокоен еще сильнее, потому что его сердце где-то там, в Империи, пока он в Антиве. Но, естественно, просто взять и уйти молча как вариант не рассматривается — это уже дезертирством попахивает.</p>
    </div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

.f_timeline-wrap {
  --tfont: philosopher; /* шрифт заголовков */
  --tfont2: pt sans; /* шрифт текстовок */
  --border: #A6A6A6; /* цвет бордера */
  --tcolor: rgba(55, 66, 105, 1); /* цвет ссылок и кругляшков */
  --tcolor2: #353C39; /* цвет текста */
}

.f_timeline-wrap a {
  color: var(--tcolor) !important;
}

.f_timeline-wrap a:hover {
  color: var(--tcolor2) !important;
}

.f_timeline-wrap {
  width: 100%;
  color: #333;
  font-family: var(--tfont);
}

.f_timeline-year {
  font-weight: 700 !important;
  font-size: 28px !important;
  height: 70px;
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0;
  position: relative;
}

.f_timeline-year .f_timeline-mark:before {
  background: transparent;
  content: "";
  width: 15px;
  height: 70px;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: -25px;
  position: absolute;
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
  box-sizing: border-box;
}
.f_timeline-year .f_timeline-mark:after {
  content: "";
  height: 20px;
  top: 70px;
}

.f_timeline-year + .f_timeline-item {
  margin-top: 24px
}

.f_timeline-year:first-child .f_timeline-mark:before {
 border-top: 0px solid var(--border);
}

.f_timeline-item {
  padding-left: 40px;
  padding-top: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f_timeline-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}

.f_timeline-mark:before {
  background: var(--tcolor);
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 9px;
}

.f_timeline-mark:after {
  content: "";
  width: 3px;
  background: var(--border);
  display: block;
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 6px;
}
.f_timeline-mark:last-child .f_timeline-mark:after {
  content: none;
}

.f_timeline-item span {
  display: block;
  font-weight: 700;
  font-size: 12px;
}

.f_timeline-item a {
  font-weight: 700;
  font-size: 18px;
}

.f_timeline-item p {
  padding: 0;
  margin: 0;
  font: 500 12px/150% var(--tfont2) !important
  padding-bottom: 30px !important;
  margin-top: 5px!important;
}

.f_timeline-item.closed .f_timeline-mark:before, .f_timeline-item.closed span, .f_timeline-item.closed a, .f_timeline-item.closed p {
  opacity: .65;
  filter: sepia(100%)
}

.f_timeline-item:last-child .f_timeline-mark:after {
  content: none;
}
</style>

HTML. Ставить в сообщение или в любое другое место, где они нужны.

Код:

<div class="f_timeline-wrap"> 
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      1500 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      1660 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
     1877 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      1990 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      1992 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      2000 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <h4 class="f_timeline-year">
      <div class="f_timeline-mark"></div>
      2023 год
    </h4>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item closed">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item">
      <div class="f_timeline-mark"></div>
      <span>07.08.1500</span>
      <a href="ссылка_на эпизод">Кто придумал каблуки</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    <div class="f_timeline-item closed">
    <div class="f_timeline-mark"></div>
      <span>4 утешника</span>
      <a href="http://dragonageone.mybb.ru/viewtopic.php?id=1128">The Shepherd’s lost and his home is far</a>
      <p>Известия из Тевинтера приходят не самые радостные. Дориан обеспокоен. Фенрис обеспокоен еще сильнее, потому что его сердце где-то там, в Империи, пока он в Антиве. Но, естественно, просто взять и уйти молча как вариант не рассматривается — это уже дезертирством попахивает.</p>
    </div>

CSS. Ставить в свой стиль.

Код:

@import url('https://fonts.googleapis.com/css2?family=Alice&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

.f_timeline-wrap {
  --tfont: philosopher; /* шрифт заголовков */
  --tfont2: pt sans; /* шрифт текстовок */
  --border: #A6A6A6; /* цвет бордера */
  --tcolor: rgba(55, 66, 105, 1); /* цвет ссылок и кругляшков */
  --tcolor2: #353C39; /* цвет текста */
}

.f_timeline-wrap a {
  color: var(--tcolor) !important;
}

.f_timeline-wrap a:hover {
  color: var(--tcolor2) !important;
}

.f_timeline-wrap {
  width: 100%;
  color: #333;
  font-family: var(--tfont);
}

.f_timeline-year {
  font-weight: 700 !important;
  font-size: 28px !important;
  height: 70px;
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0;
  position: relative;
}

.f_timeline-year .f_timeline-mark:before {
  background: transparent;
  content: "";
  width: 15px;
  height: 70px;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: -25px;
  position: absolute;
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
  box-sizing: border-box;
}
.f_timeline-year .f_timeline-mark:after {
  content: "";
  height: 20px;
  top: 70px;
}

.f_timeline-year + .f_timeline-item {
  margin-top: 24px
}

.f_timeline-year:first-child .f_timeline-mark:before {
 border-top: 0px solid var(--border);
}

.f_timeline-item {
  padding-left: 40px;
  padding-top: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f_timeline-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}

.f_timeline-mark:before {
  background: var(--tcolor);
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 9px;
}

.f_timeline-mark:after {
  content: "";
  width: 3px;
  background: var(--border);
  display: block;
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 6px;
}
.f_timeline-mark:last-child .f_timeline-mark:after {
  content: none;
}

.f_timeline-item span {
  display: block;
  font-weight: 700;
  font-size: 12px;
}

.f_timeline-item a {
  font-weight: 700;
  font-size: 18px;
}

.f_timeline-item p {
  padding: 0;
  margin: 0;
  font: 500 12px/150% var(--tfont2) !important
  padding-bottom: 30px !important;
  margin-top: 5px!important;
}

.f_timeline-item.closed .f_timeline-mark:before, .f_timeline-item.closed span, .f_timeline-item.closed a, .f_timeline-item.closed p {
  opacity: .65;
  filter: sepia(100%)
}

.f_timeline-item:last-child .f_timeline-mark:after {
  content: none;
}

Поделиться42023-08-12 15:39:41

Автор: Garrett Hawk
Администратор
Сообщений: 44
Уважение: +6
казна: 3000 $
посты: 16
лз:
гаррет хоук, 36
Не открывай мне свое сердце, маг. Не то рано или поздно, я его у тебя вырву.
Последний визит:
2024-06-25 13:17:29
плашка:
драконы не в моде
МАТЬ ВОЛЬКУРОЧЕК

Предисловие или типа того. Я долго и оч мучительно болел, но заливаюсь обратно. И даже первое сообщение в теме обновил.
Обновления с пинка @frenchie , чтоб я без нее делал ~~наверняка бы снял штаны и бегал~~ хд Ну, а теперь к делу хд

Поделиться52023-12-09 23:35:05

Автор: Garrett Hawk
Администратор
Сообщений: 44
Уважение: +6
казна: 3000 $
посты: 16
лз:
гаррет хоук, 36
Не открывай мне свое сердце, маг. Не то рано или поздно, я его у тебя вырву.
Последний визит:
2024-06-25 13:17:29
плашка:
драконы не в моде
МАТЬ ВОЛЬКУРОЧЕК

Код:

<!--HTML-->
<div class="a_timeline-wrap">

    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>12 сентября 2004</span>
      <a href="ссылка">Придумывать названия сложно</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>21 июня 2005</span>
      <a href="ссылка">Гусьтарион</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>1 января 2006</span>
      <a href="ссылка">Хаотично-нейтральный странный вол</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>25 января 2006</span>
      <a href="ссылка">Медведь-шалун</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>25 января 2006</span>
      <a href="ссылка">Если ты пнул белку - медведь-шалун придет за тобой</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
  </div>
    </div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

.a_timeline-wrap {
  --border: #9F957C;
  --tcolor: #3b5364;
}

.a_timeline-wrap {
   width: auto;
   padding: 50px 0;
   margin: auto;
   position: relative;
}

.a_timeline-wrap:before {
     content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: var(--border);
   z-index: 1
}

.a_timeline-item {
  font: 400 12px philosopher;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% + 8px);
  position: relative;
  padding-right: 30px;
  box-sizing: border-box;
  text-align: right;
}

.a_timeline-marker {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: var(--tcolor);
   border: 2px solid var(--pun);
   top: 0px;
   z-index: 9999;
  position: absolute;
  right: 0px;
  box-sizing: border-box;
}

.a_timeline-item span {
  font-size: 12px;
}

.a_timeline-item a {
  font-weight: 700;
  font-size: 18px
}

.a_timeline-item p {
  padding: 10px 0 0 0 !important;
  margin: 0 !important;
  font: 400 11px/150% philosopher !important;
}

.a_timeline-item + .a_timeline-item {
  margin-top: 40px
}

.a_timeline-item:nth-child(2n) {
  font: 400 12px philosopher;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% + 8px);
  position: relative;
  padding-left: 30px;
  box-sizing: border-box;
  text-align: left;
  margin-left: calc(50% - 8px)
}

.a_timeline-item:nth-child(2n) .a_timeline-marker {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: var(--tcolor);
   border: 2px solid var(--pun);
   top: 0px;
   z-index: 9999;
  position: absolute;
  right: calc(100% - 16px);
  box-sizing: border-box;
}
</style>

HTML. Ставить в сообщение или в любое другое место, где они нужны.

Код:

<div class="a_timeline-wrap">

    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>12 сентября 2004</span>
      <a href="ссылка">Придумывать названия сложно</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>21 июня 2005</span>
      <a href="ссылка">Гусьтарион</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>1 января 2006</span>
      <a href="ссылка">Хаотично-нейтральный странный вол</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>25 января 2006</span>
      <a href="ссылка">Медведь-шалун</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
    <div class="a_timeline-item">
      <div class="a_timeline-marker"></div>
      <span>25 января 2006</span>
      <a href="ссылка">Если ты пнул белку - медведь-шалун придет за тобой</a>
      <p>Первые «стилеты» с острым носом и каблучком пошиты в Италии в начале 50-хх годов прошлого столетия. По прошествии нескольких лет подобная обувь прочно обосновалась в коллекциях именитых дизайнеров того времени. В 1953 Роже Вивьер пошил необычайные туфельки на каблучке с драгоценными камнями. Они должны были украшать ноги английской принцессы на коронации. Модель вызвала настоящий «бум» и прочно укрепила позиции «шпильки». </p>
    </div>
    
  </div>
    </div>

CSS. Ставить в свой стиль.

Код:

@import url('https://fonts.googleapis.com/css2?family=Alice&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

.a_timeline-wrap {
  --border: #9F957C;
  --tcolor: #3b5364;
}

.a_timeline-wrap {
   width: auto;
   padding: 50px 0;
   margin: auto;
   position: relative;
}

.a_timeline-wrap:before {
     content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: var(--border);
   z-index: 1
}

.a_timeline-item {
  font: 400 12px philosopher;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% + 8px);
  position: relative;
  padding-right: 30px;
  box-sizing: border-box;
  text-align: right;
}

.a_timeline-marker {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: var(--tcolor);
   border: 2px solid var(--pun);
   top: 0px;
   z-index: 9999;
  position: absolute;
  right: 0px;
  box-sizing: border-box;
}

.a_timeline-item span {
  font-size: 12px;
}

.a_timeline-item a {
  font-weight: 700;
  font-size: 18px
}

.a_timeline-item p {
  padding: 10px 0 0 0 !important;
  margin: 0 !important;
  font: 400 11px/150% philosopher !important;
}

.a_timeline-item + .a_timeline-item {
  margin-top: 40px
}

.a_timeline-item:nth-child(2n) {
  font: 400 12px philosopher;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% + 8px);
  position: relative;
  padding-left: 30px;
  box-sizing: border-box;
  text-align: left;
  margin-left: calc(50% - 8px)
}

.a_timeline-item:nth-child(2n) .a_timeline-marker {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: var(--tcolor);
   border: 2px solid var(--pun);
   top: 0px;
   z-index: 9999;
  position: absolute;
  right: calc(100% - 16px);
  box-sizing: border-box;
}

Страница: 1