Welcome

Halloween Administration

Meithea

Halloween, LS codage Forumactif Fiches & Messages Présentations & Prédéfinis Présentation Meithea

Toutes versions

Optimisé Il y a un hover au survol de l'avatar : les informations de bases sont dévoilées. De nombreuses fiches sont disponibles : intrigue, règlement, contexte, fiche de validation, prédéfinis, bottin, fiche de relations, nouveautés, présentation du staff, bestiaire et fiche de partenariat.

Réalisé pour : Les Chroniques de Meithea

Retour

Codage présentation Meithea Halloween Forumactif

HTML

<span>Alignement ;</span> Texte
<span>Affinité élémentaire ;</span> Texte
<span>Classe ;</span> Texte
<span>Métier ;</span> Texte</div></div><div class="caractere"><p><span>Caractère ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.

Suspendisse rutrum lectus sit amet nisl sollicitudin, non euismod ante pharetra. Suspendisse potenti. Aliquam cursus dictum purus, et dapibus odio euismod a. Nullam ultrices ante sed lacus ultricies porttitor. Sed sollicitudin mollis imperdiet. Ut nec velit sit amet urna laoreet sagittis. Maecenas porttitor luctus scelerisque. Cras vitae iaculis mauris.

Nunc non commodo magna, ut ornare felis. Maecenas at tempus lorem, vel fringilla lectus. Aliquam rutrum egestas purus vitae ultricies. Proin volutpat massa eu quam accumsan scelerisque. Aliquam maximus ultrices mauris, nec aliquet felis convallis et. Integer malesuada leo justo, sit amet vestibulum purus pharetra consequat. Pellentesque non sem ante. Nam hendrerit vel enim nec commodo.

Pellentesque condimentum neque ipsum, nec mattis nulla interdum sed. Cras semper consectetur urna. Mauris venenatis porttitor dolor, in euismod arcu gravida sit amet. Sed nec tempus ligula, a blandit metus. Praesent in dignissim arcu, vitae luctus arcu. Cras pulvinar consequat finibus. Nulla metus tellus, hendrerit mattis auctor sit amet, aliquam id erat. Vestibulum ac mi quis mauris mollis fermentum vel eu nisi. Vivamus nunc lacus, euismod at nisi pharetra, facilisis tempor magna. Proin euismod lectus eu tortor aliquam egestas. Pellentesque fringilla rhoncus viverra. Pellentesque metus enim, pharetra vel risus vitae, fermentum hendrerit enim. Aenean tristique turpis nisi, at mattis ligula posuere tempus. Aliquam vitae cursus quam, in rutrum mauris.

Donec dapibus vestibulum libero non maximus. Fusce sit amet risus a tortor accumsan bibendum sit amet vel lorem. Praesent mi nisl, fermentum id nibh eu, imperdiet blandit neque. Curabitur nec lectus sit amet dolor consequat tempus quis ac felis. Morbi aliquet ipsum at urna gravida, eu elementum nibh tincidunt. Etiam augue purus, porta a auctor et, congue iaculis turpis. Suspendisse egestas dignissim lorem vestibulum convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et metus vel neque fringilla vulputate. Ut nec scelerisque eros. Aenean in magna hendrerit, varius eros eget, eleifend velit.</p></div><div class="clear"></div><div class="apparence"><span>Taille ;</span> Texte / <span>Corpulence ;</span> Texte / <span>Cheveux ;</span> Texte / <span>Autres ;</span> Texte</div><div class="histoire"><p><span>Histoire ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.

Donec dapibus vestibulum libero non maximus. Fusce sit amet risus a tortor accumsan bibendum sit amet vel lorem. Praesent mi nisl, fermentum id nibh eu, imperdiet blandit neque. Curabitur nec lectus sit amet dolor consequat tempus quis ac felis. Morbi aliquet ipsum at urna gravida, eu elementum nibh tincidunt. Etiam augue purus, porta a auctor et, congue iaculis turpis. Suspendisse egestas dignissim lorem vestibulum convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et metus vel neque fringilla vulputate. Ut nec scelerisque eros. Aenean in magna hendrerit, varius eros eget, eleifend velit.</p></div><div class="hrp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.</p></div><img src="https://i.imgur.com/z8725YN.png" alt="" class="hrp_img" /><div class="clear"></div>
<a href="http://ls-halloween.fr/" target="_blank" class="credits">Halloween</a></div>

CSS

/****************************************************** PRESENTATIONS ******************************************************/
.presentation {
        width: 500px;
        margin: auto;
  	background: #100b0f;
  	padding: 0 0 2%;
}

.presentation p {
        font-family: Verdana;
        font-size: 12px;
}

.clear {
  	clear: both;
}

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

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

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

/* HEADER */
.presentation .header {
        background: #100b0f;
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        padding: 4%;
}

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

.presentation 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;
}

/* AVATAR */
.bloc_avatar {
        width: 200px;
        height: 320px;
        float: left;
        overflow: hidden;
  	position: relative;
}

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

.bloc_avatar:hover .pres_avatar {
        margin-top: 320px;
        transition: .5s all;
}

.infos_avatar {
        position: absolute;
        top: 0;
        background: #2c2c2c;
        width: 100%;
        height: 320px;
        overflow: auto;
        padding: 5%;
        box-sizing: border-box;
        color: #fff;
}

.infos_avatar span, .presentation .caractere p span, .presentation .apparence span, .presentation .histoire span {
        font-family: Economica, sans-serif;
        font-size: 16px;
        letter-spacing: 1px;
}

/* CARACTERE */
.presentation .caractere {
        float: left;
        width: 300px;
        height: 320px;
        background: url('https://i.imgur.com/2knLLqC.jpg');
        color: #fff;
        padding: 2%;
        box-sizing: border-box;
        text-align: justify;
}

.presentation .caractere p {
        border: 1px solid;
        padding: 5%;
        margin: 0;
        height: 270px;
        overflow: auto;
}

/* APPARENCE */
.presentation .apparence {
        background: #c73f3b;
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        padding: 5%;
        overflow: auto;
}

/* HISTOIRE */
.presentation .histoire {
        background: #2c2c2c;
        width: 100%;
        height: 300px;
        padding: 5%;
        box-sizing: border-box;
        text-align: justify;
        color: #fff;
}

.presentation .histoire p {
        margin: 0;
        border: 1px solid;
        padding: 5%;
        width: 100%;
        box-sizing: border-box;
        height: 250px;
        overflow: auto;
}

/* HRPG */
.presentation .hrp {
        width: 400px;
        height: 100px;
        float: left;
        background: url('https://i.imgur.com/2knLLqC.jpg');
        padding: 2%;
        box-sizing: border-box;
        color: #fff;
        text-align: justify;
}

.presentation .hrp p {
        margin: 0;
        padding: 2%;
        border: 1px solid;
        height: 65px;
        overflow: auto;
}

img.hrp_img {
        float: left;
        width: 100px;
        height: 100px;
        object-fit: cover;
}

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

#meithea #presentation #forumactif #codage #libreservice

Halloween