- Апр
- 103
- 19
Пользователь
By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!.xf-blackspb-header {
background: #0f0f1a;
color: #e0e0e0;
padding: 20px;
border-radius: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.xf-blackspb-header__top {
margin-bottom: 16px;
}
.xf-blackspb-header__logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.5px;
}
.xf-blackspb-header__subtitle {
font-size: 13px;
color: #888;
margin: 4px 0 0 32px;
}
.xf-blackspb-header__actions {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.xf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
}
.xf-btn--primary {
background: #9b59b6;
color: #fff;
}
.xf-btn--primary:hover {
background: #8e44ad;
transform: translateY(-1px);
}
.xf-btn--neutral {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.xf-btn--neutral:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
}
.xf-blackspb-header__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.xf-stat-card {
background: rgba(255, 255, 255, 0.06);
padding: 12px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #d0d0d0;
}
.xf-stat-card strong {
color: #fff;
font-size: 18px;
line-height: 1.1;
}
.xf-stat-icon {
font-size: 18px;
display: block;
}
@media (max-width: 900px) {
.xf-blackspb-header {
padding: 16px;
}
.xf-blackspb-header__subtitle {
margin-left: 32px;
font-size: 12px;
}
.xf-blackspb-header__actions {
flex-wrap: wrap;
}
}
<div class="xf-blackspb-header">
<div class="xf-blackspb-header__top">
<div class="xf-blackspb-header__logo">
<span class="xf-blackspb-icon">💬</span>
<strong>BLACK SPB</strong>
</div>
<p class="xf-blackspb-header__subtitle">Community platform by XenForo®</p>
</div>
<div class="xf-blackspb-header__actions">
<a href="/whats-new" class="xf-btn xf-btn--primary">
<span class="xf-icon">⚡</span> Что нового
</a>
<a href="/search" class="xf-btn xf-btn--neutral">
<span class="xf-icon">🔍</span> Поиск
</a>
<a href="/rss" class="xf-btn xf-btn--neutral">
<span class="xf-icon">📡</span> RSS
</a>
</div>
<div class="xf-blackspb-header__stats">
<div class="xf-stat-card">
<span class="xf-stat-icon">📂</span>
<div class="xf-stat-text">Разделов<br><strong>2</strong></div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🗺️</span>
<div class="xf-stat-text">Форумы</div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🌐</span>
<div class="xf-stat-text">Страница<br>Обзор</div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🔥</span>
<div class="xf-stat-text">Активность<br>Live</div>
</div>
</div>
</div>
<div class="xf-blackspb-header">
<div class="xf-blackspb-header__top">
<div class="xf-blackspb-header__logo">
<span class="xf-blackspb-icon">💬</span>
<strong>BLACK SPB</strong>
</div>
<p class="xf-blackspb-header__subtitle">Community platform by XenForo®</p>
</div>
<div class="xf-blackspb-header__actions">
<a href="/whats-new" class="xf-btn xf-btn--primary">
<span class="xf-icon">⚡</span> Что нового
</a>
<a href="/search" class="xf-btn xf-btn--neutral">
<span class="xf-icon">🔍</span> Поиск
</a>
<a href="/rss" class="xf-btn xf-btn--neutral">
<span class="xf-icon">📡</span> RSS
</a>
</div>
<div class="xf-blackspb-header__stats">
<div class="xf-stat-card">
<span class="xf-stat-icon">📂</span>
<div class="xf-stat-text">Разделов<br><strong>2</strong></div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🗺️</span>
<div class="xf-stat-text">Форумы</div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🌐</span>
<div class="xf-stat-text">Страница<br>Обзор</div>
</div>
<div class="xf-stat-card">
<span class="xf-stat-icon">🔥</span>
<div class="xf-stat-text">Активность<br>Live</div>
</div>
</div>
</div>
<xf:css>
.xf-blackspb-header {
background: #0f0f1a;
color: #e0e0e0;
padding: 20px;
border-radius: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.xf-blackspb-header__top {
margin-bottom: 16px;
}
.xf-blackspb-header__logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.5px;
}
.xf-blackspb-header__subtitle {
font-size: 13px;
color: #888;
margin: 4px 0 0 32px;
}
.xf-blackspb-header__actions {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.xf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
}
.xf-btn--primary {
background: #9b59b6;
color: #fff;
}
.xf-btn--primary:hover {
background: #8e44ad;
transform: translateY(-1px);
}
.xf-btn--neutral {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.xf-btn--neutral:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
}
.xf-blackspb-header__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.xf-stat-card {
background: rgba(255, 255, 255, 0.06);
padding: 12px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #d0d0d0;
}
.xf-stat-card strong {
color: #fff;
font-size: 18px;
line-height: 1.1;
}
.xf-stat-icon {
font-size: 18px;
display: block;
}
@media (max-width: 900px) {
.xf-blackspb-header {
padding: 16px;
}
.xf-blackspb-header__subtitle {
margin-left: 32px;
font-size: 12px;
}
.xf-blackspb-header__actions {
flex-wrap: wrap;
}
}
</xf:css>