Шаблон:Тест: различия между версиями

Материал из Протест.wiki
Нет описания правки
Метка: отменено
Нет описания правки
Метка: отменено
Строка 1: Строка 1:
<div class="infobox">
<noinclude>
<style>
/* Общий контейнер инфобокса */
.infobox {
    display: flex;            /* Используем flexbox для правильного размещения */
    justify-content: flex-start; /* Размещение элементов слева */
    align-items: flex-start;    /* Выравнивание элементов по верхнему краю */
    border: 1px solid #ccc;    /* Рамка вокруг инфобокса */
    border-radius: 8px;        /* Округленные углы */
    padding: 10px;            /* Отступы внутри */
    background-color: #fafafa; /* Светлый фон */
    margin: 10px 0;            /* Отступы сверху и снизу */
    width: 300px;              /* Фиксированная ширина */
    box-sizing: border-box;    /* Чтобы padding не выходил за пределы ширины */
    float: right;              /* Позиционируем инфобокс справа */
    clear: both;              /* Очищаем возможные обтекания */
}


      <!-- Блок с изображением -->
/* Стили для изображения */
     <div class="infobox-image">
.infobox-image {
        <img src="{{{image}}}" alt="Image" class="infobox-image-content">
    margin-right: 15px;        /* Отступ справа от изображения */
     </div>
     flex-shrink: 0;            /* Не сжимаем изображение */
     <!-- Контент с краткой информацией -->
}
    <div class="infobox-content">
 
        <h3 class="infobox-title">{{{name}}}</h3>
.infobox-image img {
        <p><strong>Дата рождения:</strong> {{{birth_date}}}</p>
    width: 120px;              /* Ширина изображения */
        <p><strong>Место рождения:</strong> {{{birth_place}}}</p>
     height: auto;              /* Автоматическая высота */
        <p><strong>Гражданство:</strong> {{{nationality}}}</p>
     border-radius: 8px;        /* Округленные углы */
        <p><strong>Профессия:</strong> {{{occupation}}}</p>
    max-width: 100%;          /* Изображение не выходит за пределы контейнера */
        <p><strong>Активность:</strong> {{{years_active}}}</p>
}
        <p><strong>Супруга:</strong> {{{spouse}}}</p>
 
        <p><strong>Дети:</strong> {{{children}}}</p>
/* Стили для контента инфобокса */
        <p><strong>Вебсайт:</strong> <a href="{{{website}}}" target="_blank">{{{website}}}</a></p>
.infobox-content {
    </div>
    flex-grow: 1;              /* Контент растягивается на оставшееся место */
</div>
    font-size: 14px;          /* Размер шрифта */
    color: #333;              /* Цвет текста */
}
 
/* Заголовок инфобокса */
.infobox-title {
    font-size: 18px;          /* Размер шрифта заголовка */
    color: #0044cc;            /* Цвет текста заголовка */
    margin-bottom: 10px;      /* Отступ снизу */
}
 
/* Стили для параграфов */
.infobox-content p {
    margin: 5px 0;            /* Отступы между строками */
}
 
/* Стили для ссылок */
.infobox-content a {
    color: #0066cc;            /* Цвет ссылок */
    text-decoration: none;    /* Без подчеркивания */
}
 
.infobox-content a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}
</style>
</noinclude>

Версия от 01:58, 1 декабря 2024

<style> /* Общий контейнер инфобокса */ .infobox { 

   display: flex;             /* Используем flexbox для правильного размещения */
   justify-content: flex-start; /* Размещение элементов слева */
   align-items: flex-start;    /* Выравнивание элементов по верхнему краю */
   border: 1px solid #ccc;    /* Рамка вокруг инфобокса */
   border-radius: 8px;        /* Округленные углы */
   padding: 10px;             /* Отступы внутри */
   background-color: #fafafa; /* Светлый фон */
   margin: 10px 0;            /* Отступы сверху и снизу */
   width: 300px;              /* Фиксированная ширина */
   box-sizing: border-box;    /* Чтобы padding не выходил за пределы ширины */
   float: right;              /* Позиционируем инфобокс справа */
   clear: both;               /* Очищаем возможные обтекания */

}

/* Стили для изображения */ .infobox-image { 

   margin-right: 15px;        /* Отступ справа от изображения */
   flex-shrink: 0;            /* Не сжимаем изображение */

}

.infobox-image img { 

   width: 120px;              /* Ширина изображения */
   height: auto;              /* Автоматическая высота */
   border-radius: 8px;        /* Округленные углы */
   max-width: 100%;           /* Изображение не выходит за пределы контейнера */

}

/* Стили для контента инфобокса */ .infobox-content { 

   flex-grow: 1;              /* Контент растягивается на оставшееся место */
   font-size: 14px;           /* Размер шрифта */
   color: #333;               /* Цвет текста */

}

/* Заголовок инфобокса */ .infobox-title { 

   font-size: 18px;           /* Размер шрифта заголовка */
   color: #0044cc;            /* Цвет текста заголовка */
   margin-bottom: 10px;       /* Отступ снизу */

}

/* Стили для параграфов */ .infobox-content p { 

   margin: 5px 0;             /* Отступы между строками */

}

/* Стили для ссылок */ .infobox-content a { 

   color: #0066cc;            /* Цвет ссылок */
   text-decoration: none;     /* Без подчеркивания */

}

.infobox-content a:hover { 

   text-decoration: underline; /* Подчеркивание при наведении */

} </style>

Источник — https://protest.wiki/index.php?title=Шаблон:Тест&oldid=160