Welcome

Halloween Administration

Hiérarchie Naruto

Halloween, LS codage Forumactif Fiches & Messages Administration Hiérarchie Naruto

Toutes versions

Optimisé Le rang s'affiche au survol de l'avatar du membre. Les trois factions sont insérées dans le css.
Pour changer les couleurs et les images des groupes, changer le nom de la class dans la partie HTML, côté "fiche_administrative organigramme suna" : remplacer le Suna par Konoha ou Kiri.

Retour

Codage hiérarchie Naruto Suna Halloween Forumactif

Codage hiérarchie Naruto Kiri Halloween Forumactif

Codage hiérarchie Naruto Konoha Halloween Forumactif

HTML

LEGENDE --><div class="orga_legende"><div class="legende_content"><img src="https://imgur.com/UdipnyM.png" alt="" /> Libre</div><div class="legende_content"><img src="https://imgur.com/7bKi0NL.png" alt="" />Réservé</div><div class="legende_content"><img src="https://imgur.com/VtbpuiI.png" alt="" /> Pris</div></div><!--

TITRE --><h4>Kage</h4><!--

KAGE --><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

TITRE --><h4>Conseil</h4><!--

CONSEIL --><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div class="orga_libre"><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div class="orga_reserve"><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

TITRE --><h4>Jonin</h4><!--

JONIN --><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

TITRE --><h4>Equipes</h4><!--

EQUIPES --><h5>Team 1</h5><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

--><h5>Team 2</h5><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

--><h5>Team 3</h5><div class="orga_content"><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div><div class="orga_bloc"><div class="orga_img"><div><img src="https://imgur.com/A1jDIF7.png" alt="" /></div>Nom Prénom</div><div class="orga_rang">Rang</div></div></div><!--

--></article></div> <footer> <div class="credit">halloween</div> </footer> </div>

CSS

:root {
    	--suna: #679669;
  	--kiri: #016de6;
  	--konoha: #c51b1b;
}

/************************** FICHES HIERARCHIQUES **************************/
.fiche_administrative {
        width: 650px;
        margin: auto;
        background: #fff;
        position: relative;
        font-family: 'Montserrat', sans-serif;
  	overflow: hidden;
}

.fiche_administrative header {
        background: url('https://i.imgur.com/gKJXN8M.png');
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.fiche_administrative header div {
        background: url('https://imgur.com/8gylqwu.png') no-repeat center;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
}

.fiche_administrative h2 {
        background: #000;
        border: 0;
        color: #fff;
        font-family: Staatliches, cursive;
        font-size: 50px;
        letter-spacing: 2px;
        margin: 20px 0 0;
        padding: 0 10%;
        display: flex;
        align-items: center;
        height: 70px;
        font-weight: normal;
}

.fiche_administrative h3 {
        border: 0;
        color: #fff;
        font-family: Montserrat, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        margin: 1.3% 0 0;
        text-shadow: 1px 1px #000;
        text-transform: uppercase;
}

.fiche_administrative .content {
        display: flex;
        width: 90%;
        margin: 8% auto;
}

.fiche_administrative .naruto {
        align-items: center;
        align-self: center;
        display: flex;
        font-family: Staatliches, cursive;
        font-size: 100px;
        height: 571px;
        justify-content: center;
        width: 180px;
        line-height: 1;
        margin: 0 -65px 0 0;
  	color: #000;
}

.fiche_administrative .contenu {
        border-left: 1px solid #dadada;
        padding: 2% 4% 10% 15%;
        background: #fff;
        width: 90%;
}

.block_noir {
        content: "";
        display: block;
        width: 80px;
        height: 170px;
        background: #000;
        position: absolute;
        bottom: 0;
}

.fiche_administrative .credit {
        align-items: center;
        background: #000;
        color: #fff;
        display: flex;
        font-family: Staatliches, cursive;
        font-size: 14px;
        height: 66px;
        justify-content: center;
        letter-spacing: 2px;
        position: relative;
        text-align: center;
        width: 80%;
        z-index: 1;
        flex-direction: column;
}

.fiche_administrative footer {
        display: flex;
        position: relative;
        width: 100%;
        margin: 15% 0 0 12%;
}

#credit_hallow {
        color: #f3f3f3;
        display: block;
        font-family: Staatliches, cursive;
        font-size: 10px;
}

/* GENERALITE DES PARTIES */
.suna header div {
  	background: url(https://imgur.com/J4RNhyr.png) no-repeat center;
  	background-size: cover;
}

.kiri header div {
    background: url(https://i.pinimg.com/originals/19/f9/cf/19f9cf51b8c03a4b574d1bc88003bb25.jpg) no-repeat center;
}

.konoha header div {
    background: url(https://i.pinimg.com/564x/f2/77/2a/f2772ac….jpg) no-repeat center;
    background-size: cover;
}

.orga_content {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, auto);
        grid-gap: 2rem;
        margin: 2em 0 4em;
        justify-content: center;
}

/* TITRES */
.organigramme h4 {
        font-family: 'Staatliches', cursive;
        font-weight: normal;
        font-size: 25px;
        background: #000;
        display: block;
        width: 150px;
        color: #fff;
        padding: 10px;
        text-align: center;
}

/* MISE EN FORME DE CHAQUE BLOC */
.orga_bloc {
        width: 120px;
        height: 140px;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        position: relative;
        text-align: center;
  	transition: .5s all;
}

/* Libre */
.orga_img .orga_libre {
        background: url(https://i.imgur.com/UdipnyM.png) no-repeat;
        background-size: contain;
}

.orga_img div {
        background: url(https://imgur.com/VtbpuiI.png) no-repeat;
  	display: flex;
        justify-content: center;
        align-items: center;
        background-size: contain;
        width: 120px;
        flex-direction: column;
        height: 120px;
  	transition: .5s all;
}

/* Reserve Suna */
.suna .orga_reserve {
        background: url('https://imgur.com/7bKi0NL.png') no-repeat;
}

.kiri .orga_reserve {
  	background: url('https://imgur.com/MfHg73K.png') no-repeat;
}

.konoha .orga_reserve {
  	background: url('https://imgur.com/WjhFZr9.png') no-repeat;
}

.suna .orga_img .orga_reserve,
.suna .orga_img .orga_libre,
.kiri .orga_img .orga_reserve,
.kiri .orga_img .orga_libre,
.konoha .orga_img .orga_reserve,
.konoha .orga_img .orga_libre {
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: contain;
        width: 120px;
        flex-direction: column;
        height: 120px;
  	transition: .5s all;
}

/* GESTION DU TEXTE */
.orga_img {
        font-family: Montserrat, sans-serif;
        font-size: 12px;
        font-weight: 700;
        position: relative;
        transition: .5s all;
        text-transform: uppercase;
}

/* Suna */
.suna .orga_img {
        color: var(--suna);
}

.suna h5 {
        border-bottom: 1px solid var(--suna);
        color: var(--suna);
}

/* Kiri */
.kiri .orga_img {
        color: var(--kiri);
}

.kiri h5 {
        border-bottom: 1px solid var(--kiri);
        color: var(--kiri);
}

/* Konoha */
.konoha .orga_img {
        color: var(--konoha);
}

.konoha h5 {
        border-bottom: 1px solid var(--konoha);
        color: var(--konoha);
}

/* MISE EN FORME IMAGE */
.orga_img div img {
        width: 100px;
        height: 100px;
        object-fit: cover;
  	transition: .5s all;

}

/* RANG */
.orga_rang {
        width: 0;
        height: 0;
        position: absolute;
        background: rgba(0,0,0,.8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f4f4f4;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        transition: .5s all;
        top: 10px;
        left: 10px;
        font-size: 0;
}

.orga_bloc:hover .orga_rang {
        transition: .5s all;
        width: 100px;
        height: 100px;
        font-size: 1em;
}

/* TEAM */
.organigramme h5 {
        background: none;
        display: block;
        font-size: 1.3em;
        font-weight: normal;
        margin: 1rem 0;
        text-align: left;
        text-decoration: none;
        width: 100%;
        font-family: Staatliches, cursive;
}

.organigramme h5::before {
        width: 20px;
        height: 20px;
        background: url(https://imgur.com/VtbpuiI.png) no-repeat;
        content: "";
        display: inline-block;
        background-size: contain;
        margin: 0 1em 0 0;
}

/* LEGENDE */
.orga_legende {
        width: 100%;
        margin: 0 0 3em;
        display: grid;
        grid-template-columns: repeat(3, auto);
        align-items: center;
        justify-content: center;
        grid-gap: 20%;
}

.orga_legende .legende_content {
        display: grid;
        grid-template-columns: 30px auto;
        grid-gap: 10%;
}

.orga_legende .legende_content img {
        width: 20px;
        margin: 0 1em 0 0;
}

.organigramme footer {
    	width: 100%;
  	margin: 0;
}

.organigramme .credit {
      	width: 100%;
}

#naruto #hierarchie #forumactif #codage #libreservice

Halloween