Welcome

Halloween Publicités

Heroes' Sup

Up Halloween LS Codage Forumactif

Halloween, LS codage Forumactif Fiches & Messages Publicités Publicité Heroe's Pub

Toutes versions

Optimisé Les images du staff (sous le titre) sont en 80*80px, et celles des prédéfinis sont en 50*50px.
Réalisé pour le forum Heroes'Sup.

Codage publicité Heroes' Sup Halloween Forumactif

HTML

<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet"><style>.fiche_parto_hssup {position: relative; width: 550px; margin: auto; border: 5px solid #d44747; background: #292929; padding: 1%; box-sizing: border-box;} .hssup_titre {color: #d44747; text-align: center; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; margin: 5% 0;} .hssup_staff {text-align: center;} .hssup_staff img {width: 80px; height: 80px; object-fit: cover; border-radius: 100px; margin: 2%;} .hssup_bloc_gauche {width: 0; height: 0; border: 0 solid transparent; border-bottom-width: 0px; border-top-width: 100px; border-left: 250px solid #dfdbd1; position: absolute; left: 20px; top: 190px;} .hssup_bloc_droite {width: 0; height: 0; border: 0 solid transparent; border-bottom-width: 0px; border-top-width: 100px; border-right: 250px solid #dfdbd1; position: absolute; right: 20px; top: 190px;} .hssup_content {display: flex; flex-wrap: wrap; background: #dfdbd1; margin: 101px auto 0; width: 500px; box-sizing: border-box; padding: 2% 4% 5%;} .hssup_news {width: 40%; border: 2px solid #d44747; padding: 4%;} .hssup_soustitre {font-family: 'Bangers', cursive; color: #d44747; font-size: 20px; font-weight: bold;} .hssup_news p {text-align: justify; margin: 4% 0 15%;} .hssup_news p::before, .hssup_predef span::before, .hssup_stats p::before {content: "“ "; font-size: 30px; float: left; line-height: .2; padding: 5% 4% 0 0; color: #d44747;} .hssup_news p::after, .hssup_predef span::after {content: " ”"; font-size: 30px; float: right; line-height: .2; padding: 5% 4% 0 0; color: #d44747;} .hssup_news p:last-child {margin: 4% 0 0;} .hssup_predef {border: 2px solid #d44747; padding: 2%;} .hssup_st2 {margin: 0 0 5%; font-weight: bold; color: #d44747; text-transform: uppercase; text-align: center; letter-spacing: 1px; font-family: 'Bangers', cursive; font-size: 20px;} .hssup_predef p img {margin: 0 0 0 4%; width: 50px; height: 50px; object-fit: cover; border: 1px solid #d44747; padding: 1%; float: right;} .hssup_predef p:nth-child(2n+2) img {float: left; border: 1px solid; margin: 0 4% 0 0;} .hssup_predef p::after {display: block; content: ""; clear: both;} .hssup_col_droite {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; margin: 0 0 0 3%; width: 220px;} .hssup_stats {border: 2px solid #d44747; padding: 2% 2% 8%; margin: 8% 0;} .hssup_stats p {margin: 1% 2%;} .hssup_boutons {border: 2px solid #d44747; padding: 2% 2% 5%; text-align: center;} a.hssup_credits {text-align: center; color: #d44747; text-transform: uppercase; font-weight: bold; font-size: 10px; font-family: 'Helvetica', sans-serif; margin: 5% 0; letter-spacing: -1px;}</style>
<div class="fiche_parto_hssup"><div class="hssup_titre">Newsletter</div><div class="hssup_staff"><img src="https://www.zupimages.net/up/19/10/nc6u.jpg" alt="" /> <img src="https://www.zupimages.net/up/19/10/nc6u.jpg" alt="" /> <img src="https://www.zupimages.net/up/19/10/nc6u.jpg" alt="" /></div><div class="hssup_bloc_gauche"></div><div class="hssup_bloc_droite"></div><div class="hssup_content"><div class="hssup_news"><div class="hssup_soustitre">Titre 1</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum venenatis orci, ut tristique neque rhoncus vitae. Pellentesque at massa.</p><div class="hssup_soustitre">Titre 2</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum venenatis orci, ut tristique neque rhoncus vitae. Pellentesque at massa.</p><div class="hssup_soustitre">Titre 3</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum venenatis orci, ut tristique neque rhoncus vitae. Pellentesque at massa.</p></div><div class="hssup_col_droite"><div class="hssup_predef"><div class="hssup_st2">Nos prédef du mois</div><p><img src="https://www.zupimages.net/up/19/10/nc6u.jpg" alt="" /> <span>Blabla sur le prédéfinis Blabla sur le prédéfinis Blabla sur le prédéfinis</span></p><p><img src="https://www.zupimages.net/up/19/10/dg1g.png" alt="" /> <span>Blabla sur le prédéfinis Blabla sur le prédéfinis Blabla sur le prédéfinis</span></p><p><img src="https://www.zupimages.net/up/19/10/ootq.png" alt="" /> <span>Blabla sur le prédéfinis Blabla sur le prédéfinis Blabla sur le prédéfinis</span></p></div><div class="hssup_stats"><div class="hssup_st2">Les stats</div><p>Nouveauté</p><p>Nouveauté</p><p>Nouveauté</p></div><div class="hssup_boutons"><div class="hssup_st2">Nos boutons & Fiches</div><a href="http://hssup.forumactif.org/"><img src="https://zupimages.net/up/18/23/g1cu.png" title="Heroe's SUP" /></a></div><a href="http://ls-halloween.fr" target="_blank" class="hssup_credits">@ Halloween</a></div> </div></div></div>

#bokunoheroacademia #publicites #forumactif #codage #libreservice