Attention, le corps de votre forum doit faire 1000px au minimum. Tout d'abord, nous allons commencer par installer le HTML. Allez dans Panneau d'administration > Affichage > Page d'accueil > Généralités, puis copiez collez le code suivant :

Code:

<div class="fondPA">
<div class="gauche"><h1>CONTEXTE</h1>
  <div class="bloct">Quisque viverra, sapien non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, metus at peQuisque viverra, sapien non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, Quisque viverra, sapien non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, llentesque semper, purus nisi semper justo, eu laoreet metus justo ac metus. Aenean vel facilisis orci. Integer non arcu arcu. Vestibulum molestie leo vel nulla faucibus aliquet. Donec placerat ultricies urna et eleifend. Duis volutpat dictum enim. Quisque nec est eros. Pellentesque id elit congue leo posuere ullamcorper. Aliquam erat volutpat. Proin vel orci dui. Quisque malesuada quis risus in condimentum. Sed nec eros orci.  
</div></div>
<div class="gauche"><h1>NEWS</h1>
<div class="bloct">Quisque viverra, sapien non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, Quisque viverra, sapien non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, Quisque  non ornare dictum, mauris odio hendrerit sem, vel malesuada metus augue eget leo. Nullam turpis nulla, varius id ipsum a, finibus mollis lacus. In ante magna, semper id ipsum vel, aliquam feugiat enim. Quisque ullamcorper orci nulla, eu ornare tortor euismod non. Nulla augue lacus, consequat nec consequat sit amet, placerat quis sapien. Quisque eu maximus nisi. Quisque nisi odio, ultricies vel tempor non, luctus eu quam. Duis pretium metus ex, id sagittis leo ullamcorper non. Cras placerat laoreet leo vestibulum porta. Quisque faucibus, ipsum sit amet venenatis malesuada, nibh neque laoreet sapien, a tincidunt dui quam quis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tellus ligula, posuere eget magna ut, ullamcorper pharetra diam.
Suspendisse condimentum, metus at pellentesque semper, purus nisi semper justo, eu laoreet metus justo ac metus. Aenean vel facilisis orci. Integer non arcu arcu. Vestibulum molestie leo vel nulla faucibus aliquet. Donec placerat ultricies urna et eleifend. Duis volutpat dictum enim. Quisque nec est eros. Pellentesque id elit congue leo posuere ullamcorper. Aliquam erat volutpat. Proin vel orci dui. Quisque malesuada quis risus in condimentum. Sed nec eros orci.  
</div></div>

<div class="autourblok">
<div class="S2" style="background-image:url(https://imgur.com/Z1dZXFK.png)">
<div class="S3">
<span style="font-size:30px;font-family:calibri;">STAFFEUX OU PREDEF</span><br />
<div class="icone"><a href="/"><span class="sf sf-user"></span></a></div>
<div class="icone"><a href="/"><span class="sf sf-envelope-1"></span></a></div>
</div></div>

<div class="S2" style="background-image:url(https://imgur.com/Z1dZXFK.png)">
<div class="S3">
<span style="font-size:30px;font-family:calibri;">NOM STAFFEUX</span><br />  
<div class="icone"><a href="/"><span class="sf sf-user"></span></a></div>
<div class="icone"><a href="/"><span class="sf sf-envelope-1"></span></a></div>
</div></div>

<div class="S2" style="background-image:url(https://imgur.com/Z1dZXFK.png)">                                                            
<div class="S3">
<span style="font-size:30px;font-family:calibri;">NOM STAFFEUX</span><br />  
<div class="icone"><a href="/"><span class="sf sf-user"></span></a></div>
<div class="icone"><a href="/"><span class="sf sf-envelope-1"></span></a></div>
</div>
</div></div>

<div class="topparto">
  <div class="toppy"><a href="/"><img src="https://imgur.com/dOqKcmV.png"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
  <div class="toppy"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div></div></div>

Ensuite, il faut rajouter le CSS. Pour cela, allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS puis copiez collez le code suivant :

Code:

.fondPA {
  width:1180px;
  margin:0 auto;
  padding:10px;
}
.gauche {
  padding:5px;
  display:inline-block;
  vertical-align:top;
  width:538px;
  margin:20px;
}
.gauche h1 {
  width:520px;
  padding:10px;
  border-bottom:solid 2px black;
  color:black;
  font:30px Roboto;
  font-weight:700;
  text-align:left;
}
.bloct {
  height:200px;
  width:530px;
  overflow:auto;
  font:15px caibri;
  text-align:justify;
  font-weight:700;
}
.autourblok {
  text-align:center;
}
.S2 {
    width: 320px;
    height: 90px;
    display: inline-block;
    margin: 5px;
    background-position:50%;
    border:5px solid black;
    overflow: hidden;
    transition:all 800ms;
}
.S3 {
    background:rgba(66, 9, 8, 0.5);
    color:#b11f1f;
    padding-top: 5px;
    height: 85px;
    width: 320px;
    font-size: 9px;
    font-family: calibri;
    opacity:0;
    transform: scale(2,2);
  transition:all 800ms;
}
.S2:hover .S3 {
  opacity:1;
    transition:0.4s linear;
    transform: scale(1,1);
}
.icone {
  display:inline-block;
  vertical-align:top;
  margin:10px;
}
.icone a {
  color:#b11f1f;
  font-size:35px;
  position:relative;
  top:-10px;
}
.topparto {
  width:1160px;
  background:black;
  padding:10px;
}
.toppy {
  display:inline-block;
  margin:2px;
}
.toppy img {
  width:50px;
  height:50px;
  transition:1s linear;
  filter:grayscale(70%);
}
.toppy img:hover {
  transition:1s linear;
  filter:grayscale(0%);
}

Pour afficher les icônes, rendez-vous dans Panneau d'administration > Affichage > Templates > Général > Overall_header après la balise {CSS} :

Code:

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">