Welcome

Halloween Administration

Protego

Halloween, LS codage Forumactif Fiches & Messages Administration Protego administration

Toutes versions

Optimisé Une fiche de présentation et un index complet sont disponibles

Retour

Codage Protego administration Halloween Forumactif

CSS

/* MESSAGE TYPE */
.fiche_protego {
    width: 550px;
    margin: auto;
    background: #fff;
    line-height: 1.5;
    text-align: justify;
    border: 1px solid #383538;
}

.fiche_protego .entete {
    background: url(https://i.imgur.com/NUjqbAl.png) center;
    height: 231px;
    border-bottom: 10px solid #513243;
}

.contenu_fiche h2 {
    font-family: arial;
    font-size: 25px;
    text-align: right;
    font-weight: normal;
    color: #513243;
    text-transform: uppercase;
    text-shadow: 0.5px 0.5px #000;
}

.barre_titre {
    background: #513243;
    margin: 1% 0 0 20%;
    width: 80%;
    height: 5px;
}

.fiche_protego h3 {
    background: #513243;
    width: 100%;
    padding: 4% 3%;
    box-sizing: border-box;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
}

.fiche_protego h4 {
    color: #d39662;
    text-transform: uppercase;
    font-size: 18px;
    border-bottom: 2px solid #d39662;
    padding: 0 0 1% 0;
}

.contenu_fiche {
    padding: 2% 5%;
}

blockquote {
    border-left: 8px solid #513243;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
    background: none;
    width: 80%;
    margin: auto;
    padding: 0 0 0 4%;
}

.spoiler {
    background: #dadddd;
    border: 0;
    display: block;
    padding: 8px;
    margin: auto;
    width: 90%;
    font-size: 11px;
}

.spoiler dt {
    background: #d49662;
    color: #fff;
}

.conclusion {
    background: #fff;
    border: 15px solid #513243;
    padding: 5%;
}

.fiche_protego p::first-letter {
    font-size: 50px;
    font-family: Parisienne, sans-serif;
    float: left;
    color: #d39662;
    margin: 0 3% -4.5% 0;
}

.conclusion img {
    float: left;
    width: 50px;
    margin: 0 3% 0 0;
}

HTML

<div class="fiche_protego"><div class="entete"></div>
<div class="contenu_fiche"><h2>Titre sujet</h2><div class="barre_titre"></div>

<h4>Titre niveau 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.</p>

[quote]<b>Citation</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.[/quote]

[spoiler]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.[/spoiler]

<h3>Titre niveau 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.</p>

<div class="conclusion"><img src="https://i.imgur.com/xNUeATS.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi justo, ornare non laoreet ut, lacinia vitae ante. Aenean mollis nisi lacus, eget faucibus enim vestibulum ut. Duis eu nunc eu ligula maximus congue. Vivamus maximus, metus nec interdum cursus, nunc nisi iaculis odio, sed aliquam lacus mi sed arcu. Pellentesque ac orci at lectus faucibus luctus eget at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In viverra augue sed velit elementum egestas eu eu purus. Pellentesque suscipit mollis ex eu varius. Etiam sed lobortis elit, ac volutpat diam. Morbi vestibulum lobortis lectus eleifend hendrerit.</div></div></div>

#protego #administration #forumactif #codage #libreservice

Halloween