Шаблон:Тест
Материал из Протест.wiki
<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>
