Fiche de pub moderne

Fiche de Pub moderne

Hey

Voici mon premier LS proposé sur la Tambouille. Il s'agit d'une fiche de pub légèrement moderne. N'hésitez-pas à poser tes questions si tu souhaites mieux comprendre le codage ou simplement de l'aide sur la personnalisation.

Petit aperçu

Nom du forum

Voici donc un simple petit texte de présentation qui peut se faire sur plusieurs lignes afin de pouvoir aiguiller les membres sur ce que fais votre forum. Bon, en effet, j'écris un peu n'importe quoi pour meubler un peu et montrer que cette zone peut avoir plusieurs lignes !

187

membres inscrits

Staff

L'équipe en place actuellement

Pseudo

Fondatrice

Profil Envoyer un message

Recrutement

Nous recherchons de nouvelles perle

Administrateurs1

Postuler ?

Les News

Un nouveau design vient d'arriver. Allez vite lire le sujet qui se trouve juste ici. Et il me faut une news sur deux lignes haha !
14/02/2020

Fiche réalisée par Nevyin pour La Tambouille des Râleuses

Les codes

Ne pas supprimer les commentaires

Code::

Ils permettent d'aérer le code en gardant un rendu correct. Pour comprendre l'intérêt, rendez-vous dans ce tutoriel

Code:: <style type="text/css">.fiche__wrapper{font-family:Arial,sans-serif;color:#454545;background:#efefef;width:600px;padding:30px;box-sizing:border-box;position:relative;margin:auto}.fiche__wrapper .fiche__global_title{font-weight:700;text-align:center;font-size:24px;font-style:italic;text-shadow:1px 1px 0 #afafaf;margin:30px auto 20px}.fiche__wrapper .fiche__global_title span{background:#2caf85;width:10px;height:10px;display:inline-block;position:relative}.fiche__wrapper .fiche__global_title span:nth-child(1){top:-12px;left:-7px}.fiche__wrapper .fiche__global_title span:nth-child(2){top:4px;left:10px}.fiche__wrapper .fiche__deco-header span{display:inline-block;width:40px;height:40px;background:#2caf85;position:absolute;top:-5px;left:-5px}.fiche__wrapper .fiche__deco-header span:nth-child(2){background:#6dceaf;top:15px;left:40px;width:20px;height:20px}.fiche__wrapper .fiche__deco-header span:nth-child(3){background:#a2decb;top:40px;left:25px;width:10px;height:10px}.fiche__wrapper .fiche__maintitle{font-weight:700;text-transform:uppercase;text-align:center;font-size:30px;font-style:italic;text-shadow:1px 1px 0 #afafaf;margin-bottom:20px}.fiche__wrapper .fiche__presentation{font-size:14px;text-align:center;font-style:italic}.fiche__wrapper .fiche__statistiques_wrapper{display:flex;justify-content:center;flex-wrap:wrap;margin-top:40px}.fiche__wrapper .fiche__statistiques_wrapper .fiche__statistiques_one{max-width:110px;margin:0 17px 20px}.fiche__wrapper .fiche__statistiques_wrapper .fiche__statistiques_one .fiche__statistiques_number{font-weight:700;font-size:30px;font-style:italic;text-shadow:1px 1px 0 #afafaf}.fiche__wrapper .fiche__statistiques_wrapper .fiche__statistiques_one .fiche__statistiques_legend{font-size:14px}.fiche__wrapper .fiche__staff-recrutement-wrapper{display:flex;justify-content:space-between;margin-top:20px}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content{width:48%;border:1px solid #d4d4d4;padding:20px;box-sizing:border-box}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__title{font-weight:700;font-size:16px;font-style:italic;color:#454545;text-align:right}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__title .fiche__legend{font-size:11px;font-weight:400;font-style:normal;color:#8e8e8e}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one{display:flex;align-items:center;margin-top:10px;font-size:14px}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one .fiche__staff-informations{padding-left:10px;line-height:15px}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one .fiche__staff-informations .fiche__staff-informations-pseudo{font-weight:700}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one .fiche__staff-informations .fiche__staff-informations-role{font-size:12px;font-style:italic}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one .fiche__staff-informations .fiche__staff-informations-contact a{font-size:12px;color:#2caf85 !important;text-decoration:none}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__staff-one .fiche__staff-informations .fiche__staff-informations-contact a+a:before{content:' | '}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__recrutement-one{margin-top:10px;padding:10px 15px;font-size:14px;display:flex;justify-content:space-between}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__recrutement-one span{font-weight:700}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__recrutement-postule{margin-top:10px;font-size:10px;text-align:right}.fiche__wrapper .fiche__staff-recrutement-wrapper .fiche__staff-recrutement-content .fiche__recrutement-postule a{color:#a7a7a7}.fiche__wrapper .fiche__news-wrapper{font-size:14px;color:#454545}.fiche__wrapper .fiche__news-wrapper li,.fiche__wrapper .fiche__news-wrapper ul{list-style:none;padding:0;margin:0}.fiche__wrapper .fiche__news-wrapper li{margin-bottom:15px}.fiche__wrapper .fiche__news-wrapper .fiche__news-title{padding-left:16px;position:relative}.fiche__wrapper .fiche__news-wrapper .fiche__news-title a{color:#2baf85;text-decoration:none}.fiche__wrapper .fiche__news-wrapper .fiche__news-date{padding-left:30px;color:#ababab;font-weight:700;margin-top:3px}.fiche__wrapper .fiche__news-wrapper .fiche__news-title:before{content:'';width:10px;height:10px;background:#a2decb;position:absolute;bottom:0;left:0}.fiche__wrapper .fiche__banniere{margin-top:30px;text-align:center}.fiche__wrapper .fiche__copyright{font-size:10px;text-align:center;margin-top:20px;color:#c5c5c5}.fiche__wrapper .fiche__copyright a{color:#c5c5c5}.fiche__wrapper .fiche__deco-footer span{display:inline-block;width:40px;height:40px;background:#2caf85;position:absolute;bottom:-5px;right:-5px}.fiche__wrapper .fiche__deco-footer span:nth-child(2){right:40px;width:30px;height:30px;background:#6dcdaf}.fiche__wrapper .fiche__deco-footer span:nth-child(3){right:75px;width:20px;height:20px;background:#a2decb}</style> <div class="fiche__wrapper"><div class="fiche__deco-header"><span></span><span></span><span></span></div><div class="fiche__maintitle">Nom du forum</div><div class="fiche__presentation"> Voici donc un simple petit texte de présentation qui peut se faire sur plusieurs lignes afin de pouvoir aiguiller les membres sur ce que fais votre forum. Bon, en effet, j'écris un peu n'importe quoi pour meubler un peu et montrer que cette zone peut avoir plusieurs lignes !</div><div class="fiche__statistiques_wrapper"><div class="fiche__statistiques_one"><div class="fiche__statistiques_number">187</div><div class="fiche__statistiques_legend">membres inscrits</div></div></div><div class="fiche__staff-recrutement-wrapper"><div class="fiche__staff-recrutement-content fiche__staff-wrapper"><div class="fiche__title">Staff<div class="fiche__legend">L'équipe en place actuellement</div></div><div class="fiche__staff-content"><div class="fiche__staff-one"><img src="https://zupimages.net/up/20/07/jga1.jpg" alt="Pseudo" /><div class="fiche__staff-informations"><div class="fiche__staff-informations-pseudo" style="color: #a4bf3d;">Pseudo</div><div class="fiche__staff-informations-role">Fondatrice</div><div class="fiche__staff-informations-contact"><a href="#">Profil</a><a href="#">Envoyer un message</a></div></div></div></div></div><div class="fiche__staff-recrutement-content fiche__recrutement-wrapper"><div class="fiche__title">Recrutement<div class="fiche__legend">Nous recherchons de nouvelles perle</div></div><div class="fiche__recrutement-content"><div class="fiche__recrutement-one" style="background: #a4bf3d; color: white;">Administrateurs<span>1</span></div><div class="fiche__recrutement-postule"><a href="#">Postuler ?</a></div></div></div></div><div class="fiche__global_title"><span></span>Les News<span></span></div><div class="fiche__news-wrapper"><ul><li><div class="fiche__news-title">Un nouveau design vient d'arriver. Allez vite lire le sujet qui se trouve <a href="#">juste ici</a>. Et il me faut une news sur deux lignes haha !</div><div class="fiche__news-date">14/02/2020</div></li></ul></div><div class="fiche__banniere"><a href="#"><img src="https://zupimages.net/up/20/07/8ukx.jpg" alt="Nom du forum" /></a></div><div class="fiche__copyright">Fiche réalisée par <a href="https://www.xoogge.fr">Nevyin</a> pour <a href="https://tambouille-raleuses.forumactif.com">La Tambouille des Râleuses</a></div><div class="fiche__deco-footer"><span></span><span></span><span></span></div></div>

Pour ajouter une statistiques :

Il te suffit de copier le code suivant :

Code:: --><div class="fiche__statistiques_one"><div class="fiche__statistiques_number">187</div><div class="fiche__statistiques_legend">membres inscrits</div></div><!--

Et le coller juste avant la ligne suivante :

Code:: FIN LIGNE STATISTIQUES

Pour ajouter une ligne de staff :

Il te suffit de copier le code suivant :

Code:: --><div class="fiche__staff-one"><img src="https://zupimages.net/up/20/07/jga1.jpg" alt="Pseudo" /><div class="fiche__staff-informations"><div class="fiche__staff-informations-pseudo" style="color: #a4bf3d;">Pseudo</div><div class="fiche__staff-informations-role">Fondatrice</div><div class="fiche__staff-informations-contact"><a href="#">Profil</a><a href="#">Envoyer un message</a></div></div></div><!--

Et de le coller juste avant la ligne suivante :

Code:: FIN LIGNE STAFF

Pour ajouter une ligne de recrutement :

Il te suffit de copier le code suivant :

Code:: --><div class="fiche__recrutement-one" style="background: #a4bf3d; color: white;">Administrateurs<span>1</span></div><!--

Et de le coller juste avant la ligne suivante :

Code:: FIN LIGNE RECRUTEMENT

Pour ajouter une ligne de news :

Il te suffit de copier le code suivant :

Code:: --><li><div class="fiche__news-title">Un nouveau design vient d'arriver. Allez vite lire le sujet qui se trouve <a href="#">juste ici</a>. Et il me faut une news sur deux lignes haha !</div><div class="fiche__news-date">14/02/2020</div></li><!--

Et de le coller juste avant la ligne suivante :

Code:: FIN LIGNE NEWS

Merci de laisser les crédits en bas de la fiche. Ca peut aider d'autres personnes à trouver des ressources comme tu l'as fais, mais aussi à valoriser notre travail.

Merci Nevyin pour le partage ! Smile

Ohhh j'aime beaucoup le rendu ^^ Merci pour ce partage Smile

Lun 30 Mar 2020 - 11:53

hé coucou par ici ! Merci pour le partage , très jolie fiche !

Mar 31 Mar 2020 - 15:03

@Nevyin très belle fiche, bravo et merci pour tous

Fiche de pub moderne

Fiche de pub moderne

Re: Fiche de pub moderne

Re: Fiche de pub moderne

Re: Fiche de pub moderne

Re: Fiche de pub moderne

Re: Fiche de pub moderne

Post-It des Râleuses