Welcome

Halloween Administration

Morsmordre

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

Toutes versions

Optimisé Une navigation, un footer, un index complet, une liste des sujets, un profil, une liste des membres, une fiche administrative, une fiche publicité et un listing sont également disponibles.

Retour

Codage Morsmordre présentation Halloween Forumactif

CSS

/*********************************** PRESENTATION ***********************************/
.fond_pres {
        background: url(https://i.imgur.com/4MLFN8w.png) no-repeat bottom right, url(https://i.imgur.com/q46je9p.jpg);
        width: 550px;
        margin: auto;
        box-sizing: border-box;
        border-left: 5px solid #183d23;
        position: relative;
  	font-family: 'Volkhov', serif;
  	color: #d9d9d9;
}

.fond_pres ::-webkit-scrollbar {
        background: #d9d9d9;
        height: 7px;
        width: 7px;
}

.fond_pres ::-webkit-scrollbar-thumb {
        background: #183d23;
        border-radius: 27px;
}

/* GRANDE IMAGE */
img.header_pres {
        display: block;
        margin: auto;
        padding: 5% 0 0;
        width: 500px;
        height: 277px;
        object-fit: cover;
}

/* NOM PRENOM */
.fond_pres h2 {
        background: url(https://i.imgur.com/f2Gmrxf.png) center no-repeat;
        display: block;
        font-family: times new roman;
        font-size: 35px;
        font-style: italic;
        letter-spacing: -2px;
        margin: -12% 0 0 0;
        padding: 9% 0;
        text-align: center;
        text-transform: lowercase;
        position: relative;
  	color: #d9d9d9;
  	font-weight: normal;
}

/* ACCROCHE */
.fond_pres h3 {
        font-family: 'Alegreya Sans SC', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        position: relative;
        font-weight: normal;
        margin: -11% 0 0 0;
}

.fond_pres h3::before {
        background: url(https://i.imgur.com/JMQCncn.png);
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* CONTENU */
.pres_interne {
    	padding: 2% 4%;
}

/* MINIATURES */
img.image_footer, img.minipres {
        border: 1px solid #d9d9d9;
        float: left;
        margin: 0 3%;
        padding: 1%;
        width: 100px;
        height: 100px;
        object-fit: cover;
}

/* BLOCS INTRO */
.pres_b1 {
        background: rgba(0,0,0,.2);
        float: left;
        width: 31%;
        padding: 2%;
        height: 95px;
        overflow: auto;
}

.pres_b1 span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
}

/* TITRES */
.pres_interne h4 {
        font-size: 20px;
        font-family: Vollkorn, serif;
        margin: 0;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: normal;
}

.pres_interne h4::before {
        background: url(https://i.imgur.com/uvFlIUJ.png);
        content: "";
        width: 10px;
        height: 15px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* FOND DES BLOCS */
.contenu_pres {
        background: rgba(0,0,0,.2);
        border-left: 2px solid #568A25;
        padding: 2% 5%;
}

.contenu_pres span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
  	color: #568A25;
}

/* HISTOIRE */
.contenu_pres.histoire {
        height: 200px;
        overflow: auto;
}

/* PSEUDO PRES */
.fond_pres h2.footer {
    	margin: 0;
}

/* FOOTER */
.informations_footer {
        background: rgba(0,0,0,.2);
        border-left: 2px solid #568A25;
        padding: 2% 5%;
        float: left;
        width: 60%;
        height: 90px;
        overflow: auto;
}

.informations_footer span {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
}

a.morsmordre_credits {
        color: #d9d9d9;
        display: block;
        font-family: Helvetica;
        font-size: 10px;
        font-style: italic;
        letter-spacing: -1px;
        margin: 4% 0 0;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        padding: 0 0 1%;
}

HTML

<div class="pres_interne"><div class="pres_b1"><span>Genre :</span> Masculin ou féminin.
<span>Âge :</span> écrire ici.
<span>Métier ou Année :</span> écrire ici.
<span>Maison ou Ancienne Maison :</span> écrire ici.
<span>Statut de sang :</span> Sang-Pur, Sang-Mêlé, Né-Moldu, Cracmol.</div><img src="https://i.imgur.com/eDoY0YW.jpg" class="minipres" alt="" /><div class="pres_b1"><span>Familier :</span> facultatif.
<span>Baguette :</span> Bois, coeur, taille et maniabilité 
<span>Patronus :</span> La forme animale que prend ce dernier.
<span>Epouvantard :</span> Un épouvantard est une créature qui peut changer d'aspect à volonté et qui prend la forme la plus terrifiante possible. Il suffit de mettre ce qui effraye le plus le personnage.
<span>Amortentia :</span> L'odeur qui attire le plus le personnage.
<span>Lieu de résidence :</span> écrire ici.</div>
<div class="clear"></div>

<h4>Physique</h4>
<div class="contenu_pres"><span>Taille :</span> écrire ici
<span>Corpulence :</span> écrire ici
<span>Cheveux :</span> La couleur.
<span>Yeux :</span> La couleur.
<span>Signes distinctifs :</span> écrire ici.
<span>Style vestimentaire :</span> écrire ici.</div>

<h4>Mental</h4>
<div class="contenu_pres"><span>Qualités :</span> énoncez rapidement.
<span>Défauts :</span> énoncez rapidement.
<span>Préférences :</span> Ce qu'il aime.
<span>Antipathies :</span> Ce qu'il n'aime pas.</div>

<h4>Avenir & Situation</h4>
<div class="contenu_pres"><span>Réputation :</span> Comment est-il perçu en général. 
<span>Projets :</span> Ce qu'il souhaite faire après ses études ou ce qu'il cherche à atteindre. 
<span>Famille  :</span> ses parents sont-ils sorciers ? A-t-il des frères et soeurs à Poudlard ? </div>

<h4>Histoire</h4>
<div class="contenu_pres histoire">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec urna placerat, ullamcorper augue ac, placerat ligula. Curabitur sit amet ligula felis. Nullam at lacinia turpis. Nam sit amet nisl quis dui interdum tincidunt. Fusce non enim sem. Vivamus ultrices risus id blandit dapibus. Vivamus id tortor in ex ullamcorper tincidunt. Duis consectetur tellus purus, a lacinia sapien volutpat at. Praesent sed ex tempus, pharetra velit nec, porta magna. Pellentesque tincidunt eu tortor a ultrices. Morbi elementum sapien urna, vitae elementum metus aliquet eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse condimentum eros nunc, tempor interdum ex porttitor vel. Nunc sagittis eros at lacus posuere facilisis. Sed vitae faucibus felis, ultrices ultrices libero. Morbi non ante eu nunc lacinia rutrum id vitae ante.

Mauris fermentum eleifend ornare. Sed feugiat et urna vestibulum sodales. Vivamus vitae turpis sollicitudin ligula congue consectetur sed nec erat. Vivamus convallis condimentum sodales. Fusce efficitur dignissim lectus, pellentesque consequat eros mattis non. Donec blandit, ante id pellentesque ultricies, leo justo mollis ipsum, et finibus metus lorem ac lectus. Morbi lectus tellus, porta id vehicula nec, tempor a mauris. Proin sollicitudin dui sit amet elit volutpat tincidunt. Praesent id semper sem. Suspendisse maximus tempor massa, eu aliquet quam tempor ut. Donec tincidunt elit ac varius egestas. Suspendisse potenti.

Integer elementum consequat urna nec cursus. Donec pretium pulvinar sapien eget volutpat. Aliquam interdum eu ipsum in aliquet. Proin in justo mi. Suspendisse viverra, lorem at elementum imperdiet, massa massa laoreet mauris, id consequat urna diam a tellus. Sed lacinia et arcu ac vestibulum. Etiam a rutrum libero, in lacinia odio. Proin lorem lacus, sodales quis tellus et, fermentum efficitur augue.</div>

<h2 class="footer">Pseudo</h2>
<h3 class="footer">Parce que je suis un être humain aussi</h3>

<img src="https://i.imgur.com/52URZXh.jpg" alt="" class="image_footer" /><div class="informations_footer"><span>Comment tu nous as trouvés :</span> écrire ici.
<span>Personnage ou auteur de l'avatar :</span> écrire ici.
<span>Un petit mot :</span> écrire ici.</div>
<div class="clear"></div>
</div><a href="http://ls-halloween.fr/" class="morsmordre_credits">Halloween</a>
</div>

HTML & CSS

<h2 class="footer">Pseudo</h2>
<h3 class="footer">Parce que je suis un être humain aussi</h3>

#morsmordre #Présentation #forumactif #codage #libreservice

Halloween