Чистовик уже не за горами, я бы даже сказал - ближе, чем вам кажется,
но скучать вам в ожидании все равно не позволю хд
Решил подкинуть вам бинго, в котором все ячейки кликабельные - клацаете по ним, делаете скрин и публикуете на всеобщее обозрение 
За участие всем разнесу по соточке!
[html]<style>
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 10px;
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
        }

        .card {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: 1px solid #000;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .card.with-image {
            background-image: url("https://upforme.ru/uploads/001c/bd/c6/4/624984.jpg");
            background-size: cover;
            background-position: center;
        }

        .card-text {
            position: relative;
            z-index: 2;
            padding: 6px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
            text-align: center;
            line-height: 1.3;
        }

        .card.with-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            pointer-events: none;
            z-index: 1;
        }

        .card.with-image.active::before {
            background: rgba(255, 255, 255, 0.85);
        }

        .card.with-image.active .card-text {
            color: #000;
            text-shadow: none;
        }
</style>
<div class="cards-grid">
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Люблю больше флудить, чем писать посты</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Ненавижу писать анкеты</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">У персонажа проблемы с головой</span></div>

        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Инцест - дело семейное</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Люблю кросспол</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Я твинковод</span></div>

        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Лучше пост на 4к, чем на 10к</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">В семье персонажа обязательно кто-то умер</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Отыгрывал смерть своего персонажа </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Играю только гет </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Отвечал на пост в течение часа </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Зашел на 5 минут - флудил весь день </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Два часа смотрел на чистый лист, но так ничего и не  написал </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Случайно стирал написанный пост </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Искал соигрока без идей на эпизоды</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Играю только слэш/фемслэш </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Соигрок уходил из-за задержки поста </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">В ответ на большой пост получил микропостик </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Нашел хорошего друга на ролевых </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Люблю подбирать картинки и музыку для постов </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Брал перерыв от форумов </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Стыдно подробно расписывать нцу </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Гуглил синонимы для слов, избегая тавтологию   </span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Обычно первопост за мной</span></div>
        <div class="card with-image" onclick="this.classList.toggle('active')"><span class="card-text">Молча уходил с форумов </span></div>
</div>[/html]