How can I create this

[fchampionleague]

How can I do this to my site 99vfx.com which nullcave did

 

[raz0r]

How can I do this to my site 99vfx.com which nullcave did
View attachment 44027

CSS:

.xfrmInfoList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.xfrmInfoList--2cols {
    justify-content: space-between;
}

.xfrmInfoList--2cols .xfrmInfoItem {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
}
.xfrmInfoItem {
    background: #fdfdfd;
    border-radius: 4px;
    padding: 10px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.xfrmInfoItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #63ba5f;
}
.xfrmInfoContent {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xfrmInfoLabel {
    font-weight: 600;
    color: #383b3d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.xfrmInfoValue {
    color: #383b3d;
    line-height: 1.4;
    word-wrap: break-word;
}
.xfrmInfoItem:nth-child(1) .xfrmInfoLabel,
.xfrmInfoItem:nth-child(2) .xfrmInfoLabel {
    color: #63ba5f;
}
@media (max-width: 500px) {
    .xfrmInfoList--2cols .xfrmInfoItem {
        flex: 1 1 100%;
    }

    .xfrmInfoList {
        flex-direction: column;
        gap: 15px;
    }
}

xfrm_resource_view

                    <div class="resourceSidebarGroup">
                        <ul class="xfrmInfoList xfrmInfoList--2cols">
                            <li class="xfrmInfoItem">
                                <div class="xfrmInfoContent">
                                    <span class="xfrmInfoLabel">Version</span>
                                    <span class="xfrmInfoValue">{$resource.CurrentVersion.version_string}</span>
                                </div>
                            </li>
                            <li class="xfrmInfoItem">
                                <div class="xfrmInfoContent">
                                    <span class="xfrmInfoLabel">Downloads</span>
                                    <span class="xfrmInfoValue">{$resource.download_count|number}</span>
                                </div>
                            </li>
                            <li class="xfrmInfoItem">
                                <div class="xfrmInfoContent">
                                    <span class="xfrmInfoLabel">Views</span>
                                    <span class="xfrmInfoValue">{{ max($resource.view_count, $resource.download_count, 1)|number }}</span>
                                </div>
                            </li>
                            <li class="xfrmInfoItem">
                                <div class="xfrmInfoContent">
                                    <span class="xfrmInfoLabel">Last Update</span>
                                    <span class="xfrmInfoValue"><xf:date time="{$resource.last_update}" /></span>
                                </div>
                            </li>
                            <li class="xfrmInfoItem">
                                <div class="xfrmInfoContent">
                                    <span class="xfrmInfoLabel">Rating</span>
                                    <span class="xfrmInfoValue"><xf:macro template="rating_macros" name="stars_text" arg-rating="{$resource.rating_avg}" arg-count="{$resource.rating_count}" arg-rowClass="ratingStarsRow--textBlock" /></span>
                                </div>
                            </li>
                        </ul>
                    </div>