страница https://skeletonhysteria.rusff.me/pages/news-generator

[html]<style>
        .news-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            height: 821px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 5px 5px 40.4px -13.43px #00000040;
            background: url(https://forumstatic.ru/files/001c/7c/fa/33886.jpg) no-repeat center/cover;
            display: flex;
            flex-direction: column;
            padding-bottom: 40px;
        }

        .news-header {
            width: 100%;
            height: 82px;
            padding: 20px 30px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #8b4e49;
            color: #eeeeed;
            position: relative;
        }

        .news-header img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            left: calc(50% - 50px);
        }

        .news-title {
            font-family: "Rennie", sans-serif;
            text-transform: uppercase;
            font-size: 24px;
        }

        .news-date {
            font-size: 13px;
        }

        .news-summary {
            font-size: 11px;
            flex-basis: 40%;
        }

        .news-summary span {
            font-style: italic;
        }

        .news-content {
            width: calc(100% - 40px);
            height: calc(100% - 82px);
            flex-grow: 1;
            padding: 70px 40px 20px 40px;
            box-sizing: border-box;
            background: #f7f7f5;
            margin: 0 auto;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .news-text-middle {
            display: flex;
            justify-content: end;
            align-items: center;
            width: calc(100% + 60px);
        }

        .news-text-middle-image {
            flex-grow: 1;
            text-align: center;
        }

        .news-text-middle-image img {
            height: 72px;
        }

        .news-text-middle-highlight {
            background: #8b4e49;
            color: #eeeeed;
            display: inline-block;
            width: 80%;
            max-width: 80%;
            min-height: 74px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .news-text-bottom {
            flex-grow: 1;
            overflow: auto;
        }

        .news-text-goodbye {
            text-align: right;
            text-transform: uppercase;
            font-family: "Rennie", sans-serif;
            font-size: 20px;
            width: 100%;
        }
    </style>
    <div class="news-container">
        <div class="news-header">
            <div class="news-title">
                Больничный лист #1
                <div class="news-date">23.09.2025</div>
            </div>
            <img src="/img/avatars/001c/7c/fa/2-1757898473.png" alt="" class="header-logo">
            <div class="news-summary">
                <strong>В этом выпуске: </strong>
                <span>что на самом деле добавляют в компот в столовой, новые записи из заброшенного корпуса и список гостей, которые "выздоровели" навсегда. Не пропустите!</span>
            </div>
        </div>

        <div class="news-content">
            <div class="news-text-top">
                <p>Здравствуйте!</p>
<p>Мы рады <strong>приветствовать </strong>всех отдыхающих. Старшая медсестра уже рассказала о новеньких в ординаторской, а также расстроила патологоанатома тем, что к нему никто не записался. Психолог уже готов выслушать ваши истории и выписать противотревожные препараты, а в игровых комнатах вас ждут развлечения.</p>
            </div>
            <div class="news-text-middle">
                <div class="news-text-middle-image">
                    <img src="https://forumstatic.ru/files/001c/7c/fa/81621.png" alt="" class="content-image">
                </div>
                <div class="news-text-middle-highlight">
                    <p style="text-align: center;">Текст выделения</p>
                </div>
            </div>
            <div class="news-text-bottom">
                <p>Main content goes <a href="google.com" target="_blank" rel="noopener">here</a></p>
            </div>
            <div class="news-text-goodbye">
                До следующей встречи...                       
            </div>
        </div>
    </div>[/html][hideprofile]