Меню
Автор:
Фильтры
Что нового
РЕКЛАМА

Изменить внешний вид ресурсов

S

Steve Fox

Участник
OLD SkripTers
Релизеры
Проверенные
Регистрация
17 Дек 2019
Сообщения
1,081
Реакции
164
Добрый день!

Моя задача изменить внешний вид ресурсов, изменить его, примерно как на скриншоте. Как возможно такое реализовать?
 

Вложения

  • [XenForo.Info]_1763362174528.png
    [XenForo.Info]_1763362174528.png
    101.3 КБ · Просмотры: 31
Steve Fox сказал(а):
Добрый день!

Моя задача изменить внешний вид ресурсов, изменить его, примерно как на скриншоте. Как возможно такое реализовать?
Нажмите, чтобы раскрыть...
Ну явно это делать через html и css как еще то, ну если конечно это не на каком нибудь vue сделано.
 
например так
Код: 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моды и дополнения</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            line-height: 1.4;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .mods-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .mod-card {
            background: #2d2d30;
            border-radius: 4px;
            padding: 16px;
            border-left: 4px solid #007acc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .mod-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }

        .mod-header {
            margin-bottom: 12px;
        }

        .mod-title {
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 4px;
        }

        .mod-subtitle {
            font-size: 14px;
            color: #cccccc;
            margin-bottom: 2px;
        }

        .mod-version {
            font-size: 13px;
            color: #9cdcfe;
        }

        .mod-author {
            font-size: 12px;
            color: #6a9955;
            margin-bottom: 8px;
        }

        .mod-category {
            display: inline-block;
            background: #464647;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            color: #cccccc;
            margin-bottom: 10px;
        }

        .mod-description {
            color: #d4d4d4;
            margin-bottom: 12px;
            font-size: 13px;
        }

        .mod-stats {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #858585;
            border-top: 1px solid #3e3e42;
            padding-top: 10px;
        }

        .mod-ratings, .mod-downloads, .mod-updated {
            display: flex;
            align-items: center;
        }

        /* Адаптивность для планшетов */
        @media (max-width: 1024px) {
            .mods-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Адаптивность для мобильных устройств */
        @media (max-width: 768px) {
            .mods-grid {
                grid-template-columns: 1fr;
            }
            
            .mod-card {
                padding: 14px;
            }
            
            body {
                padding: 15px;
            }
        }

        /* Для очень маленьких экранов */
        @media (max-width: 480px) {
            .mod-stats {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .mod-title {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="mods-grid">
            <!-- Карточка 1 -->
            <div class="mod-card">
                <div class="mod-header">
                    <div class="mod-title">ВСЗ</div>
                    <div class="mod-subtitle">Тransmog</div>
                    <div class="mod-version">Enhanced / Улучшенная трансмогия 1.1.2</div>
                    <div class="mod-author">Sadorimatsu - Вчера в 09:41</div>
                    <span class="mod-category">Геймплей</span>
                </div>
                <div class="mod-description">
                    Позволяет изменить внешний вид практически любого снаряжения, включая снаряжение от модов.
                </div>
                <div class="mod-stats">
                    <div class="mod-ratings">оценок - 0</div>
                    <div class="mod-downloads">Скачиваний: 0</div>
                    <div class="mod-updated">Обновлено: Вчера в 09:41</div>
                </div>
            </div>

            <!-- Карточка 2 -->
            <div class="mod-card">
                <div class="mod-header">
                    <div class="mod-title">ВСЗ</div>
                    <div class="mod-subtitle">Arsipsik's Collection / Коллекция Arsipsik's</div>
                    <div class="mod-version">1.3.0</div>
                    <div class="mod-author">Sadorimatsu - Суббота в 17:17</div>
                    <span class="mod-category">Оружие, броня и одежда</span>
                </div>
                <div class="mod-description">
                    Новое снаряжение и оружие.
                </div>
                <div class="mod-stats">
                    <div class="mod-ratings">оценок - 0</div>
                    <div class="mod-downloads">Скачиваний: 0</div>
                    <div class="mod-updated">Обновлено: Суббота в 17:17</div>
                </div>
            </div>

            <!-- Карточка 3 -->
            <div class="mod-card">
                <div class="mod-header">
                    <div class="mod-title">Elden Ring Item and Enemy Randomizer</div>
                    <div class="mod-version">0.11.4</div>
                    <div class="mod-author">All_Sagor - 27.09.2023</div>
                    <span class="mod-category">Elden Ring</span>
                </div>
                <div class="mod-description">
                    Рандомизирует боссов, врагов и предметы, включая ключевые предметы и ассортимент магазинов.
                </div>
                <div class="mod-stats">
                    <div class="mod-ratings">оценок - 0</div>
                    <div class="mod-downloads">Скачиваний: 218</div>
                    <div class="mod-updated">Обновлено: Пятница в 12:59</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
 
Для ответа нужно войти/зарегистрироваться
Верх