Welcome

Halloween Administration

Wicked

Halloween, LS codage Forumactif Fiches & Messages Administration Wicked

Toutes versions

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

Retour

Codage groupes Wicked Halloween Forumactif

CSS

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

.groupes_fiche header {
        background: url(https://i.servimg.com/u/f26/19/99/69/81/fond_f11.png);
        box-sizing: border-box;
        padding: 8% 0 3% 5%;
}

.groupes_fiche header h2 {
        font-size: 30px;
        text-transform: uppercase;
        margin: 0 0 2% 0;
}

.groupes_fiche h3 {
        text-transform: uppercase;
        letter-spacing: 1px;
}

.groupes_fiche .separation span {
    	margin: 0 4%;
    	color: #e51a5e;
}

.groupes_fiche header .separation span:last-child {
    	margin: 0 4%;
}

.groupes_fiche .content {
        width: 90%;
        margin: 1% auto 2%;
}

.bloc_groupe .img_groupe {
        float: left;
        margin: 4% 4% 0 0;
}

.bloc_groupe:nth-child(2n+2) .img_groupe {
        float: right;
        margin: 4% 0 0 4%;
}

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

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

.groupes_fiche .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% 2% 0 0;
        color: #b3afaf;
}

HTML

<div class="groupes_fiche"><header><h2>Les groupes</h2><div class="separation">• <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span> • <span>•</span></div></header>
<div class="content"><div class="bloc_groupe"><img src="https://i.servimg.com/u/f26/19/99/69/81/hexago13.png" alt="" class="img_groupe" /><h3>Groupe 1</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit, erat a pulvinar finibus, erat felis condimentum urna, at condimentum nulla tellus non massa. Etiam sed commodo risus, eu pellentesque ante. Sed bibendum ex felis, fermentum hendrerit purus ultrices sit amet.</div>

<div class="bloc_groupe"><img src="https://i.servimg.com/u/f26/19/99/69/81/hexago13.png" alt="" class="img_groupe" /><h3>Groupe 2</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit, erat a pulvinar finibus, erat felis condimentum urna, at condimentum nulla tellus non massa. Etiam sed commodo risus, eu pellentesque ante. Sed bibendum ex felis, fermentum hendrerit purus ultrices sit amet.</div>

<div class="bloc_groupe"><img src="https://i.servimg.com/u/f26/19/99/69/81/hexago13.png" alt="" class="img_groupe" /><h3>Groupe 3</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit, erat a pulvinar finibus, erat felis condimentum urna, at condimentum nulla tellus non massa. Etiam sed commodo risus, eu pellentesque ante. Sed bibendum ex felis, fermentum hendrerit purus ultrices sit amet.</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>

#wicked #groupes #forumactif #codage #libreservice

Halloween