Учёт твинков

Страница: 1

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

Поделиться12024-04-26 11:20:26

Автор: Верховный
RAISON D’ETRE
Личное звание: Великий Разум Возраст: бесконечностьСтрана: ВселеннаяРод деятельности: Отец Сущего
Уважение: +19
Последний визит:
2025-06-03 23:00:21

[html]<style>
.custom-html-container {
width: 100%;
height: auto;
overflow: auto;
}

.table-container {
width: 100%;
border: none;
}

.table-container td {
padding: 8px;
border: none;
text-align: center;
vertical-align: middle; /* Центрируем по вертикали */
height: auto;
word-wrap: break-word;
}

.table-container .table-header {
background-color: #171b1c;
color: #c9c5b8;
font-family: Arial Black;
font-size: 16px;
text-align: center;
}

.table-container .twinks {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap; /* Для мобильных устройств */
}

.twink-item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100px;
height: auto;
width: 80px; /* Ограничиваем ширину каждого элемента */
margin: 5px; /* Добавляем отступы между элементами */
}

.twink-image {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 50%;
cursor: pointer;
background-size: cover;
}

.twink-name {
font-style: italic;
margin-top: 5px;
font-size: 10px;
font-weight: normal;
}

@media (max-width: 540px) {
.table-container .twinks {
flex-direction: column; /* Вертикальная ориентация на маленьких экранах */
align-items: center;
}

.twink-item {
width: 100%; /* Растягиваем на всю ширину */
}

.twink-name {
font-size: 12px; /* Можно чуть увеличить текст */
}
}
</style>

<div class="custom-html-container">
<div class="table-container">
<table style="width:100%">
<col style="width:30%">
<col style="width:70%">
<tr>
<td class="table-header" colspan="1">Главный аккаунт</td>
<td class="table-header" colspan="2">Твинки</td>
</tr>
<tr>
<td class="main-account" style="text-align: center;">
<div class="twink-item" style="display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100px;"> 
<a href="https://rndetre.rusff.me/profile.php?id=3">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Главный персонаж</div>
</div>
</td>
<td class="twinks">
<div class="twink-item">
<a href="ссылка2">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Персонаж 1</div>
</div>
<div class="twink-item">
<a href="ссылка3">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Персонаж 2</div>
</div>
<div class="twink-item">
<a href="ссылка4">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Персонаж 3</div>
</div>
<div class="twink-item">
<a href="ссылка5">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Персонаж 4</div>
</div>
<div class="twink-item">
<a href="ссылка6">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
</a>
<div class="twink-name">Персонаж 5</div>
</div>
</td>
</tr>
</table>
</div>
</div>
[/html]

КОД НА ДОБАВЛЕНИЕ ВПЕРВЫЕ С ОДНИМ ТВИНКОМ

Код:

[html]<style>
  .custom-html-container {
    width: 100%;
    height: auto;
    overflow: auto;
  }

  .table-container {
    width: 100%;
    border: none;
  }

  .table-container td {
    padding: 8px;
    border: none;
    text-align: center;
    vertical-align: middle; /* Центрируем по вертикали */
    height: auto;
    word-wrap: break-word; 
  }

  .table-container .table-header {
    background-color: #171b1c;
    color: #c9c5b8;
    font-family: Arial Black;
    font-size: 16px;
    text-align: center;
  }

  .table-container .twinks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; /* Для мобильных устройств */
  }

  .twink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
    height: auto;
    width: 80px; /* Ограничиваем ширину каждого элемента */
    margin: 5px; /* Добавляем отступы между элементами */
  }

  .twink-image {
    width: 70px;
    height: 70px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
  }

  .twink-name {
    font-style: italic;
    margin-top: 5px;
    font-size: 10px;
    font-weight: normal;
  }

  @media (max-width: 540px) {
    .table-container .twinks {
      flex-direction: column; /* Вертикальная ориентация на маленьких экранах */
      align-items: center;
    }

    .twink-item {
      width: 100%; /* Растягиваем на всю ширину */
    }

    .twink-name {
      font-size: 12px; /* Можно чуть увеличить текст */
    }
  }
</style>

<div class="custom-html-container">
  <div class="table-container">
    <table style="width:100%">
      <col style="width:30%">
      <col style="width:70%">
      <tr>
        <td class="table-header" colspan="1">Главный аккаунт</td>
        <td class="table-header" colspan="2">Твинки</td>
      </tr>
      <tr>
        <td class="main-account" style="text-align: center;">
          <div class="twink-item" style="display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100px;"> <!-- Добавлено для центрирования -->
            <a href="ССЫЛКА НА ПРОФИЛЬ ГЛАВНОГО ПЕРСОНАЖА">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕ)"></div>
            </a>
            <div class="twink-name">ИМЯ ГЛАВНОГО ПЕРСОНАЖА</div>
          </div>
        </td>
        <td class="twinks">
          <div class="twink-item">
            <a href="ССЫЛКА НА ПРОФИЛЬ ПЕРСОНАЖА 1">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕ)"></div>
            </a>
            <div class="twink-name">ИМЯ ПЕРСОНАЖА 1</div>
          </div>
       <!-- Добавляем ещё ячеек с новой строки-->

        </td>
      </tr>
    </table>
  </div>
</div>
[/html]

КОД НА ДОБАВЛЕНИЕ ДОПОЛНИТЕЛЬНЫХ ТВИНОВ
вставляем после фразы  столько раз, сколько нужно ячеек. Код обязательно должен закрывать [/html]

Код:

          <div class="twink-item">
            <a href="ССЫЛКА НА ПРОФИЛЬ ПЕРСОНАЖА 2/3/4 И Т.Д.">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕТ)"></div>
            </a>
            <div class="twink-name">ИМЯ ПЕРСОНАЖА 2/3/4 И Т.Д.</div>
          </div>

Поделиться22024-10-19 00:39:35

Автор: Хеммет Эргала
пархай как бабочка жаль что вчера
Личное звание: Жуж Возраст: 17Страна: Империя АзгарРод деятельности: наследник дома Эргала, алакирХодит бросит, всех бесит и все его бесят, особенно одну звезду

Уважение: +286

Последний визит:
Сегодня 13:36:48

[html]<style>
.custom-html-container {
width: 100%;
height: auto;
overflow: auto;
}

.table-container {
width: 100%;
border: none;
}

.table-container td {
padding: 8px;
border: none;
text-align: center;
vertical-align: middle; /* Центрируем по вертикали */
height: auto;
word-wrap: break-word;
}

.table-container .table-header {
background-color: #171b1c;
color: #c9c5b8;
font-family: Arial Black;
font-size: 16px;
text-align: center;
}

.table-container .twinks {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap; /* Для мобильных устройств */
}

.twink-item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100px;
height: auto;
width: 80px; /* Ограничиваем ширину каждого элемента */
margin: 5px; /* Добавляем отступы между элементами */
}

.twink-image {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 50%;
cursor: pointer;
background-size: cover;
}

.twink-name {
font-style: italic;
margin-top: 5px;
font-size: 10px;
font-weight: normal;
}

@media (max-width: 540px) {
.table-container .twinks {
flex-direction: column; /* Вертикальная ориентация на маленьких экранах */
align-items: center;
}

.twink-item {
width: 100%; /* Растягиваем на всю ширину */
}

.twink-name {
font-size: 12px; /* Можно чуть увеличить текст */
}
}
</style>

<div class="custom-html-container">
<div class="table-container">
<table style="width:100%">
<col style="width:30%">
<col style="width:70%">
<tr>
<td class="table-header" colspan="1">Главный аккаунт</td>
<td class="table-header" colspan="2">Твинки</td>
</tr>
<tr>
<td class="main-account" style="text-align: center;">
<div class="twink-item" style="display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100px;"> <!-— Добавлено для центрирования -->
<a href="https://rndetre.rusff.me/profile.php?id=3">
<div class="twink-image" style="background-image:url(https://upforme.ru/uploads/001c/0c/35/3/741684.jpg)"></div>
</a>
<div class="twink-name">Хеммет Эргала</div>
</div>
</td>
<td class="twinks">
<div class="twink-item">
<a href="https://rndetre.rusff.me/profile.php?id=6">
<div class="twink-image" style="background-image:url(https://i.pinimg.com/736x/ed/c9/4d/edc9 … e7d820.jpg);
margin-top: 0px; /* опускайте или поднимайте (-10px) изображение на 10 пикселей"></div>
</a>
<div class="twink-name">Иштар Азран</div>
</div>
<!-— Добавляем ещё ячеек с новой строки-->

</td>
</tr>
</table>
</div>
</div>
[/html]

0

Страница: 1

Raison d’etre

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

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

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

Учёт твинков

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

Поделиться12024-04-26 11:20:26

Поделиться22024-10-19 00:39:35