Welcome

Halloween Administration

Meithea Staff

Halloween, LS codage Forumactif Fiches & Messages Administration Staff Meithea

Toutes versions

Optimisé Les images du staff sont en 135*135px. De nombreuses fiches sont disponibles : intrigue, contexte, règlement, fiche de validation, présentation, prédéfinis, bottin, fiche de relations, nouveautés, bestiaire et fiche de partenariat.

Réalisé pour : Les Chroniques de Meithea

Retour

Codage staff Meithea Halloween Forumactif

HTML

<div class="bloc_staff"><h4>Pseudo</h4>
<img src="https://imgur.com/0OFZ37k.png" class="img_staff" alt="" /><div class="contenu_staff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin nibh in velit feugiat tincidunt. In ullamcorper augue magna, et luctus magna venenatis ut. Donec posuere aliquam lacus vitae laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum congue nisi tincidunt sollicitudin. Fusce sed diam mi. Praesent congue scelerisque tincidunt. Fusce consectetur metus gravida odio imperdiet suscipit. Pellentesque posuere, odio nec maximus pretium, nunc ante vestibulum tellus, eget egestas odio nisl quis elit. Pellentesque imperdiet dui a sapien sagittis, ac iaculis neque rhoncus. Nulla sed lectus vitae augue interdum consequat vel et libero. Phasellus sit amet laoreet lectus, in lacinia nunc.</div><div class="clear"></div></div>

<a href="http://ls-halloween.fr/" target="_blank" class="credits">Halloween</a>
</div>

CSS

/****************************************************** STAFF ******************************************************/
.fiche_staff {
        background: #262626;
        font-size: 12px;
        margin: auto;
        position: relative;
        text-align: justify;
        width: 500px;
        height: fit-content;
}

/* SCROLLBAR */
.fiche_staff ::-webkit-scrollbar {
    	width: 5px;
}

.fiche_staff ::-webkit-scrollbar-thumb {
        background: #eb433d;
        border-radius: 100px;
}

.fiche_staff ::-webkit-scrollbar-track {
    	background: #d9d9d9;
}

/* ENTETE, TITRE ET SOUS TITRE */
.fiche_staff .header {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        text-align: right;
        background: #100b0f;
        padding: 5%;
        color: #fff;
}

.fiche_staff h2 {
        color: #fff;
        font-family: Times New Roman;
        font-size: 30px;
        margin: 0;
        text-align: center;
        border: 0;
        font-weight: bold;
        font-style: italic;
        border-bottom: 1px solid #eb433d;
        padding: 0 0 4% 0;
}

.fiche_staff h3 {
  	font-size: 12px;
        letter-spacing: 2px;
        margin: 2% 0 0;
        text-transform: uppercase;
        font-family: 'Economica', sans-serif;
        font-weight: normal;
  	text-align: center;
  	color: #fff;
  	letter-spacing: 3px;
}

.bloc_staff h4 {
        font-family: Times New Roman;
        font-style: italic;
        text-transform: capitalize;
        color: #fff;
        letter-spacing: -2px;
        font-size: 30px;
        text-align: right;
        margin: 0 0 1% 0;
}

/* CONTENU */
.bloc_staff {
        width: 90%;
        margin: auto;
}

.img_staff {
        float: left;
        margin: 0 5% 0 0;
}

.contenu_staff {
        float: left;
        width: 65%;
        height: 135px;
        box-sizing: border-box;
        padding: 2%;
        overflow: auto;
        color: #fff;
        border: 1px solid;
}

/* COTE GAUCHE */
.bloc_staff:nth-child(2n) h4 {
    	text-align: left;
}

.bloc_staff:nth-child(2n) .img_staff {
        float: right;
        margin: 0 0 5% 0;
}

/* CREDITS */
.fiche_staff .credits {
        border-bottom: 1px solid #eb433d;
        color: #fff;
        display: block;
        font-size: 8px;
        margin: auto;
        text-align: center;
        text-transform: uppercase;
        width: 30px;
}

#meithea #staff #forumactif #codage #libreservice

Halloween