HTML Kontakt z Administracją

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

<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

.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: