Webboard

Też dodam coś od siebie ;P. Taki prosty kontakt

HTML

Style i Szablony > Szablony > Twój szablon > Strona główna > index i wrzucasz do sidebaru

Kod:
<div class="tborder">

 <div class="thead"><i class="fas fa-user-cog"></i> Administracja</div>

 <div class="bg-cont">

 <!-- WLASCICIELE // -->

 <div class="c_t">

 <div class="rank-style"><div class="rank-margin"><span class="wl">Właściciel</span></div>

 <div class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></div>

 <div class="user-style"><a href="#"><span class="wl"><i class="fab fa-black-tie"></i> uPster</span></a></div>

 <div class="c-style">

 <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 

 <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 

 <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>

 </div>

 </div> 

 </div>

 <div class="c_t">

 <div class="rank-style"><div class="rank-margin"><span class="ha">Head Admin</span></div>

 <span class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></span>

 <div class="user-style"><a href="#"><span class="ha"><i class="fas fa-briefcase"></i> uPster</span></a></div>

 <div class="c-style">

 <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 

 <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 

 <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>

 </div> 

 </div> 

 </div>

 <div class="c_t">

 <div class="rank-style"><div class="rank-margin"><span class="ja">Junior Administrator</span></div>

 <span class="c-avatar"><a href="#"><img src="https://i.imgur.com/Eabt0gg.png" class="c_img"></a></span>

 <div class="user-style"><a href="#"><span class="ja"><i class="fas fa-bullhorn"></i> uPster</span></a></div>

 <div class="c-style">

 <a href="#"><i class="fas fa-envelope fa-sz-st"></i></a> 

 <a href="#"><i class="fab fa-steam fa-sz-st padd-cont"></i></a> 

 <a href="#"><i class="fab fa-gg fa-sz-st"></i></a>

 </div>

 </div> 

 </div> 

 </div>

 </div>

CSS

Style i Szablony > Style > Twój styl > stwórz nowy arkusz lub wklej np. do global.css

Kod:
.bg-cont {

    background: #1d1d1d;

    padding: 25px 15px;

}

.c_t {

    padding: 5px;

    font-size: 14px;

}

.rank-style {

    text-align: center;

    font-size: 16px;

    padding: 10px;

    background: #514a4a3b;

    border-radius: 5px;

}

.rank-margin {

 margin-bottom: 15px;

}

.c-avatar {

    text-align: center;

    width: 100%;

    display: block;

    padding-bottom: 10px;

}

.c_img {

    height: 70px;

    width: 70px;

    border-radius: 50%;

    border: 1px solid #413d3d;

}

.user-style {

    text-align: center;

    font-size: 14px;

}

.c-style {

    text-align: center;

    font-size: 15px;

    padding-top: 5px;

}

.fa-sz-st {

    font-size: 1.3em;

    color: #c2c2c2;

}

.padd-cont {

    padding-left: 10px;

    padding-right: 10px;

}

Efekt:

tyraNt