Hello everyone!
I'd like to share a minimalist Hall of Fame page that I created for Flarum.
It is compatible with both FoF Pages and Advanced Pages, and the page is built entirely with HTML + CSS, making it easy to install, customize and maintain.
Features
- 🏆 Clean minimalist design
- 📱 Fully responsive
- 🌙 Compatible with both Light & Dark themes
- 🎨 Automatically adapts to your forum's theme colors
- 👤 User profile buttons
- 🏅 Multiple Hall of Fame sections
- ⭐ Honor Code section with Font Awesome icons
- ⚡ No JavaScript required
- 🛠️ Easy to customize
Compatibility
- ✅ Flarum
- ✅ FoF Pages
- ✅ Advanced Pages
- ✅ Compatible with any theme using CSS variables
Live Demo
https://triforce.totalh.net/p/fama
Installation
FoF Pages
FoF Pages only supports HTML, so simply copy the complete code below (HTML + CSS together) and paste it into your page.
Advanced Pages
Paste the HTML into the page content and the CSS into the page stylesheet.
CSS
/* =====================================
TRIFORCE - SALÓN DE LA FAMA
===================================== */
.tf-hof-wrapper {
max-width:950px;
margin:0 auto;
padding:35px 15px;
font-family:'Poppins',sans-serif;
color:var(--body-color);
--tf-accent:var(--primary-color);
--tf-card:var(--body-bg);
--tf-border:var(--control-bg);
}
/* =====================================
RESET
===================================== */
.tf-hof-wrapper *,
.tf-hof-wrapper *::before,
.tf-hof-wrapper *::after {
box-sizing:border-box;
}
/* =====================================
CABECERA
===================================== */
.tf-hof-header {
text-align:center;
margin-bottom:55px;
}
.tf-hof-icon {
width:75px;
height:75px;
margin:0 auto 20px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--tf-accent);
border-radius:50%;
color:var(--tf-accent);
font-size:32px;
}
.tf-hof-title {
margin:0!important;
font-size:40px!important;
font-weight:800!important;
text-transform:uppercase;
color:var(--heading-color)!important;
}
.tf-hof-desc {
max-width:650px;
margin:15px auto 0!important;
color:var(--muted-color);
line-height:1.7;
font-size:15px;
}
/* =====================================
TITULOS
===================================== */
.tf-hof-section {
margin-top:55px;
}
.tf-hof-section-title {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:0 0 30px!important;
font-size:20px!important;
font-weight:700!important;
text-transform:uppercase;
letter-spacing:.5px;
color:var(--heading-color)!important;
}
.tf-hof-section-title::before,
.tf-hof-section-title::after{
content:"";
flex:1;
height:1px;
background:var(--control-bg);
}
.tf-hof-section-title i{
color:var(--primary-color);
font-size:18px;
}
/* =====================================
GRID
===================================== */
.tf-hof-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}
/* =====================================
TARJETA
===================================== */
.tf-hof-card{
background:var(--tf-card);
border:1px solid var(--control-bg);
border-radius:4px;
overflow:hidden;
}
.tf-hof-cover{
height:65px;
background:var(--control-bg);
}
/* =====================================
AVATAR
===================================== */
.tf-hof-avatar{
margin-top:-40px;
text-align:center;
}
.tf-hof-avatar img{
width:85px;
height:85px;
object-fit:cover;
object-position:center;
border-radius:50%;
border:4px solid var(--body-bg);
image-rendering:auto;
}
/* =====================================
CONTENIDO
===================================== */
.tf-hof-content{
padding:20px 25px 30px;
text-align:center;
}
.tf-hof-name{
margin:0!important;
font-size:26px!important;
font-weight:700!important;
color:var(--heading-color)!important;
}
.tf-hof-quote{
margin:15px 0!important;
color:var(--muted-color);
font-size:14px;
line-height:1.7;
font-style:italic;
}
/* =====================================
DATOS
===================================== */
.tf-hof-info{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:20px;
}
.tf-hof-item{
padding:12px;
background:var(--control-bg);
border-radius:4px;
}
.tf-hof-label{
display:block;
font-size:10px;
text-transform:uppercase;
color:var(--muted-color);
font-weight:700;
}
.tf-hof-value{
font-size:13px;
font-weight:600;
color:var(--heading-color);
}
/* =====================================
BOTÓN PERFIL
===================================== */
.tf-hof-wrapper .Button.Button--primary{
margin-top:25px;
}
.tf-hof-wrapper .Button.hasIcon{
display:inline-flex;
align-items:center;
justify-content:center;
}
.tf-hof-wrapper .Button-icon{
margin-right:8px;
}
.tf-hof-wrapper .Button.Button--primary,
.tf-hof-wrapper .Button.Button--primary .Button-label,
.tf-hof-wrapper .Button.Button--primary .Button-labelText,
.tf-hof-wrapper .Button.Button--primary .Button-icon{
color:#000!important;
}
.tf-hof-wrapper .Button.Button--primary:hover,
.tf-hof-wrapper .Button.Button--primary:hover .Button-label,
.tf-hof-wrapper .Button.Button--primary:hover .Button-labelText,
.tf-hof-wrapper .Button.Button--primary:hover .Button-icon{
color:#000!important;
}
/* =====================================
CÓDIGO DE HONOR
===================================== */
.tf-hof-rules{
display:grid;
gap:14px;
}
.tf-hof-rule{
display:flex;
align-items:flex-start;
gap:16px;
padding:18px;
background:var(--body-bg);
border:1px solid var(--control-bg);
border-radius:4px;
transition:border-color .2s ease,
background .2s ease;
}
.tf-hof-icon-box{
width:44px;
height:44px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:var(--control-bg);
border:1px solid var(--control-bg);
border-radius:4px;
}
.tf-hof-icon-box i{
font-size:18px;
line-height:1;
}
.tf-hof-rule-title{
margin-bottom:5px;
font-size:15px;
font-weight:700;
letter-spacing:.2px;
color:var(--heading-color);
}
.tf-hof-rule-desc{
color:var(--muted-color);
font-size:14px;
line-height:1.6;
}
/* =====================================
PALETA ICONOS
===================================== */
.tf-fire{
color:#b83b14;
}
.tf-gold{
color:#ffb000;
}
.tf-gem{
color:#00d4ff;
}
.tf-bronze{
color:#cd7f32;
}
.tf-emerald{
color:#2ecc71;
}
.tf-sapphire{
color:#3498db;
}
.tf-obsidian{
color:#7f8c8d;
}
/* =====================================
FOOTER
===================================== */
.tf-hof-footer{
margin-top:45px;
padding-top:25px;
border-top:1px solid var(--control-bg);
text-align:center;
color:var(--muted-color);
font-size:13px;
}
.tf-hof-footer i{
color:var(--primary-color);
margin-right:6px;
}
/* =====================================
MOBILE
===================================== */
@media(max-width:768px){
.tf-hof-title{
font-size:28px!important;
}
.tf-hof-section-title{
font-size:18px!important;
}
.tf-hof-section-title::before,
.tf-hof-section-title::after{
display:none;
}
.tf-hof-grid{
grid-template-columns:1fr;
}
.tf-hof-info{
grid-template-columns:1fr;
}
.tf-hof-rule{
padding:16px;
}
.tf-hof-icon-box{
width:40px;
height:40px;
}
}
/* =====================================
ADVANCED PAGES
===================================== */
.AdvancedPages-hero{
padding:10px 0!important;
}
.AdvancedPages-hero .Hero-title{
font-size:22px!important;
}
HTML
<div class="tf-hof-wrapper">
<header class="tf-hof-header">
<div class="tf-hof-icon">
<i class="fas fa-trophy"></i>
</div>
<h1 class="tf-hof-title">
Salón de la Fama
</h1>
<p class="tf-hof-desc">
Un reconocimiento reservado para aquellas personas cuya dedicación,
compromiso y contribuciones han dejado una huella permanente en la
historia de Triforce.
</p>
</header>
<!-- ===============================
FUNDADOR
================================ -->
<section class="tf-hof-section">
<h2 class="tf-hof-section-title">
<i class="fas fa-crown"></i>
Fundador
</h2>
<div class="tf-hof-grid">
<article class="tf-hof-card tf-hof-featured">
<div class="tf-hof-cover"></div>
<div class="tf-hof-avatar">
<img src="/assets/salon/MrLaviana1.webp"
alt="MrLaviana1"
loading="lazy"
decoding="async">
</div>
<div class="tf-hof-content">
<h3 class="tf-hof-name">
MrLaviana1
</h3>
<p class="tf-hof-quote">
"Triforce (2011-2026) construyendo el futuro sobre el pasado."
</p>
<div class="tf-hof-info">
<div class="tf-hof-item">
<span class="tf-hof-label">
Fundación
</span>
<span class="tf-hof-value">
10 Nov 2011
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Estado
</span>
<span class="tf-hof-value">
Activo
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Cargo
</span>
<span class="tf-hof-value">
Administrador
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Reconocimiento
</span>
<span class="tf-hof-value">
Permanente
</span>
</div>
</div>
<a href="/u/mrlaviana1" class="Button Button--primary hasIcon">
<i aria-hidden="true" class="icon fas fa-user Button-icon"></i>
<span class="Button-label">
<span class="Button-labelText">
Ver perfil
</span>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- ===============================
CHRONOS
================================ -->
<section class="tf-hof-section">
<h2 class="tf-hof-section-title">
<i class="fas fa-feather-alt"></i>
Colaborador Especial
</h2>
<div class="tf-hof-grid">
<article class="tf-hof-card">
<div class="tf-hof-cover"></div>
<div class="tf-hof-avatar">
<img src="/assets/salon/Chronos.webp"
alt="Chronos"
loading="lazy"
decoding="async">
</div>
<div class="tf-hof-content">
<h3 class="tf-hof-name">
Chronos
</h3>
<p class="tf-hof-quote">
"Moderando el tiempo y el espacio a través de la red."
</p>
<div class="tf-hof-info">
<div class="tf-hof-item">
<span class="tf-hof-label">
Rol
</span>
<span class="tf-hof-value">
Mascota Oficial
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Estado
</span>
<span class="tf-hof-value">
Activo
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Especialidad
</span>
<span class="tf-hof-value">
Comunidad
</span>
</div>
<div class="tf-hof-item">
<span class="tf-hof-label">
Reconocimiento
</span>
<span class="tf-hof-value">
Honorífico
</span>
</div>
</div>
<a href="/u/chronos" class="Button Button--primary hasIcon">
<i aria-hidden="true" class="icon fas fa-user Button-icon"></i>
<span class="Button-label">
<span class="Button-labelText">
Ver perfil
</span>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- ===============================
LEYENDAS
================================ -->
<section class="tf-hof-section">
<h2 class="tf-hof-section-title">
<i class="fas fa-star"></i>
Leyendas
</h2>
<div class="tf-hof-grid">
<article class="tf-hof-card">
<div class="tf-hof-cover"></div>
<div class="tf-hof-avatar">
<img src="/assets/salon/Triforce.webp"
alt="Triforce"
loading="lazy"
decoding="async">
</div>
<div class="tf-hof-content">
<h3 class="tf-hof-name">
Próximamente
</h3>
<p class="tf-hof-quote">
Reconocimiento para miembros que hayan marcado la historia de Triforce.
</p>
<div class="tf-hof-info">
<div class="tf-hof-item">
<span class="tf-hof-label">
Estado
</span>
<span class="tf-hof-value">
Disponible
</span>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- ===============================
HONORÍFICOS
================================ -->
<section class="tf-hof-section">
<h2 class="tf-hof-section-title">
<i class="fas fa-medal"></i>
Miembros Honoríficos
</h2>
<div class="tf-hof-grid">
<article class="tf-hof-card">
<div class="tf-hof-cover"></div>
<div class="tf-hof-content">
<h3 class="tf-hof-name">
Próximamente
</h3>
<p class="tf-hof-quote">
Personas cuyo apoyo y dedicación merecen un lugar permanente dentro de Triforce.
</p>
</div>
</article>
</div>
</section>
<!-- ===============================
CÓDIGO DE HONOR
================================ -->
<section class="tf-hof-section">
<h2 class="tf-hof-section-title">
<i class="fas fa-shield-alt"></i>
Código de Honor
</h2>
<div class="tf-hof-rules">
<div class="tf-hof-rule">
<div class="tf-hof-icon-box tf-gold">
<i class="fas fa-gem"></i>
</div>
<div>
<div class="tf-hof-rule-title">
Contribución excepcional
</div>
<div class="tf-hof-rule-desc">
Aportar de forma significativa al crecimiento, evolución y futuro de Triforce mediante acciones que dejen una huella duradera.
</div>
</div>
</div>
<div class="tf-hof-rule">
<div class="tf-hof-icon-box tf-emerald">
<i class="fas fa-users"></i>
</div>
<div>
<div class="tf-hof-rule-title">
Compromiso con la comunidad
</div>
<div class="tf-hof-rule-desc">
Ayudar a otros miembros, compartir conocimientos y fomentar un ambiente acogedor y participativo.
</div>
</div>
</div>
<div class="tf-hof-rule">
<div class="tf-hof-icon-box tf-sapphire">
<i class="fas fa-handshake"></i>
</div>
<div>
<div class="tf-hof-rule-title">
Valores de Triforce
</div>
<div class="tf-hof-rule-desc">
Actuar siempre con respeto, compañerismo, honestidad y espíritu de colaboración.
</div>
</div>
</div>
<div class="tf-hof-rule">
<div class="tf-hof-icon-box tf-bronze">
<i class="fas fa-star"></i>
</div>
<div>
<div class="tf-hof-rule-title">
Ejemplo para la comunidad
</div>
<div class="tf-hof-rule-desc">
Ser una referencia positiva mediante la actitud, el comportamiento y la participación constante.
</div>
</div>
</div>
<div class="tf-hof-rule">
<div class="tf-hof-icon-box tf-fire">
<i class="fas fa-crown"></i>
</div>
<div>
<div class="tf-hof-rule-title">
Distinción exclusiva
</div>
<div class="tf-hof-rule-desc">
El acceso al Salón de la Fama es una distinción permanente concedida exclusivamente por la administración de Triforce.
</div>
</div>
</div>
</div>
</section>
<footer class="tf-hof-footer">
<i class="fas fa-trophy"></i>
El Salón de la Fama representa el máximo reconocimiento otorgado por la comunidad de Triforce.
</footer>
</div>
Preview
I hope this page is useful for other Flarum administrators.
Feedback and suggestions are always welcome.
