[html]

<style type="text/css" scoped>
        .theme * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .theme {
            width: 97%;
            display: grid;
            gap: 20px;
            grid-template-columns: 50% 50%;
            grid-template-rows: min-content;
        }

        .theme-part {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            border: 1px solid white;
            border-radius: 20px;
            height: 680px;
            overflow-y: scroll;
        }

        .image-part {
            background: url("https://i.ibb.co/fQNLd2P/1-FDD32-EE-F736-4911-86-D5-BE1-A486-D6-BC8.jpg") center no-repeat;
            background-size: cover;
            overflow-y: scroll;
        }

        .image-part::-webkit-scrollbar {
            display: none;
        }

        .theme-message-list {
            height: calc(100% - 20px);
            margin: 10px;
            overflow-y: scroll;
        }

        .theme-message-list::-webkit-scrollbar {
            width: 5px;
            height: 90%;
            background-color: rgba(0, 12, 30, 0.7);
        }

        .theme-part::-webkit-scrollbar {
            display: none;
        }

        .message-part-wrapper {
            padding: 20px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .theme-message-list::-webkit-scrollbar-thumb {
            background-color: white;
            height: 20px;
        }

        h4.theme-header {
            color: rgb(207, 87, 132);
            text-transform: uppercase;
            font: 1.8em Roboto;
            font-weight: 300;
        }

        .theme-header span {
            font-weight: 700;
            color: white;
        }

        .theme-welcome-text {
            font-size: 135%;
            color: white;
            margin-bottom: 20px;
        }

        .theme-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .theme-element {
            display: block;
            width: 100%;
            position: relative;

        }

        .theme-element:last-child {
            margin: 0;
        }

        .theme-element-link {
            display: block;
            width: 100%;
            height: 60px;
            padding: 0.3em 0 0px 2.5em;
            background: url(https://i.ibb.co/Mp5vLL9/38061.png) left no-repeat;
            text-transform: uppercase;
            font-size: 2em;
            color: rgb(207, 87, 132);
            font-family: Roboto;
            text-decoration: none;
        }

        .theme-element:hover>.theme-element-link {
            background: url("https://i.ibb.co/q54YRmJ/56591.png") left no-repeat;
            color: rgb(202, 134, 159);
        }

        .theme-message {
            font-size: 140%;
            color: white;
            background: rgba(0, 12, 30, 0.7);
            border-radius: 20px;
            margin: 10px !important;
            padding: 10px !important;
        }

        .theme-message-close {
            display: block;
            text-align: right;
        }

        .theme-message-close:hover {
            cursor: pointer;
        }

        .template-messages {
            display: none;
        }

        @media (max-width: 750px) {
            .theme {
                width: 100%;
                display: grid;
                gap: 10px;
                padding: 5px;
                grid-template-columns: calc(100% - 10px);
                grid-template-rows: minmax(240px, auto);
            }

            .image-part {
                background: url("https://i.ibb.co/0cZmZdk/guest-theme-topic.jpg") center no-repeat;
                background-size: cover;
                max-height: 240px;
            }

            h4.theme-header {
                font-size: 1.4em;
            }

            .message-part {
                padding: 10px;
            }

            .message-text {
                font-size: 1.2em;
                margin-bottom: 10px;
            }

            .theme-element-link {
                padding: 0.5em 0 0px 2.5em;
                font-size: 1.7em;
                display: block;
            }

            .theme-element:hover>.theme-element-link {
                background: url("https://i.ibb.co/q54YRmJ/56591.png") left no-repeat;
            }

        }

        @media (max-width: 450px) {
            .theme {
                grid-template-rows: minmax(160px, auto);
                background-size: 100%;
            }

            .image-part {
                max-height: 190px;
            }
        }
    </style>

    <div class="theme">
        <div class="theme-part image-part">
            <ul class="theme-message-list">

            </ul>
        </div>
        <div class="theme-part message-part">
            <div class="message-part-wrapper">
                <h4 class="theme-header">
                    From: <span>Dispatcher</span> <br> Re: <span>Приветственное сообщение </span><br><br> Message:
                </h4>
                <p class="theme-welcome-text">Добро пожаловать в Делириум, Гость!
                    <br>
                    Я Диспетчер, здешний всезнайка. Прежде, чем гуглить вопрос, прочти несколько тем, которые я
                    прикрепил к
                    сообщению.
                </p>
                <ul class="theme-list">
                    <li class="theme-element">
                        <a href="#" class="theme-element-link">Правила</a>
                    </li>
                    <li class="theme-element">
                        <a href="#" class="theme-element-link">Внешность</a>
                    </li>
                    <li class="theme-element">
                        <a href="#" class="theme-element-link">Описание</a>
                    </li>
                    <li class="theme-element">
                        <a href="#" class="theme-element-link">Админы</a>
                    </li>
                </ul>
            </div>
        </div>

        <ul class="template-messages">
            <li class="theme-message-element">
                <p class="theme-message theme-rules"><span tabindex="1" class="theme-message-close">X</span>
                    Самое главное правило нашей компании: <b>"Don't be a dick, Dick"</b>. <br><br>Все остальное - в
                    рамках
                    здравого смысла. Администрация оставляет за собой право утверждать свой здравый смысл на
                    территории Делириума, но не слишком часто и максимально нежно.
                </p>
            </li>
            <li class="theme-message-element">
                <p class="theme-message theme-appearance"><span tabindex="1" class="theme-message-close">X</span>
                    Коротко: <b>должны быть в стиле нашего заведения.</b> <br><br>
                    Мы предпочитаем рисованные внешности. Это авторский мир, в котором видеть унылые 3d
                    мордашки, которые наблюдаем каждый день, нам не хочется. Что не означает, что нельзя брать
                    реальный
                    прототип для роли. Просто придерживайтесь общей стилистики оформления форума. <br><br>
                    Размер аватарки у нас фиксированный и она обязательно должна быть квадратной формы. Неквадратные
                    аватарки будут становиться равносторонними принудительно по алгоритму одного ленивого
                    программиста. Результат может вас не порадовать. Чтобы обрезать, изменить размер картинки
                    достаточно Пеинта или онлайн ресурсов, таких как, например, <a href="https://www.iloveimg.com/"
                        style="color: rgb(207, 87, 132); font-weight: 700;">ILOVEIMG</a>.
                </p>
            </li>
            <li class="theme-message-element">
                <p class="theme-message theme-plot"><span tabindex="1" class="theme-message-close">X</span>
                    <b>Жанр:</b> сай-фай, городское фентези, постапок, немного кибер-панк<br>
                    <b>Сюжет:</b>
                    На планете из известных нам остался всего 1 город, мегаполис Делириум. Катаклизмы на планете
                    сделали погоду за его пределами практически невозможной для выживания, внутри все еще действуют
                    механизмы ее подавления. Даже нормальное
                    атмосферное давление изменилось настолько, что человечество вынуждено было изобрести 5 видов
                    прививок, которые позволяют ускорить крайне медленный процесс эволюции для выживания. Звучит
                    знакомо? Хм...
                </p>
            </li>
            <li class="theme-message-element">
                <p class="theme-message theme-admin"><span tabindex="1" class="theme-message-close">X</span>
                    Диспетчер Алиса: автор мира и форума.
                </p>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        const theme = document.querySelector('.theme');
        const themeLinks = theme.querySelectorAll('.theme-element-link');
        const themeMessages = theme.querySelectorAll('.theme-message');
        const themeMessagesList = theme.querySelector('.theme-message-list');
        const closeButtons = theme.querySelectorAll('.theme-message-close');
        let toggler = [false, false, false, false];
        for (let i = 0; i < themeLinks.length; i++) {
            themeLinks[i].addEventListener('click', (evt) => {
                evt.preventDefault();
                const message = themeMessages[i].cloneNode(true);
                if (!toggler[i]) {
                    themeMessagesList.insertAdjacentElement('afterbegin', message);
                    const close = message.querySelector('.theme-message-close');
                    close.addEventListener('click', () => {
                        themeMessagesList.removeChild(message);
                        toggler[i] = !toggler[i];
                    }, true);
                    console.log(toggler[i]);
                    toggler[i] = !toggler[i];
                }
            });
        }
    </script>
[/html]

Теги: Гостевая,QandA