hawkins тест - мистика - камерный

Stranger things

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Stranger things » Hawkins Laboratory » Шаблон


Шаблон

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

1

Заголовок: michael wheeler, 19

Внешний вид полного шаблона анкеты:
[html]
<style>
  .custom-tpl-1 {
    max-width: 520px;
    margin: 0 auto;
    background: #fbfbfb;
    border: 1px solid #eaeaea;
    padding: 30px;
    font-family: 'Georgia', serif;
    color: #333;
  }
  .tpl-1-header {
    text-align: center;
    margin-bottom: 25px;
  }
  .tpl-1-name {
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: 2px;
    color: #111;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .tpl-1-subtitle {
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
  }
  .tpl-1-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
  }
  .tpl-1-img-box {
    width: 180px;
    height: 250px;
    flex-shrink: 0;
  }
  .tpl-1-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .tpl-1-summary {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;
    color: #555;
  }
  .tpl-1-tag {
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    display: block;
    margin-top: 8px;
  }
  .tpl-1-main {
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }

  .tpl-1-spoiler {
    margin-top: 15px;
  }
 
  .tpl-1-spoiler input[type="checkbox"] {
    display: none;
  }
 
  .tpl-1-spoiler label {
    display: inline-block;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
  }
 
  .tpl-1-spoiler label::before {
    content: '▶ ';
    font-size: 9px;
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.15s ease;
  }
 
  .tpl-1-spoiler input[type="checkbox"]:checked + label::before {
    transform: rotate(90deg);
  }
 
  .tpl-1-spoiler-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 1.6;
  }
 
  .tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
    display: block;
  }
</style>

<div class="custom-tpl-1">
  <div class="tpl-1-header">
    <div class="tpl-1-name">michael wheeler</div>
    <div class="tpl-1-subtitle">fc: finn wolfhard</div>
  </div>

  <div class="tpl-1-flex">
    <div class="tpl-1-img-box">
      <img src="http://forumstatic.ru/files/001c/ba/bd/42878.gif" alt="">
    </div>
    <div class="tpl-1-summary">
      <span class="tpl-1-tag">Краткая сводка:</span>
      Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
      <br><br>
      <span class="tpl-1-tag">Принадлежность:</span>
      сопротивление / выживший / фракция
    </div>
  </div>

  <div class="tpl-1-main">
    Здесь располагается подробная биография, ответы на вопросы, 5 фактов, психотип или любой другой формат, в котором привыкли раскрывать персонажа.
   
    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-vibes">
      <label for="spoiler-vibes">вайб</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
      </div>
    </div>

    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-memes">
      <label for="spoiler-memes">мемы</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся мемы, гифки или любой другой контент
      </div>
    </div>
  </div>
</div>
[/html]

Код:
Заголовок: michael wheeler, 19

Внешний вид:
[html]
<style>
  .custom-tpl-1 {
    max-width: 520px;
    margin: 0 auto;
    background: #fbfbfb;
    border: 1px solid #eaeaea;
    padding: 30px;
    font-family: 'Georgia', serif;
    color: #333;
  }
  .tpl-1-header {
    text-align: center;
    margin-bottom: 25px;
  }
  .tpl-1-name {
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: 2px;
    color: #111;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .tpl-1-subtitle {
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
  }
  .tpl-1-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
  }
  .tpl-1-img-box {
    width: 180px;
    height: 250px;
    flex-shrink: 0;
  }
  .tpl-1-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .tpl-1-summary {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;
    color: #555;
  }
  .tpl-1-tag {
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    display: block;
    margin-top: 8px;
  }
  .tpl-1-main {
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }

  .tpl-1-spoiler {
    margin-top: 15px;
  }
  
  .tpl-1-spoiler input[type="checkbox"] {
    display: none;
  }
  
  .tpl-1-spoiler label {
    display: inline-block;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
  }
  
  .tpl-1-spoiler label::before {
    content: '▶ ';
    font-size: 9px;
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.15s ease;
  }
  
  .tpl-1-spoiler input[type="checkbox"]:checked + label::before {
    transform: rotate(90deg);
  }
  
  .tpl-1-spoiler-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 1.6;
  }
  
  .tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
    display: block;
  }
</style>

<div class="custom-tpl-1">
  <div class="tpl-1-header">
    <div class="tpl-1-name">name surname персонажа</div>
    <div class="tpl-1-subtitle">fc: имя внешности на англ с маленькой буквы</div>
  </div>

  <div class="tpl-1-flex">
    <div class="tpl-1-img-box">
      <img src="ссылка_на_гиф" alt="">
    </div>
    <div class="tpl-1-summary">
      <span class="tpl-1-tag">Краткая сводка:</span>
      Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
      <br><br>
      <span class="tpl-1-tag">Принадлежность:</span>
      сопротивление / выживший / фракция 
    </div>
  </div>

  <div class="tpl-1-main">
    Здесь располагается подробная биография, ответы на вопросы, 5 фактов, психотип или любой другой формат, в котором привыкли раскрывать персонажа. 
    
    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-vibes">
      <label for="spoiler-vibes">вайб</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
      </div>
    </div>

    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-memes">
      <label for="spoiler-memes">мемы</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся мемы, гифки или любой другой контент
      </div>
    </div>
  </div>
</div>
[/html]

0

2

Заголовок: michael wheeler, 19

Внешний вид упрощённого шаблона анкеты:
[html]
<style>
  .custom-tpl-1 {
    max-width: 520px;
    margin: 0 auto;
    background: #fbfbfb;
    border: 1px solid #eaeaea;
    padding: 30px;
    font-family: 'Georgia', serif;
    color: #333;
  }
  .tpl-1-header {
    text-align: center;
    margin-bottom: 25px;
  }
  .tpl-1-name {
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: 2px;
    color: #111;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .tpl-1-subtitle {
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
  }
  .tpl-1-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
  }
  .tpl-1-img-box {
    width: 180px;
    height: 250px;
    flex-shrink: 0;
  }
  .tpl-1-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .tpl-1-summary {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;
    color: #555;
  }
  .tpl-1-tag {
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    display: block;
    margin-top: 8px;
  }
  .tpl-1-main {
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }

  .tpl-1-spoiler {
    margin-top: 15px;
  }
 
  .tpl-1-spoiler input[type="checkbox"] {
    display: none;
  }
 
  .tpl-1-spoiler label {
    display: inline-block;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
  }
 
  .tpl-1-spoiler label::before {
    content: '▶ ';
    font-size: 9px;
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.15s ease;
  }
 
  .tpl-1-spoiler input[type="checkbox"]:checked + label::before {
    transform: rotate(90deg);
  }
 
  .tpl-1-spoiler-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 1.6;
  }
 
  .tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
    display: block;
  }
</style>

<div class="custom-tpl-1">
  <div class="tpl-1-header">
    <div class="tpl-1-name">michael wheeler</div>
    <div class="tpl-1-subtitle">fc: finn wolfhard</div>
  </div>

  <div class="tpl-1-flex">
    <div class="tpl-1-img-box">
      <img src="http://forumstatic.ru/files/001c/ba/bd/42878.gif" alt="">
    </div>
    <div class="tpl-1-summary">
      <span class="tpl-1-tag">Краткая сводка:</span>
      Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
      <br><br>
      <span class="tpl-1-tag">Принадлежность:</span>
      сопротивление / выживший / фракция
    </div>
  </div>

  <div class="tpl-1-main">
   
    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-vibes">
      <label for="spoiler-vibes">вайб</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
      </div>
    </div>

    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-memes">
      <label for="spoiler-memes">мемы</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся мемы, гифки или любой другой контент
      </div>
    </div>
  </div>
</div>
[/html]

Код:
[html]
<style>
  .custom-tpl-1 {
    max-width: 520px;
    margin: 0 auto;
    background: #fbfbfb;
    border: 1px solid #eaeaea;
    padding: 30px;
    font-family: 'Georgia', serif;
    color: #333;
  }
  .tpl-1-header {
    text-align: center;
    margin-bottom: 25px;
  }
  .tpl-1-name {
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: 2px;
    color: #111;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .tpl-1-subtitle {
    font-size: 10px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
  }
  .tpl-1-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
  }
  .tpl-1-img-box {
    width: 180px;
    height: 250px;
    flex-shrink: 0;
  }
  .tpl-1-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .tpl-1-summary {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;
    color: #555;
  }
  .tpl-1-tag {
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    display: block;
    margin-top: 8px;
  }
  .tpl-1-main {
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }

  .tpl-1-spoiler {
    margin-top: 15px;
  }
  
  .tpl-1-spoiler input[type="checkbox"] {
    display: none;
  }
  
  .tpl-1-spoiler label {
    display: inline-block;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
  }
  
  .tpl-1-spoiler label::before {
    content: '▶ ';
    font-size: 9px;
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.15s ease;
  }
  
  .tpl-1-spoiler input[type="checkbox"]:checked + label::before {
    transform: rotate(90deg);
  }
  
  .tpl-1-spoiler-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 1.6;
  }
  
  .tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
    display: block;
  }
</style>

<div class="custom-tpl-1">
  <div class="tpl-1-header">
    <div class="tpl-1-name">name surname персонажа</div>
    <div class="tpl-1-subtitle">fc: имя внешности на англ и с маленькой буквы</div>
  </div>

  <div class="tpl-1-flex">
    <div class="tpl-1-img-box">
      <img src="ссылка _на _гиф" alt="">
    </div>
    <div class="tpl-1-summary">
      <span class="tpl-1-tag">Краткая сводка:</span>
      Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
      <br><br>
      <span class="tpl-1-tag">Принадлежность:</span>
      сопротивление / выживший / фракция 
    </div>
  </div>

  <div class="tpl-1-main">
    
    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-vibes">
      <label for="spoiler-vibes">вайб</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
      </div>
    </div>

    <div class="tpl-1-spoiler">
      <input type="checkbox" id="spoiler-memes">
      <label for="spoiler-memes">мемы</label>
      <div class="tpl-1-spoiler-content">
        здесь прячутся мемы, гифки или любой другой контент
      </div>
    </div>
  </div>
</div>
[/html]

0


Вы здесь » Stranger things » Hawkins Laboratory » Шаблон


Рейтинг форумов | Создать форум бесплатно