Welcome

Halloween Présentations & Prédéfinis

Wicked Présentation

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

Toutes versions

Optimisé Une liste des sujets, un profil & message, un index complet, des fiches de contexte, validation, publicité, règlement et groupes sont disponibles.
Réalisé pour le forum Wicked.

Retour

Codage présentation Wicked Halloween Forumactif

CSS

::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background: #c84a6f;
}
::-webkit-scrollbar-track {
    	background: #cfcbcc;
}

/* PRESENTATION */
.presentation {
        width: 500px;
        margin: auto;
        background: #cecbcc;
        text-align: justify;
        position: relative;
        font-family: Calibri, sans-serif;
        font-weight: bold;
        color: #858386;
  	padding: 0 0 1%;
}

.presentation header {
        background: url(https://i.servimg.com/u/f26/19/99/69/81/fond_f11.png);
        box-sizing: border-box;
        padding: 3% 0;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: .5;
}

.presentation header h2 {
        font-size: 30px;
        text-transform: uppercase;
        margin: 0 0 2% 0;
  	color: #e51a5e;
}

.presentation header h3 {
    	font-size: 11px;
}

.presentation .content {
        margin: 3% auto 0;
        width: 95%;
}

.presentation .content::after {
        content: "";
        display: block;
        clear: both;
}

img.img_presentation {
        float: left;
        width: 200px;
        height: 320px;
        object-fit: cover;
}

.presentation .bloc1, .presentation .bloc2  {
        background: #e3e0e2;
        border: 1px solid #b6b5b7;
        float: right;
        width: 55%;
        margin: 0 0 2%;
        box-sizing: border-box;
        padding: 1%;
        font-size: 11px;
}

.presentation .bloc2 p {
        height: 176px;
        overflow: auto;
        padding: 0 2% 0;
        width: 98%;
        margin: 0 auto;
        box-sizing: border-box;
}

.presentation .bloc1 span {
    	color: #e51a5e;
}

.clear {
  	clear: both;
}

.presentation .histoire {
        background: #e3e0e2;
        border: 1px solid #b6b5b7;
        min-height: 200px;
        padding: 2%;
        box-sizing: border-box;
}

.presentation .img_footer_gauche {
        position: absolute;
        left: 0;
        bottom: 0;
}

.presentation .img_footer_droite {
        position: absolute;
        right: 0;
        bottom: 0;
}

a.wicked_credits {
        text-align: right;
        display: block;
        font-style: italic;
        text-transform: lowercase;
        letter-spacing: -1px;
        font-size: 10px;
        margin: 4% 12% 0 0;
        color: #b3afaf;
}

HTML

<div class="presentation"><header><h2>Prénom Nom</h2><h3>Citation au choix</h3></header><div class="content"><img src="https://i.servimg.com/u/f26/19/99/69/81/avatar10.png" class="img_presentation" alt="" /><div class="bloc1">Bonjour, je m'appelle <span>écrire ici</span> et j'ai l'âge de <span>écrire ici</span> ans. Depuis ma naissance j'appartiens au groupe des <span>écrire ici</span>. Ma couleur de cheveux est <span>écrire ici</span> et mes yeux sont <span>écrire ici</span>.

Mon avatar représente <span>écrire ici</span> et je le crédite à <span>écrire ici</span>.</div><div class="bloc2"><p>Traits physiques et mentaux particuliers à votre personnage. Minimum 5 lignes.</p></div><div class="clear"></div><div class="histoire">Ecrivez l'histoire de votre personnage. Minimum 15 lignes.</div><a href="http://ls-halloween.fr/" target="_blank" class="wicked_credits">Halloween</a></div><img src="https://i.imgur.com/7YZWmOe.png" alt="" class="img_footer_gauche"/><img src="https://i.imgur.com/2pvVQrf.png" alt="" class="img_footer_droite"/></div>

HTML & CSS

#wicked #presentation #forumactif #codage #libreservice

Halloween