On va commencer par aller mettre les polices d'écritures. Dans Affichage > Templates > Général > Overall_header, juste après la balise {CSS} qui est presque au tout début du template. Copiez coller les polices d'écritures puis enregistrez, et n'oubliez pas de valider le template !

Code:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Le HTML est directement à mettre dans votre panneau d'administration > Affichage > Généralité.

Code:

<div class="lapalol">
<div class="powerblok">
<div class="titleblok"><span>❝</span> Contexte <b>❞</b></div>
<div class="bloktxt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius quis arcu ac commodo. Praesent at viverra nulla, eu varius ex. Pellentesque ultrices, turpis sagittis lobortis tempor, eros erat condimentum tellus, non eleifend risus metus id lacus. Aliquam faucibus aliquam ante, vel iaculis justo viverra fermentum. Nulla dignissim in tortor sit amet condimentum. Etiam enim magna, pharetra et massa malesuada, cursus tincidunt enim. Pellentesque blandit justo tristique orci fermentum porta. Sed vehicula nunc vel sem pellentesque, et finibus est feugiat. Maecenas mollis massa hendrerit, gravida massa sed, laoreet lectus. Donec ligula est, hendrerit eget bibendum ac, porta ac ante. Donec mollis nulla sit amet lacus tempor dictum. Duis ac nulla felis. Sed elementum non mauris et suscipit. Donec pellentesque auctor ligula tincidunt aliquam. Nunc quis arcu ultricies, ultricies ipsum eu, venenatis justo.

Praesent eu tincidunt ipsum. Ut gravida sodales massa, ut scelerisque nisl vestibulum eu. Nam consequat lorem vel suscipit molestie. Nullam tempus tincidunt lectus ut luctus. Nunc pharetra libero et odio euismod, et ornare magna fringilla. Phasellus non porta orci. Donec id justo mauris. Sed pellentesque tortor sed ligula porttitor, a consectetur ligula condimentum. Nam sit amet est nec lectus vestibulum molestie. Aenean vel urna est. Nam et rhoncus neque. Cras suscipit, dolor vitae vehicula sollicitudin, odio nisl maximus nunc, lobortis volutpat ligula nibh id tortor. Proin laoreet nibh non commodo efficitur. Nunc euismod nisi ac urna blandit, a imperdiet leo aliquam. Fusce vehicula imperdiet libero sit amet volutpat. Praesent pulvinar porttitor augue.</div></div>
<div class="powerblok">
<div class="lastrp"><a href="/">demande de rp</a></div>
<div class="lastrp"><a href="/">demande de rp</a></div>
<div class="sep"></div>
<div class="tetepredef"><a href="/"><img src="http://placehold.it/60x60/"></a></div>
<div class="tetepredef"><a href="/"><img src="http://placehold.it/60x60/"></a></div>
<div class="tetepredef"><a href="/"><img src="http://placehold.it/60x60/"></a></div>
<div class="tetepredef"><a href="/"><img src="http://placehold.it/60x60/"></a></div></div>

<div class="powerblok">
<div class="lescredits">Page d'accueil réalisée par <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>. Merci de ne pas copier le coder ou ne pas retirer le crédit.</div>
<div class="sep"></div>
<center><div class="topsite">
<a href="/"><img src="https://imgur.com/osuG9gz.png"/></a></div>
<div class="topsite"><a href="/"><img src="https://imgur.com/osuG9gz.png"/></a></div>
<div class="topsite"><a href="/"><img src="https://imgur.com/osuG9gz.png"/></a></div>
  <div class="lastphr">Tu votes toutes les deux heures stp biz</div>
</center></div></div>


<center><div class="lesnews"><span>jun. 2018</span>
Vivamus scelerisque convallis cursus. Duis tellus nibh, gravida eget ipsum a Nam malesuada eu justo non tempor.</br>
<span>jun. 2018</span>
Vivamus scelerisque convallis cursus. Duis tellus nibh, gravida eget ipsum a Nam malesuada eu justo non tempor.</br>
<span>jun. 2018</span>
Vivamus scelerisque convallis cursus. Duis tellus nibh, gravida eget ipsum a Nam malesuada eu justo non tempor.
</div></center>

<center><div class="Selene"><div class="Jim">
<div class="benito">membre du mois</div>
<a href="/" class="beni">→ Par ici</a></div>
<div class="Jim"><div class="benito">rp du mois</div>
 <a href="/" class="beni">→ Par ici</a></div></div></center>

LE CSS :

Code:

 .lapalol {
    width:900px;
    padding:10px;
    background:rgba(0, 0, 0, 0.6);
    margin:0 auto;
    border:solid 15px black;
  }
.powerblok {
  width:295px;
  display:inline-block;
  height:250px;
  margin:1px;
  vertical-align:top;
}
.titleblok{
  position: relative;
  z-index:1;
  padding:2px 6px;
  overflow:hidden;
  background: linear-gradient(-90deg,#000000,#762dcf);
  color:white;
  padding:15px;
  text-align:center;
  font-size:11px;
  font-family:calibri;
  text-transform:uppercase;
  letter-spacing:6px;
}
.titleblok:after {
  position: absolute;
  top:0; bottom: 0;
  right: 0; left: 0;
  display: block;
  background-color:#762dcf;
  content: "";
  transform: translate3d(100%,0,0);
  z-index:-1;
}
.titleblok:hover:after {
  transform: translate3d(-98%,0,0);
  transition: transform 1.1s cubic-bezier(0.41, 0.9, 0, 1);
}
.titleblok:hover{
  color: #fff!important;
}
.titleblok span {
  color: white;
  font-size: 25px;
  padding:5px;
}
.titleblok b {
  color: white;
  font-size: 25px;
  padding:5px;
  position:relative;
  top:20px;
}
.bloktxt {
  color:black;
  overflow:auto;
  text-align:justify;
  height:150px;
  padding:15px;
  line-height:14px;
  font-family:calibri;
  font-size:12px;
}
.Selene {
    border: 1px solid #0a0a0a;
    width: 928px;
    margin:0 auto;
    padding: 10px;
    height: 150px;
    background-image: url(http://placehold.it/928x150/.png);
}
.Jim {
    width: 220px;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.59);
    margin: 40px 5px;
    display: inline-block;
}
.benito {
    font-size: 30px;
    font-family: source sans pro;
    color: black;
    letter-spacing: -2px;
    font-weight: bold;
}
a.beni {
    font-size: 10px;
    display: block;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid #B0B0B0;
    padding-top: 5px;
    margin-top: 5px;
    color: #000;
    transition: 1s linear;
    text-decoration: none;
}
.sep {
  height:2px;
  width:80%;
  margin:0 auto;
  background:black;
  position:relative;
  top:8px;
}
.lastrp{
  position: relative;
  z-index:1;
  padding:10px;
  margin:8px;
  overflow:hidden;
  background:rgba(0, 0, 0, 0.6);
  border:9px solid black;
  display:block;
  text-align:center;
}
.lastrp a {
  text-decoration:none;
  color:#ccc;
  font-family:montserrat;
  text-transform:uppercase;
  font-size:12px;
  }
.lastrp:after {
  position: absolute;
  top:0; bottom: 0;
  right: 0;left: 0;
  display: block;
  background-color:#762dcf;
  content: "";
  transform: translate3d(-101%,0,0);
  z-index:-1;
  transition: transform .8s cubic-bezier(0.11, 0.7, 0, 1);
}
.lastrp:hover {
  color: #fff!important;
}
.lastrp:hover:after {
  transform: translate3d(0,0,0);
}
.tetepredef {
  display:inline-block;
  margin:2px;
  position:relative;
  top:30px;
  left:2px;
}
.tetepredef img {
  height:60px;
  width:60px;
  border:solid 3px black;
  transition:all 800ms;
}
.tetepredef img:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%) contrast(200%);
  opacity: 0.9;
  transition: .7s;
}
.lescredits {
  padding:10px;
  border:2px solid #eaeaea;
  width:80%;
  margin:18px;
  font-size:10px;
  font-family:calibri;
  color:#eaeaea;
  text-align:justify;
}
.lesnews {
  width:910px;
  padding:20px;
  background:black;
  color:#eaeaea;
  text-align:justify;
  font-size:12px;
  font-family:calibri;
}
.lesnews span {
  padding:3px;
  background:#762dcf;
  font-size:10px;
  margin:5px;
}
.topsite {
  display:inline-block;
  position:relative;
  top:45px;
}
.topsite img {
  width:50px;
  transition:all 800ms;
  filter:grayscale(70%);
}
.topsite img:hover {
  transform:scale(1.1);
  transition:all 800ms;
}
.lastphr {
  color:#eaeaea;
  font-size:10px;
  font-family:calibri;
  position:relative;
  top:50px;
}