Welcome

Halloween Administration

Academy Waverly

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

Toutes versions

Optimisé Une page d'accueil, une liste des sujets, un profil & message ainsi que des fiches de publicité, de présentation du staff et d'administration sont disponibles

Retour

Codage Academy Waverly présentation Halloween Forumactif

CSS

/********************************************************* FICHE PRESENTATION *********************************************************/
.credits {
    color: #d89d95 !important;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-size: 10px;
}

.fiche_wa {
    background: #fff;
    margin: auto;
    width: 500px;
    border: 1px solid #98aebc;
}

.fiche_wa .entete {
    background: url('https://i.imgur.com/KnaSp5u.jpg');
    width: 100%;
    height: 285px;
    color: #fff;
}

.contenu_fiche {
    padding: 10px 40px;
}

.fiche_wa h4 {
    background: #d4e5de;
    padding: 5%;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    margin: 0;
}

.fiche_wa h5 {
    border-bottom: 2px solid #f7cca5;
    color: #f7cca5;
    text-transform: uppercase;
    font-size: 18px;
    margin: 0;
    padding-bottom: 2%;
}

dd.quote {
    border-left: 5px solid #eba48f !important;
    background: none;
    border: 0;
    padding: 0 5%;
    font-size: 13px;
    line-height: 1.5;
}

.conclusion {
    background: #e2efe1;
    padding: 4%;
}

.conclusion p {
    border: 1px solid #fff;
    padding: 5%;
    background: #fff;
}

.conclusion p::before {
    color: #eba48f;
    content: "▶";
    font-size: 20px;
    float: left;
    padding-right: 2%;
}

.fiche_wa .imp {
    color: #98aebc;
    font-weight: 700;
}

.contenu_fiche p {
    margin-top: -3%;
}

.conclusion p {
  margin: 0 !important;
}

.contenu_pres {
    width: 100%;
    height: 150px;
    overflow: auto;
}

HTML

<div class="fiche_wa"><div class="entete" style="background: url('https://i.imgur.com/oMH5vZZ.jpg');"></div>
   <div class="contenu_fiche"><h4>Nom du personnage</h4>

[quote]<span class="imp">Noms & Prénoms</span> : réponse
<span class="imp">Date & Lieu de naissance</span> : réponse
<span class="imp">Age</span> : réponse
<span class="imp">Nationalité</span> : réponse

<span class="imp">Orientation sexuelle</span> : réponse
<span class="imp">Groupe</span> : réponse
<span class="imp">Métier/Job</span> : réponse
<span class="imp">Quartier</span> : réponse
<span class="imp">Avatar</span> : réponse[/quote]

<h4>Votre personnage</h4>
   <h5>Physique & Caractère</h5>
   <p class="contenu_pres"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus nisl nec mi laoreet convallis. Nulla ornare ligula quis egestas ullamcorper. Ut eu mauris libero. Phasellus accumsan maximus mi, non bibendum nisl pellentesque at. Maecenas at quam nisl. Phasellus finibus quam orci, consectetur tempus ligula lacinia eu. Sed porta, sem vitae molestie dapibus, libero magna scelerisque felis, nec rutrum dolor ex sed sem. Etiam consectetur malesuada magna, at luctus augue sollicitudin eget. Nam eu varius nulla. Nulla feugiat ut velit vel fermentum. Aenean feugiat ligula id urna rutrum, ac egestas elit euismod.

Donec mattis est elit, quis semper eros lobortis eu. Aenean dui orci, tempus vel urna bibendum, hendrerit lobortis odio. Proin sed neque non dui laoreet tincidunt. Proin faucibus vitae arcu nec venenatis. Vestibulum quis rhoncus mi. Suspendisse eget quam vehicula, feugiat urna scelerisque, lacinia odio. Donec ut nulla et ipsum hendrerit rhoncus id in metus. Ut eleifend est quis pharetra commodo. Maecenas in eros lacus. </p>

<h5>Histoire</h5>
  <p class="contenu_pres"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus nisl nec mi laoreet convallis. Nulla ornare ligula quis egestas ullamcorper. Ut eu mauris libero. Phasellus accumsan maximus mi, non bibendum nisl pellentesque at. Maecenas at quam nisl. Phasellus finibus quam orci, consectetur tempus ligula lacinia eu. Sed porta, sem vitae molestie dapibus, libero magna scelerisque felis, nec rutrum dolor ex sed sem. Etiam consectetur malesuada magna, at luctus augue sollicitudin eget. Nam eu varius nulla. Nulla feugiat ut velit vel fermentum. Aenean feugiat ligula id urna rutrum, ac egestas elit euismod.

<div class="conclusion"><p>Derrière l'écran, je suis <span class="imp">Pseudo</span> et j'ai <span class="imp">XX ans</span>. Il s'agit de mon <span class="imp">Premier/Deuxième</span> compte. J'ai connu le forum <span class="imp">où ?</span>. Je pense être disponible <span class="imp">7/7 jours 8D</span>. Enfin, <span class="imp">si vous voulez ajouter un petit mot</span>.</p></div>

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

#academywaverly #Présentation #forumactif #codage #libreservice

Halloween