Welcome

Halloween Administration

Meithea

Halloween, LS codage Forumactif Fiches & Messages Autres Bestiaire Meithea

Toutes versions

Optimisé Les informations du monstre apparaissent au survol de l'image. De nombreuses fiches sont disponibles : intrigue, règlement, contexte, fiche de validation, présentation, prédéfinis, fiche de relations, nouveautés, présentation du staff, bottin et fiche de partenariat.

Réalisé pour : Les Chroniques de Meithea

Retour

Codage bestiaire Meithea Halloween Forumactif

HTML

Pour ajouter un monstre

CSS

/****************************************************** BESTIAIRE ******************************************************/
.bestiaire {
        width: 500px;
        margin: auto;
}

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

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

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

.bloc_bestiaire {
        float: left;
        height: 400px;
        margin: 2.8%;
        overflow: hidden;
        position: relative;
        width: 215px;
        border: 1px solid #eb433d;
}

.img_monstre {
        transition: .5s all;
        z-index: 1;
        position: relative;
}

.bloc_bestiaire:hover .img_monstre {
        margin-top: 400px;
        transition: .5s all;
}

.contenu_bloc_bestiaire {
        background: url('https://i.imgur.com/2knLLqC.jpg');
        box-sizing: border-box;
        color: #fff;
        padding: 3.5%;
        position: absolute;
        top: 0;
        height: 400px;
}

/* TITRES */
.contenu_bloc_bestiaire h2 {
        font-family: Times New Roman;
        text-align: center;
        font-size: 24px;
        margin: 5% 0;
        color: #fff;
}

.contenu_bloc_bestiaire h3 {
        color: #fff;
        font-weight: normal;
        font-size: 10px;
        margin: 0;
  	text-align: center;
        padding: 0;
}

.contenu_bloc_bestiaire p {
        border: 1px solid;
        box-sizing: border-box;
        color: #fff;
        height: 225px;
        overflow: auto;
        padding: 2%;
        text-align: justify;
        width: 100%;
        margin: 1% 0 0 0;
}

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

#meithea #bestiaire #forumactif #codage #libreservice

Halloween