Page d'accueil #1

aka artedelamuerte

Codes

La maquette est de Hanyo Yurikin sur EPICODE Merci de la créditer également !

HTML à insérer dans Affichage > Page d'Accueil > Généralités

Code:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,500&display=swap" />
<div class="page_accueil_ls1">

<h1>

<div>
   <img alt="shuriken" src="https://zupimages.net/up/19/29/ko6g.png" />
</div>
   Naruto : Ninja Blades
</h1>

<h2>
   <span>Naruto RolePlay Forum</span>
</h2>

<div class="contexte_accueil">
   <span>Histoire du <strong>rpg</strong></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ex erat. Proin posuere eros vel sagittis facilisis. Nunc ac bibendum justo. Proin tristique velit eu erat pellentesque, id aliquet sapien ultrices. Ut eget nibh enim. Nunc interdum, sem hendrerit pharetra maximus, sapien arcu euismod quam, feugiat eleifend velit elit eget turpis. Sed ullamcorper sagittis risus a consectetur. Aenean ac lectus varius, dictum nunc vel, tempus nisi.
</p>

</div>

<div class="staff_accueil_ls1">

<h3>
   Ninja Family <span>staff du forum</span>
</h3>

<div class="staff_hover">
   <img alt="icon du staff" src="https://zupimages.net/up/19/29/wqrf.jpg" />
<div>
   Nom Prénom <a target="_blank" href="#">Mp</a>
</div>

</div>

<div class="staff_hover">
   <img alt="icon du staff" src="https://zupimages.net/up/19/29/wqrf.jpg" />
<div>
   Nom Prénom <a target="_blank" href="#">Mp</a>
</div>

</div>

<div class="staff_hover">
   <img alt="icon du staff" src="https://zupimages.net/up/19/29/wqrf.jpg" />
<div>
   Nom Prénom <a target="_blank" href="#">Mp</a>
</div>

</div>

<div class="staff_hover">
   <img alt="icon du staff" src="https://zupimages.net/up/19/29/wqrf.jpg" />
<div>
   Nom Prénom <a target="_blank" href="#">Mp</a>
</div>

</div>

</div>

<div class="navig_accueil_ls1">
   <a target="_blank" href="#">Lien</a> <a target="_blank" href="#">Lien</a> <a target="_blank" href="#">Lien</a> <a target="_blank" href="#">Lien</a> <a target="_blank" href="#">Lien</a> <a target="_blank" href="#">Lien</a>
</div>

<div class="predefinis_ls1">
   <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a> <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a> <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a> <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a> <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a> <a target="_blank" href="#"><img alt="image du prédefini" src="https://zupimages.net/up/19/29/ukne.jpg" /></a>
</div>

<div class="events_ls1">

<h4>
   Event <span>Hear ye, hear ye !</span> <img alt="event image" src="https://zupimages.net/up/19/29/9skh.png" />
</h4>

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ex erat.
</p>

</div>

<div class="partos_ls1">
   <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a> <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a> <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a> <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a> <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a> <a target="_blank" href="#"><img alt="icon du partenaire" src="http://via.placeholder.com/88x31" /></a>
<div class="credits_epicode">
   artemis & hanyo | <a href="https://artifices.forumactif.com/">www</a>
</div>

</div>
</div>

CSS :

Code:: /*************************** PAGE D'ACCUEIL - ARTEMIS - ARTIFICES ***************************/
:root {--color-background-black: #131313;
--color-background-white: #FFFFFF;
--color-background-red: #cd2f30;}

.page_accueil_ls1 {
  width: 850px;
  height: 385px;
  background: #dedede;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding: 15px;
  position: relative;
}

.page_accueil_ls1 > h1 {
  width: 318px;
  height: 75px;
  background: var(--color-background-black);
  margin: 0;
  color: white;
  font: 16px oswald;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding: 27px 10px 0 60px;
  position: relative;
  line-height: 18px;


}

.page_accueil_ls1 > h1 > div {
  background: var(--color-background-red);
  width: 52px;
  height: 52px;
  -webkit-transform:rotate(50deg);
   -ms-transform:rotate(50deg);
   transform:rotate(50deg);
  position: absolute;
  top: 11px;
  left: 5px;
}

.page_accueil_ls1 > h1 > div > img {
  width: 60px;
  height: 60px;
  -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
  margin-left: -3px;
  margin-top: -3px;
}

.page_accueil_ls1 > h2 {
  width: 495px;
  height: 75px;
  background: url(https://zupimages.net/up/19/29/8zr1.jpg);
  background-size: 100%;
  background-position: bottom center;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding-top: 18px;
  font: 20px oswald;
  text-transform: uppercase;
  line-height: 40px;

}

.page_accueil_ls1 > h2 > span {
  display: block;
  width: 310px;
  height: 40px;
  background: rgba(251,251,251,0.5);
  margin: 0 auto;
}

.contexte_accueil {
  width: 335px;
  height: 145px;
  background: var(--color-background-black);
  color: white;
  font: 13px calibri;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding: 5px 15px;
  text-align: justify;
  line-height: 11px;
  margin: 8px 0;
}

.contexte_accueil > p {
  width: 100%;
  height: 100px;
  overflow: auto;
  margin: 0;
  text-align: justify;
  color: white;
  font: 13px calibri;
  line-height: 11px;
}

.contexte_accueil span {
  width: 100%;
  display: block;
  text-align: center;
  font: 17px oswald;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;


}

.contexte_accueil span strong {
  font-weight: normal;
  color: var(--color-background-red);
  font-style: italic;
}

.staff_accueil_ls1 {
  width: 295px;
  height: 145px;
  background: var(--color-background-white);
  margin: 8px 0 0 -10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
  -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;

}

.staff_accueil_ls1 > h3 {
  margin: 0;
  width: 100%;
  font: 35px oswald;
  text-transform: uppercase;
  color: var(--color-background-red);
  text-align: center;

}

.staff_accueil_ls1 > h3 > span {
  display: block;
  font: 14px oswald;
  color: var(--color-background-black);
  margin-top: -10px;

}

.staff_hover {
  width: 70px;
  height: 70px;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  border: 5px solid var(--color-background-red);
  position: relative;
  margin: 1px;
}

.staff_hover img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
   object-fit: cover;
}

.staff_hover > div {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  color: white;
  font: 16px oswald;
  text-transform: uppercase;
  text-align: center;
  line-height: 15px;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding-top: 5px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

}

.staff_hover > div > a {
  dispplay: block;
  color: white;
  font: 11px oswald;
  text-decoration: none;
}

.staff_hover:hover > div {
  visibility: visible;
  opacity: 1;
}

.navig_accueil_ls1 {
  width: 180px;
  height: 145px;
  background: #eeeeee;
  margin-top: 8px;
  text-align: center;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 5px;
}

.navig_accueil_ls1 > a {
  display: block;
  width: 160px;
  height: 18px;
  background: var(--color-background-red);
  margin: auto;
  color: var(--color-background-black);
  text-decoration: none;
  text-transform: uppercase;
  font: 11px arial;
  font-weight: bold;
  margin-bottom: 3px;
  line-height: 19px;
}

.navig_accueil_ls1 a:nth-of-type(2n+1) {
  background: var(--color-background-black);
  color: white;
}

.predefinis_ls1 {
  width: 445px;
  height: 70px;
  background: var(--color-background-red);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding-top: 7px;
}

.predefinis_ls1 img {
  width: 50px;
  height: 50px;
  border: 3px solid var(--color-background-white);
  margin: 0 3px;
}

.events_ls1 {
  width: 370px;
  background: var(--color-background-black);
  height: 70px;
}

.events_ls1 > h4 {
  width: 145px;
  float: left;
  position: relative;
  color: var(--color-background-red);
  font: 32px oswald;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.events_ls1 > h4 > span {
  display: block;
  color: white;
  font: 12px calibri;
  text-transform: lowercase;
  margin-top: -5px;
  z-index: 1;
  position: relative;
  text-align: center;
}

.events_ls1 > h4 > img {
  width: 50px;
  -webkit-filter: grayscale(1);
   filter: grayscale(1);
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 0;
}

.events_ls1 > p {
  width: 200px;
  height: 50px;
  background: var(--color-background-white);
  float: right;
  margin: 10px;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  font: 11px calibri;
  color: var(--color-background-black);
  box-sizing: border-box;
  padding: 3px;
  text-transform: uppercase;
  overflow: auto;
  text-align: justify;
}

.partos_ls1 {
  width: 100%;
  height: 42px;
  background: #eeeeee;
  margin-top: 8px;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
  padding: 5px;
}

.partos_ls1 img {
  margin: 0 2px;
}

.credits_epicode {
  font: 10px calibri;
  color: black;
  text-transform: uppercase;
  position: absolute;
  right: 2px;
  bottom: 0;
  opacity: 0.7;
}

.credits_epicode > a {
  text-decoration: none;
  color: black;
}

/!\ Note : Pour modifier les couleurs rouges, noires et blanches, vous n'avez qu'à changer le code couleur dans les variables qui se trouvent au tout début du CSS.

Code:: :root {--color-background-black: #131313;
--color-background-white: #FFFFFF;
--color-background-red: #cd2f30;}

En cas de soucis avec ce code, laissez-moi un petit message ici ! c:

» Page d'accueil #2
» Page d'accueil #3