Шаблон эпизода

В шапке эпизода отразить следующую информацию:

1. Дата событий.
2. Место.
3. Участники.
4. Кратко описание сюжета.

Если душа требует эстетики, воспользуйтесь шаблоном.
Фоновое изображение меняйте на свой вкус.
Цитаты и музыка - по желанию.

[html]<style>
#unique-quote-container .quote {
margin: 20px;
padding: 20px;
border: 2px solid #453127;
border-radius: 20px;
background-image: url('https://forumupload.ru/uploads/001c/1b/8a/2/838675.jpg');
background-size: cover;
background-position: center;
font-family: 'Alice', sans-serif;
font-size: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: #0b292f;
}
#unique-quote-container .quote .header,
#unique-quote-container .quote .footer,
#unique-quote-container .quote .description {
font-size: 15px;
font-family: 'Alice', sans-serif;
color: #d7e6d6;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
#unique-quote-container .quote .header,
#unique-quote-container .quote .footer {
text-align: right;
}
#unique-quote-container .quote .header {
margin-bottom: 10px;
}
#unique-quote-container .quote .title {
text-align: center;
font-size: 15px;
font-family: 'Alice', sans-serif;
font-weight: bold;
color: #d7e6d6;
text-transform: uppercase;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
#unique-quote-container .quote .image-container {
text-align: center;
margin: 10px 0;
}
#unique-quote-container .quote .image-container img {
max-width: 200px;
max-height: 200px;
width: 100%;
height: 100%;
border: 2px solid #453127;
object-fit: cover;
margin: 0 10px;
}
#unique-quote-container .quote .description {
text-align: center;
}
#unique-quote-container .quote .description-block {
width: 80%;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
background-color: rgba(151, 144, 142, 0.6);
color: #271b16;
font-size: 15px;
font-family: 'Alice', sans-serif;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(69, 49, 39, 0.5);
}
</style>

<div id="unique-quote-container">
<div class="quote">
<div class="header">
первый игрок ✦ второй игрок
</div>
<div class="footer">
место ✦ время действия
</div>

<div class="title">
НАЗВАНИЕ
</div>

<div class="description">
цитата ✦ музыка
</div>

<div class="description-block">
описание
</div>
</div>
</div>[/html]

Код на шапку эпизода

Код:

[html]<style>
  #unique-quote-container .quote {
    margin: 20px;
    padding: 20px;
    border: 2px solid #453127;
    border-radius: 20px;
    background-image: url('ВСТАВЬТЕ ССЫЛКУ НА ФОНОВОЕ ИЗОБРАЖЕНИЕ'); 
    background-size: cover;
    background-position: center;
    font-family: 'Alice', sans-serif;
    font-size: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #0b292f;
  }
  #unique-quote-container .quote .header,
  #unique-quote-container .quote .footer,
  #unique-quote-container .quote .description {
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    color: #d7e6d6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  #unique-quote-container .quote .header,
  #unique-quote-container .quote .footer {
    text-align: right;
  }
  #unique-quote-container .quote .header {
    margin-bottom: 10px;
  }
  #unique-quote-container .quote .title {
    text-align: center;
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    font-weight: bold;
    color: #d7e6d6;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  #unique-quote-container .quote .image-container {
    text-align: center;
    margin: 10px 0;
  }
  #unique-quote-container .quote .image-container img {
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    height: 100%;
    border: 2px solid #453127;
    object-fit: cover;
    margin: 0 10px;
  }
  #unique-quote-container .quote .description {
    text-align: center;
  }
  #unique-quote-container .quote .description-block {
    width: 80%;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(151, 144, 142, 0.6); 
    color: #271b16;
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(69, 49, 39, 0.5); 
  }
</style>

<div id="unique-quote-container">
  <div class="quote">
    <div class="header">
      первый игрок ✦ второй игрок
    </div>
    <div class="footer">
      место ✦ время действия
    </div>

    <div class="title">
      НАЗВАНИЕ
    </div>

    <div class="description">
      цитата ✦ музыка
    </div>

    <div class="description-block">
      описание
    </div>
  </div>
</div>[/html]

Второй вариант с двумя дополнительными изображениями под аватары или антуражные арты

Код:

[html]<style>
  #unique-quote-container .quote {
    margin: 20px;
    padding: 20px;
    border: 2px solid #453127;
    border-radius: 20px;
    background-image: url('ВСТАВЬТЕ ССЫЛКУ НА ФОНОВОЕ ИЗОБРАЖЕНИЕ'); 
    background-size: cover;
    background-position: center;
    font-family: 'Alice', sans-serif;
    font-size: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #0b292f;
  }
  #unique-quote-container .quote .header,
  #unique-quote-container .quote .footer,
  #unique-quote-container .quote .description {
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    color: #d7e6d6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  #unique-quote-container .quote .header,
  #unique-quote-container .quote .footer {
    text-align: right;
  }
  #unique-quote-container .quote .header {
    margin-bottom: 10px;
  }
  #unique-quote-container .quote .title {
    text-align: center;
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    font-weight: bold;
    color: #d7e6d6;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  #unique-quote-container .quote .image-container {
    text-align: center;
    margin: 10px 0;
  }
  #unique-quote-container .quote .image-container img {
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    height: 100%;
    border: 2px solid #453127;
    object-fit: cover;
    margin: 0 10px;
  }
  #unique-quote-container .quote .description {
    text-align: center;
  }
  #unique-quote-container .quote .description-block {
    width: 80%;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(151, 144, 142, 0.6); 
    color: #271b16;
    font-size: 15px;
    font-family: 'Alice', sans-serif;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(69, 49, 39, 0.5); 
  }
</style>

<div id="unique-quote-container">
  <div class="quote">
    <div class="header">
      первый игрок ✦ второй игрок
    </div>
    <div class="footer">
      место ✦ время действия
    </div>

    <div class="title">
      НАЗВАНИЕ
    </div>

    <div class="image-container">
      <img src="ВСТАВЬТЕ ССЫЛКУ НА ПОРТРЕТ ИГРОКА 1" alt="Изображение 1">
      <img src="ВСТАВЬТЕ ССЫЛКУ НА ПОРТРЕТ ИГРОКА 2" alt="Изображение 2">
    </div>

    <div class="description">
      цитата ✦ музыка
    </div>

    <div class="description-block">
      описание
    </div>
  </div>
</div>[/html]

ЯрФорт

Меню навигации

Пользовательские ссылки

Информация о пользователе

Шаблон эпизода

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

Поделиться12024-05-26 14:57:34