AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



15 résultats trouvés pour en_tête_rp

Zuiichi

Fiche de liens - Dim 3 Jan 2016 - 15:02



Bonjour, bonsoir Wink

Alors voilà un code que j'ai fais il n'y as pas si longtemps !
Donc voilà, image et couleurs changeable a volonté Wink

Aperçu
Spoiler:
En tête


Lien




Code d'en tête (avec le nom, prénom et les deux images)
Code:
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' /><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin: auto; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">NOM & PRENOM</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><table cellpadding="0" cellspacing="0" style="margin: auto; width: 400px;"><tr><td><div style="width: 249px; height: 250px; background-image: url(IMAGE 249*250)" /></div></td><td><div style="width: 1px"></div></td><td><div style="width: 150px; height: 250px; background-image: url(IMAGE 150*250)" /></div></td></tr></table><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 60px; text-align: center; background-image: url(http://www.shizoo-design.de/stuff/patterns/335.jpg)" />
<a href="http://www.never-utopia.com/" style="font-size: 10px;">Zuiichi (c) Never Utopia</a></div>


Code de fiche de lien
Code:
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' />
<div style="text-align: center;"><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
<img src="GIF OU IMAGE 500*200" style="border: 1px solid #96be36" />
<div style="margin: auto; width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36; text-align: center;">TITRE</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div>


<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
</div>


Code du cadre du lien
Code:
<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>


Prenez le temps de regarder le contenu du codage, des fois, ce n'est pas très évident de voir ou il faut placer les textes et les images.

Le fond du codage est transparent (sur le screen le fond du forum est noir)
Pour changer la couleur "verte" chercher le code couleur "#96be36"
Pour rajouter des cadres de liens, rajoutez le code avant ce code là
Code:
<div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
</div>

Nyyx

Entête de RP ~ Classique - Dim 3 Mai 2015 - 23:54



Hullo ! Voici mon premier codage, une entête de RP donc ! Soyez indulgents pitié, je débute. T-T

Histoire de prévenir, pour le titre (le texte quoi.) je me suis inspirée de ce petit chose adorable (clic) d'Ehawee ! *_* Merci beaucoup par ailleurs, et si ça dérange, je peux bien évidemment changer. Very Happy

Aperçu ▬ clic clic


Code:
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT|Great+Vibes&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<span style="display: block; background: url(http://image.noelshack.com/fichiers/2015/18/1430414261-ezgif-1234029873.gif); width: 350px; height: 115px; margin: auto; border-top: 2px solid #b3a5a3; border-bottom: 2px solid #b3a5a3; box-shadow: 0px 0px 5px black;">

</span>
<div style="width: 330px; background-color: #b3a5a3; box-shadow: 0px 0px 5px black; padding-top: 12px; padding-left: 10px; padding-right: 10px; margin: auto; border-bottom-left-radius: 30px; border-bottom-right-radius: 32px; ">
<span style="display: block; font-family: vivaldi; font-size: 30px; color: #1f000c; text-shadow: 1px 1px 2px #1f000c; text-align: center; border-top: 1px dotted #68002a; width: 100%;">
<span style="color: #68002a; text-shadow: 1px 1px 2px #68002a; font-size: 40px; font-family: 'Great Vibes' ">T</span>itre du rp</span><span style="display: block; text-align: center; font-size: 10px; color: #efe5e9; font-variant: small-caps; letter-spacing: 2px; border-bottom: 1px dotted #68002a; width: 100%; ">ft. anneau nim et anne o'nym</span>

</div>
<span style="display: block; color:#68002a; font-size: 8px; text-align: center;">(c) Nyyx | <a href="http://www.never-utopia.com/">Never Utopia</a></span>

Halloween

Pirate's Life - Mar 26 Aoû 2014 - 17:44



Plop,

Un petit pack mi-pirate mielleux, mi-fantaisie ! Illustration de forum taille 400*136px. Changement de couleur sur les titres au survol de la souris.

Avatars piochés sur Penguin Factory, merci à eux !


/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



En-tête RP


HTML ▬ PhpBB2

PA ici ▬ Catégories ici ▬ QEEL ici ▬ Contexte ici ▬ Règlement ici ▬ Nouveautés & Annonces ici ▬ Relations ici ▬ Présentation ici ▬ Prédéfinis ici ▬ Liste des RP ici ▬ Contenu RP ici

Aperçu ▬ www


Code
Code:
<style>.général {background-color: #DBDBDB; padding: 15px; width: 550px; border-radius: 25px 0px 25px 0px; color: #503636;} .img_intro {border-radius: 100px; width: 100px;} .titre {font-family: lobster; font-size: 26px; text-align: center; color: #348796;} .titre1 {color: #E6922E; font-family: lobster; font-size: 28px; text-align: center;} .titre1:hover {color: #FF6C6C;} .bloc_pres {width: 400px; height: 100px; overflow: auto; padding: 15px; background-color: #EAEAEA; color: #606246; text-align: justify; border-left: 4px solid #188D9F;} .bloc_pres:hover {border-left: 4px solid #E2922E;} .texte_intro {font-weight: bold; font-family: "Archivo Narrow",sans-serif; color: #67AC46;} .liens_mess {font-size: 14px; text-align: center; font-family: 'Archivo Narrow', sans-serif;} .contact {font-family: 'Archivo Narrow', sans-serif; font-size: 18px;} .contenu_rp {background-color: #EAEAEA; width: 400px; height: 300px; text-align: justify; padding: 25px; border-radius: 25px 0px 25px 0px; color: #606246;} .mess_interne2 {width: 400px; height: 300px; overflow: auto;} .info_importante {font-family: "Archivo Narrow",sans-serif; color: #188D9F;} .crédits {font-family: 'Lobster', cursive; color: #919191 !important; font-size: 10px; padding: 15px;}</style>

<center><div class="général"><table><tr><td style="padding-right: 15px;"><img src="http://i39.servimg.com/u/f39/18/47/68/10/riri10.png" class="img_intro" /> <img src="http://i39.servimg.com/u/f39/18/47/68/10/loulou10.png" class="img_intro" />
<div class="titre">Nom du sujet</div></td>
<td><img src="http://i39.servimg.com/u/f39/18/47/68/10/goelis10.png" style="width: 100px;" /></td>
<td style="padding-right: 15px;"><div class="titre">With</div>
<center><img src="http://i39.servimg.com/u/f39/18/47/68/10/2_210.png" style="border: 2px solid #ffffff;">
<span class="contact"><span style="color: #188D9F;">Milo The Kid</span> <br /><span style="font-size: 16px;"><a href="#" style="color: #E6922E !important;">MP</a> • <span style="color: #48A230;">Groupe</span> </span></span></center></td></tr></table>

<div class="bloc_pres"><span class="texte_intro">En bref ... •</span> Résumé | Assyria rexit conditoris multis arbitrium licet opibus primigenia tranquillis nominibus hominum eis quae sunt viribus ex opibus Graecis rexit viribus isdem nominibus arbitrium firmas sunt isdem appellentur et rexit agrestibus quae tranquillis viribus appellentur viribus quam tranquillis primigenia amittunt rexit construxit eis quam rebus quae praesens firmas lingua indiderunt nominibus multis isdem in indiderunt veteres amittunt quae nominibus ex nomina tamen hominum eis rexit isdem construxit urbes conditoris multitudine tranquillis Assyria multis veteres veteres praesens appellentur ad amittunt licet ad et amittunt hominum licet non enim opibus viribus nominibus nominibus ex opibus quae quam Graecis agrestibus firmas nomina institutores et. Assyria rexit conditoris multis arbitrium licet opibus primigenia tranquillis nominibus hominum eis quae sunt viribus ex opibus Graecis rexit viribus isdem nominibus arbitrium firmas sunt isdem appellentur et rexit agrestibus quae tranquillis viribus appellentur viribus quam tranquillis primigenia amittunt rexit construxit eis quam rebus quae praesens firmas lingua indiderunt nominibus multis isdem in indiderunt veteres amittunt quae nominibus ex nomina tamen hominum eis rexit isdem construxit urbes conditoris multitudine tranquillis Assyria multis veteres veteres praesens appellentur ad amittunt licet ad et amittunt hominum licet non enim opibus viribus nominibus nominibus ex opibus quae quam Graecis agrestibus firmas nomina institutores et. Assyria rexit conditoris multis arbitrium licet opibus primigenia tranquillis nominibus hominum eis quae sunt viribus ex opibus Graecis rexit viribus isdem nominibus arbitrium firmas sunt isdem appellentur et rexit agrestibus quae tranquillis viribus appellentur viribus quam tranquillis primigenia amittunt rexit construxit eis.</div>

<a href="http://www.never-utopia.com" class="crédits">© Halloween</a>
<img src="http://i39.servimg.com/u/f39/18/47/68/10/balain10.png" style="float: right;" />


</div></center>

<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow|Permanent+Marker|Playball|Lobster|Courgette' rel='stylesheet' type='text/css' />




Halloween

Pack Naruto - Sam 23 Aoû 2014 - 18:57



Plop,

La suite du règlement Naruto, toujours personnalisable. Bien évidemment les longs textes ont des overflow.

Merci de laisser le crédit apparent, ça fait toujours plaisir de voir qu'on ne s'approprie pas le travail des autres !

En-tête RP


Version phpBB2 ▬ HTML ▬ Sur deux colonnes
Contexte, Règlement, Présentation, Prédéfinis, Annonces, Relations, Liste RP, Contenu RP, Fiche technique, Fiche publicité

Aperçu ▬ www


Le code
Code:
<center><table><tr>
<td><div style="width: 425px; height: 450px; background-color: #414141; text-align: justify; font-size: 9px; color: #EFEFEF;"><img src="http://data1.whicdn.com/images/132271725/large.gif" style="width:100%;" />
<div style="font-family: 'Megrim', cursive; font-size: 35px; color: #C8BCA4; text-align: center;">Titre du sujet</div>
<div style="padding: 25px; width: 400px; height: 80px; overflow: auto;"><b>Résumé du RP ou de la relation des personnages</b>• Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</div></div></td>
<td><div style="width: 150px; height: 400px; position: relative; left: -5px; padding: 25px; background-color: #92D764; font-size: 10px; color: #3C3C3C;"><div style="font-family: 'Megrim', cursive; font-size: 25px; color: #1F1F1F; text-align: center;">Joueurs</div>

<center><img src="http://data1.whicdn.com/images/107926450/large.gif" style="width: 150px; border: 2px solid white;" />
<span style="color: #40731E;"><b>Naruto UZUMAKI</b></span> Genin de Konoha
<a href="#" style="color: #40731E !important; text-decoration: none !important;">MP</a> ★ <a href="#" style="color: #40731E !important; text-decoration: none !important;">Profil</a>


<img src="http://data3.whicdn.com/images/131724956/large.gif" style="width: 150px; border: 2px solid white;" />
<span style="color: #40731E;"><b>Kakashi HATAKE</b></span> Jounin de Konoha
<a href="#" style="color: #40731E !important; text-decoration: none !important;">MP</a> ★ <a href="#" style="color: #40731E !important; text-decoration: none !important;">Profil</a>

<a href="http://www.never-utopia.com" style="color: #40731E !important; text-decoration: none !important; font-size: 9px;">© Halloween</div></center></div></td>
</tr></table></center>
<link href='http://fonts.googleapis.com/css?family=Megrim|Patrick+Hand+SC|Cinzel' rel='stylesheet' type='text/css' />




Halloween

En-tête rose - Lun 18 Aoû 2014 - 21:23



Plop,

La suite de la fiche de règlement de Narja, à la demande d'Angie Dalton.

/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



En-tête


Versions HTML et HTML & CSS disponibles ▬ Deux versions ▬ Pack complet disponible
RèglementContexteListe des RPPrésentationPrédéfinisRelationsFiche de pubDemande de partenariat


Version 1

Aperçu ▬ www


Version HTML
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<style>.bloc {margin: auto; width: 550px; background-color: #FFBFA5; border-top: 3px solid #C84150; border-bottom: 3px solid #C84150; border-radius: 20px 0px 20px 0px; -webkit-transition: 1s; transition: 1s; padding: 10px; color: #C84150;} .bloc:hover {-webkit-transition: 1s; transition: 1s; border-radius: 0px 20px 0px 20px;} .gt {font-family: 'Romanesco', cursive; font-size: 50px; color: #781A4D; text-shadow: 1px 1px 0px #FFE6D7; display: block; border-bottom: 1px dotted #C84150; padding-top: 10px; letter-spacing: 2px; margin-top: -20px} .inside {color: #711041; font-family: 'Belleza', sans-serif; width; 500px; text-align: justify; font-size: 12px; margin-left; auto; margin-right: auto;} .inside::first-letter {font-size: 40px; color: #C84150; float: left; display: block; height: 40px; margin: 5px 5px 5px 5px; text-shadow: 1px 1px 0px #FFE6D7;} .inside:first-line {color: #C84150;} a.excelo {color: #C84150!important; text-decoration: none!important; -webkit-transition: 1s; transition: 1s; font-weight: bold; font-size: 9px;} a.excelo:hover {color: #781A4D!important; -webkit-transition: 1s; transition: 1s; font-weight: bold;}</style>
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 210px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px;" /> <img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px;" />
<div class="inside">Description de la relation entre les personnages.</div></td>

<td><div class="inside" style="width: 320px; height: 120px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>


Version HTML & CSS (dans cet ordre)
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 210px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px; width: 90px;" />
<img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px; width: 90px;" /></td>
<td><div class="inside" style="width: 400px; height: 160px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>


Code:
/*********************************** ENTETE ***********************************/

/* Contenu de la fiche */
.bloc {
  margin: auto;
  width: 550px;
  background-color: #FFBFA5;
  border-top: 3px solid #C84150;
  border-bottom: 3px solid #C84150;
  border-radius: 20px 0px 20px 0px;
  -webkit-transition: 1s;
  transition: 1s;
  padding: 10px;
  color: #C84150;
}

.bloc:hover {
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 0px 20px 0px 20px;
}

/* Titre de la fiche */
.gt {
  font-family: 'Romanesco', cursive;
  font-size: 50px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
  display: block;
  border-bottom: 1px dotted #C84150;
  padding-top: 10px;
  letter-spacing: 2px;
  margin-top: -20px;
}

/* Blocs de texte */
.inside {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width; 500px;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Mise en forme Lettrine */
.inside::first-letter {
  font-size: 40px;
  color: #C84150;
  float: left;
  display: block;
  height: 40px;
  margin: 5px 5px 5px 5px;
  text-shadow: 1px 1px 0px #FFE6D7;
}

/* Mise en forme première ligne */
.inside:first-line {
  color: #C84150;
}

/* Crédits */
a.excelo {
  color: #C84150!important;
  text-decoration: none!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
  font-size: 9px;
}

a.excelo:hover {
  color: #781A4D!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
}

/*********************************** FIN ENTETE ***********************************/



Version 2

Aperçu ▬ www


Version HTML
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<style>.bloc {margin: auto; width: 550px; background-color: #FFBFA5; border-top: 3px solid #C84150; border-bottom: 3px solid #C84150; border-radius: 20px 0px 20px 0px; -webkit-transition: 1s; transition: 1s; padding: 10px; color: #C84150;} .bloc:hover {-webkit-transition: 1s; transition: 1s; border-radius: 0px 20px 0px 20px;} .gt {font-family: 'Romanesco', cursive; font-size: 50px; color: #781A4D; text-shadow: 1px 1px 0px #FFE6D7; display: block; border-bottom: 1px dotted #C84150; padding-top: 10px; letter-spacing: 2px; margin-top: -20px} .inside {color: #711041; font-family: 'Belleza', sans-serif; width; 500px; text-align: justify; font-size: 12px; margin-left; auto; margin-right: auto;} .inside::first-letter {font-size: 40px; color: #C84150; float: left; display: block; height: 40px; margin: 5px 5px 5px 5px; text-shadow: 1px 1px 0px #FFE6D7;} .inside:first-line {color: #C84150;} a.excelo {color: #C84150!important; text-decoration: none!important; -webkit-transition: 1s; transition: 1s; font-weight: bold; font-size: 9px;} a.excelo:hover {color: #781A4D!important; -webkit-transition: 1s; transition: 1s; font-weight: bold;}</style>
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 210px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px; width: 90px;" />
<img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px; width: 90px;" /></td>
<td><div class="inside" style="width: 400px; height: 160px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>


Version HTML & CSS (dans cet ordre)
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 210px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px; width: 90px;" />
<img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px; width: 90px;" /></td>
<td><div class="inside" style="width: 400px; height: 160px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>


Code:
/*********************************** ENTETE ***********************************/

/* Contenu de la fiche */
.bloc {
  margin: auto;
  width: 550px;
  background-color: #FFBFA5;
  border-top: 3px solid #C84150;
  border-bottom: 3px solid #C84150;
  border-radius: 20px 0px 20px 0px;
  -webkit-transition: 1s;
  transition: 1s;
  padding: 10px;
  color: #C84150;
}

.bloc:hover {
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 0px 20px 0px 20px;
}

/* Titre de la fiche */
.gt {
  font-family: 'Romanesco', cursive;
  font-size: 50px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
  display: block;
  border-bottom: 1px dotted #C84150;
  padding-top: 10px;
  letter-spacing: 2px;
  margin-top: -20px;
}

/* Blocs de texte */
.inside {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width; 500px;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Mise en forme Lettrine */
.inside::first-letter {
  font-size: 40px;
  color: #C84150;
  float: left;
  display: block;
  height: 40px;
  margin: 5px 5px 5px 5px;
  text-shadow: 1px 1px 0px #FFE6D7;
}

/* Mise en forme première ligne */
.inside:first-line {
  color: #C84150;
}

/* Crédits */
a.excelo {
  color: #C84150!important;
  text-decoration: none!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
  font-size: 9px;
}

a.excelo:hover {
  color: #781A4D!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
}

/*********************************** FIN ENTETE ***********************************/


CSS complet

Pour ceux qui souhaitent utiliser l'ensemble des fiches sur leur forum et qui ont donc accès au CSS, au lieu de répéter les balises de chaque fiche, vous pouvez copier le code qui suit (présent sur toutes les fiches, ne le copier qu'une fois). Il vous restera à copier la version HTML simple qui suit également.


Le CSS général
Code:
/***************************** FICHES *****************************/

/* Bloc général des fiches */
.bloc {
  margin: auto;
  width: 550px;
  background-color: #FFBFA5;
  border-top: 3px solid #C84150;
  border-bottom: 3px solid #C84150;
  border-radius: 20px 0px 20px 0px;
  -webkit-transition: 1s;
  transition: 1s;
  padding: 10px;
  color: #C84150;
}

.bloc:hover {
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 0px 20px 0px 20px;
}

/* Titre principal */
.gt {
  font-family: 'Romanesco', cursive;
  font-size: 50px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
  display: block;
  border-bottom: 1px dotted #C84150;
  padding-top: 10px;
  letter-spacing: 2px;
  margin-top: -20px
}

/* Sous-titre */
.pt {
  font-family: 'Romanesco', cursive;
  font-size: 30px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
  display: block;
  border-bottom: 1px dotted #C84150;
  padding-top: 10px;
  padding-bottom: 10px;
  letter-spacing: 1px;
}

/* Bloc type "Contexte" de la fiche pub */
.bloc_1 {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 400px;
  height: 170px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
  margin-left: auto; 
  margin-right: auto;
}

/* Première phrase du second bloc, décalée */
.intro_bloc {
  color: #C84150;
  font-family: 'Belleza', sans-serif;
  width : 500px;
  text-align: justify;
  font-size: 15px;
  margin-left : auto;
  margin-right: auto;
}

/* Suite du bloc */
.contenu_bloc {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 400px;
  max-height: 200px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Bloc type relation */
.bloc_2 {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 500px;
  height: 100px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Bloc type "caractère" */
.bloc_3 {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 500px;
  max-height: 200px;
  overflow: auto;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Citation de la présentation */
.citation_pres {
  font-family: 'Romanesco', cursive;
  font-size: 21px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
}

/* Contenu présentation */
.bloc_4 {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 400px;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Bloc type règlement */
.inside {
  color: #711041;
  font-family: 'Belleza', sans-serif;
  width: 500px;
  text-align: justify;
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}

.inside::first-letter {
  font-size: 40px;
  color: #C84150;
  float: left;
  display: block;
  height: 40px;
  margin: 5px 5px 5px 5px;
  text-shadow: 1px 1px 0px #FFE6D7;
}

.inside:first-line {
  color: #C84150;
}

/* Crédits */
a.excelo {
  color: #C84150!important;
  text-decoration: none!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
}

a.excelo:hover {
  color: #781A4D!important;
  -webkit-transition: 1s;
  transition: 1s;
  font-weight: bold;
}

/* Liens */
.fastnav {
  font-family: 'Romanesco', cursive;
  font-size: 20px;
  color: #781A4D;
  text-shadow: 1px 1px 0px #FFE6D7;
  padding-top: 10px;
  padding-bottom: 10px;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

a.fastnav {
  font-family: 'Romanesco', cursive;
  font-size: 20px;
  color: #781A4D!important;
  text-decoration: none!important;
  text-shadow: 1px 1px 0px #FFE6D7;
  padding-top: 10px;
  padding-bottom: 10px;
  letter-spacing: 1px;
  -webkit-transition: 1s;
  transition: 1s;
}

a.fastnav:hover {
  color: #FFE6D7!important;
  text-shadow: 1px 1px 0px #781A4D;
  -webkit-transition: 1s;
  transition: 1s;
}


/***************************** FIN FICHES *****************************/


HTML simple modèle 1 :
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 210px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px; width: 90px;" />
<img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px; width: 90px;" /></td>
<td><div class="inside" style="width: 400px; height: 160px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>


HTML simple modèle 2 :
Code:
<link href='http://fonts.googleapis.com/css?family=Belleza|Romanesco&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<div class="bloc"><img src="http://nsm08.casimages.com/img/2014/01/05//14010502554614089111872159.png" style="width: 550px;" /><center><span class="gt">Titre du RP</span></center>
<table><tr><td style="width: 250px;"><img src="http://l-userpic.livejournal.com/114626149/18352438" style="border-radius: 50px;" /><br /><img src="http://images4.fanpop.com/image/polls/837000/837196_1316610175743_full.jpg" style="border-radius: 50px;" />
<div style="color: #711041; font-family: 'Belleza', sans-serif; text-align: justify; font-size: 12px; margin-left: auto; margin-right: auto;">Description de la relation entre les personnages.</div></td>

<td><div class="inside" style="width: 320px; height: 120px; overflow: auto;">Ceci est un résumé du RP. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.</div></td></tr></table>

<center><a href="http://www.never-utopia.com" class="excelo" >Halloween - Never Utopia</a></center></div>




A-Lice

L'été sera chaud ~ - Ven 15 Aoû 2014 - 19:42



L'été sera chaud ~


Voici un ensemble de fiche pour faire venir l'été x).

Je précise que l'arrière plan vert correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :

HTML :
Code:
<br/><link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css' /><div style="width:600px; background:#2ABECE; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); margin:auto; color:#EFF3E0;"><div style="padding:10px; background:#EFF3E0; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg);"><div style="font-size:25px; text-align:center; padding:10px; color:#BD8594; font-family: 'Aladin', cursive;">Titre RP</div>
<div style="display:inline-block; width:400px; height:140px; background:#FC605C; margin-left:15px; margin-right:15px; float:right;"><div style="float:left; width:5px; font-size:17px; text-align:right; word-break:break-all; line-height:15px; padding:10px; font-variant:small-caps; font-family: 'Aladin', cursive;">Prénom</div> <div style="padding:10px; text-align:justify; height:120px; overflow:auto;">[b]Description de ce qu'il s'est passé jusqu'à présent ~ [/b]

</div></div>
<div style="width:100px; height:100px; overflow:hidden; z-index:10; position:relative; margin-left:15px;"><img src="http://img11.hostingpics.net/pics/355723icon100100.png" /></div><div style="width:100px; height:100px; background:#2ABECE; -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); margin-top:-100px; margin-left:15px;"></div>

<a href="http://www.never-utopia.com/" style="text-decoration:none; display:block; text-align:center; color:#2ABECE;">© A-Lice | Never-Utopia</a></div></div><br/>


La suite de l'ensemble se trouve ici :


Présentation
Règlement - Contexte
En-tête RP
Contenu RP
Relations

/!\ En cas de problème, c'est ici que ça ce passe.

Halloween

Allen Walker, Color's Power ! - Ven 11 Juil 2014 - 11:57



Plop,

Voici la suite de ma participation au Créative Mess ("Link me"), tant qu'à faire autant sortir la suite \o/

/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



En-tête


HTML ▬ Fiche de lien ici ▬ Fiche de présentation ici ▬ Contenu RP ici

Aperçu ▬ www


Code:
<center><div style="font-family: 'Oswald', sans-serif; font-size: 25px; color: #ffffff; text-align: left; padding-left: 110px; position: relative; top: 0.6em;">Titre du RP</div>
<table style="background-color: #525252; padding: 10px; width: 570px; border-left: 4px solid #CCEF6D; border-right: 4px solid #CCEF6D;"><tr><td><div style="background-color: #2C2C2C; width: 180px; height: 100px; overflow: auto; text-align: justify; padding: 15px; font-size: 11px; color: #ffffff; border-left: 3px solid #9ACDE1; border-right: 3px solid #9ACDE1;"><b>Présentation brève du personnage •</b> Ait praetermitto calceis et latera matronae quod discurrunt basternis ne silices quidem properantes ne calceis ne periculi tamquam ampla velut equos capitibus publicos post calceis per trahentes ait terga ampla voragines metu equos agitant spatia sine periculi ait silices spatia properantes terga cuncta relicto comicus dicitur publicos inlecebras et Sannione agitant signatis agmina latera varias et capitibus quidem relicto agitant latera quos capitibus periculi silices progrediar Sannione ne capitibus discurrunt latera spatia terga basternis et metu properantes dicitur quod publicos praetermitto cuncta capitibus ut per latera domi quos trahentes familiarium subversasque globos sine transiturus latera trahentes sine post silices quidam.</div>
<div style="background-color: #E3F7B3; width: 180px; height: 100px; overflow: auto; text-align: justify; padding: 15px; font-size: 11px; border-left: 3px solid #4FA978; border-right: 3px solid #4FA978;"><b>Résumé du post •</b> Ait praetermitto calceis et latera matronae quod discurrunt basternis ne silices quidem properantes ne calceis ne periculi tamquam ampla velut equos capitibus publicos post calceis per trahentes ait terga ampla voragines metu equos agitant spatia sine periculi ait silices spatia properantes terga cuncta relicto comicus dicitur publicos inlecebras et Sannione agitant signatis agmina latera varias et capitibus quidem relicto agitant latera quos capitibus periculi silices progrediar Sannione ne capitibus discurrunt latera spatia terga basternis et metu properantes dicitur quod publicos praetermitto cuncta capitibus ut per latera domi quos trahentes familiarium subversasque globos sine transiturus latera trahentes sine post silices quidam.</div></td><td style="position: relative;"><div style="width: 15px;"><div style="border: 0 solid transparent; border-top-width: 10px; border-bottom-width: 10px; border-left: 21px solid #9ACDE1; position: absolute; top: 4.8em; left: -0.5em;"></div><br /><br /></div></td><td style="background-color: #CCEF6D; width: 110px;"><img src="http://www.cosplay.com/customavatars/avatar83158_1.gif" style="width: 90px; border: 10px solid #9ACDE1; border-radius: 90px;" /><br /><br /><img src="http://illiweb.com/fa/pbucket.gif" style="width: 90px; border: 10px solid #F04B4F; border-radius: 90px;" /></td><td style="position: relative;"><div style="width: 15px;"><div style="border: 0 solid transparent; border-top-width: 10px; border-bottom-width: 10px; border-right: 21px solid #F04B4F; position: absolute; top: 17em; right: -0.5em;"></div></div></td><td><img src="http://nsa33.casimages.com/img/2014/07/11/14071111430566964.png" /><br /><br /><div style="background-color: #2C2C2C; width: 180px; height: 100px; overflow: auto; text-align: justify; padding: 15px; font-size: 11px; color: #ffffff; border-left: 3px solid #F04B4F; border-right: 3px solid #F04B4F;"><b>Présentation brève du personnage •</b> Ait praetermitto calceis et latera matronae quod discurrunt basternis ne silices quidem properantes ne calceis ne periculi tamquam ampla velut equos capitibus publicos post calceis per trahentes ait terga ampla voragines metu equos agitant spatia sine periculi ait silices spatia properantes terga cuncta relicto comicus dicitur publicos inlecebras et Sannione agitant signatis agmina latera varias et capitibus quidem relicto agitant latera quos capitibus periculi silices progrediar Sannione ne capitibus discurrunt latera spatia terga basternis et metu properantes dicitur quod publicos praetermitto cuncta capitibus ut per latera domi quos trahentes familiarium subversasque globos sine transiturus latera trahentes sine post silices quidam.</div></td></tr></table>
<div style="font-family: 'Parisienne', cursive; font-size: 25px; color: #ffffff; position: relative; top: -0.3em;">❝ Citation qui rox ! ❞</div><a style="color: #525252 !important; font-size: 9px;" href="http://www.never-utopia.com">© Halloween</a>
<link href='http://fonts.googleapis.com/css?family=Oswald|Parisienne' rel='stylesheet' type='text/css' />




Trenz

Style Rond - Sam 4 Jan 2014 - 18:20






Citation

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE



Code:
<style> .entete { border:dashed 0px #000000; -moz-border-radius-topleft: 80px; -moz-border-radius-topright:80px; -moz-border-radius-bottomleft:80px; -moz-border-radius-bottomright:80px; -webkit-border-top-left-radius:80px; -webkit-border-top-right-radius:80px; -webkit-border-bottom-left-radius:80px; -webkit-border-bottom-right-radius:80px; border-top-left-radius:80px; border-top-right-radius:80px; border-bottom-left-radius:80px; border-bottom-right-radius:80px; background-color: #000000; color: #FFFFFF; width: 200px; height: 200px; overflow: auto; padding: 10px } .entete:hover { background-color: #540707; color: #EDF500 </style>

<center><div class="entete">
[center]<div style="font-family: Oswald, cursive">[size=24]Citation[/size]</div>[/center]

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

[right][size=7] (c) <a href="http://www.never-utopia.com/forum">Never Utopia</a>[/size][/right]


Ceci est une petite en-tête de rp ronde, faîtes avec du hover. J'insiste sur le fait que le crédit doit être gardé, il est interdit de l'enlever, ceci sera considéré comme du plagiat. Postez un petit merci pour avoir le code, vous me ferez grand plaisir <3

Hana Evali

en tête soleil - Lun 28 Oct 2013 - 1:02



Bonjour à tous,

Voici un en tête de RP très simple mais original et facilement modifiable :)

Un petit aperçu ?

Un autre aperçu:

Titre - Nom P.





Code:
<br /><div style="background-color: #couleur; margin: auto; width: 500px; height: auto; color: #FF5900; text-shadow: 2px 2px 2px #7D0000; font-size: 40px; border-radius: 50px; box-shadow: 5px 0px 5px #7D0000; text-align: center;">Titre - Nom P.<br /><br /><img style="width: 50px; height: 50px; border: 2px solid #FF9300; border-radius: 0px 50px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 50px 0px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><br /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 50px 0px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><img style="width: 50px; height: 50px; overflow:hidden; border: 2px solid #FF9300; border-radius: 0px 50px; display: inline-block; margin: 2px;" src="http://www.astrosurf.com/omega-astro/systeme_solaire/soleil.jpg" /><br /><div style="font-size: 11px;"><a href="http://www.never-utopia.com/">(c)Hana Evali</a></div></div>

Asmareth

Sunny Day - Ven 16 Aoû 2013 - 15:25



Voici l'en-tête de RP assorti au modèle de fiche de RP "Sunny Day" :)




Titre du sujet

feat. Machin & Truc



(c) Codage par Asmareth pour Never Utopia


Code:
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css' />
   <div style="width:384px; margin: auto; background-color: #FFE173; padding-top: 10px; padding-left: 10px; padding-right: 10px; border-top-left-radius: 100px; border-top-right-radius: 100px; box-shadow: 2px 2px 5px #807868;">
   <span style="display: block; font-variant: small-caps; font-family: 'Bad Script', cursive; font-size:32px; font-weight: bold; letter-spacing: -4px; color : #695D3E; margin-bottom: -10px; text-align: center">
         Titre du sujet</span><span style="display: block; text-align : center; font-family: 'Bad Script', cursive; font-size:26px; color: #FFBC00; letter-spacing: -5px; text-align:center;">
         feat. Machin & Truc   </span>
      </div><span style="display: block; margin-left : auto; margin-right: auto; width: 400px; height: 120px; background: url(http://26.media.tumblr.com/tumblr_m2ubovhj4d1r65ymxo3_500.gif) center center; border: 2px solid #FFE173; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; box-shadow: 2px 2px 5px #807868;">
   </span>
   <span style="display: block; margin-top: -25px; text-align: center; color:#FFBC00; font-size: 7px;">(c) Codage par Asmareth pour <a href="http://www.never-utopia.com/" style="color: white;">Never Utopia</a></span>

Plume de Chouette

En tête bulles beige, vert et bleues. - Ven 10 Mai 2013 - 14:19




Titre du RP

Citation





Code:
<div style="background: url('http://www.renders-graphiques.fr/image/upload/mini/element_graphique_8.png'); width: 70%; overflow: hidden; margin: auto; border: 3px solid #ADCF4F; border-radius: 50px; text-align: center;"><br /><link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css' /><div style="font-family:Parisienne;color:#96CA2D; font-size: 30px; letter-spacing: 0px; text-align: center; font-weight: normal; text-shadow: black 0px 2px 2px">Titre du RP</div>
<div style="font-style: italic; font-size: 12px; font-family: arial; color:#4BB5C1;"
Citation</div></div>



^^

Sélène

Green or green - Sam 24 Nov 2012 - 21:55



Bonjour,

Voici une petite entête de rp avec le contenu intégré de votre rp :smile:




Τα Καβαλίερς είναι χάος



κυνήγι
Les cavaliers du chaos sont en marche




Code:
<center><fieldset style="border: 5px solid #D0D297; width:20px; border-radius: 10px 10px 10px 10px;"><legend><br><table border="0"><tbody><tr><td align="left"><br><div style="margin: auto; text-align: center; width: 100%;"><table><tbody><tr><td><div style="border:4px solid #D0D297;width:500px;height:220px;border-radius:100px 100px 100px 100px;background-image: url(http://24.media.tumblr.com/tumblr_m6o0wuo3jp1rzs6tmo1_500.gif)"></div>
<div style="text-align:center;margin-top:-28px; color: tan; text-shadow: #000000 1px 1px 3px; font-size: 35px;word-spacing:3px;font-family:Times new roman;">Τα Καβαλίερς είναι χάος



κυνήγι </div><div style="text-align:center;color:black;margin-top:-32px;font:comic sans ms;"> Les cavaliers du chaos sont en marche </div></td></tr></tbody></table></div></td></tr></tbody></table></legend>

</fieldset>

Okhmhaka

Zen Rice - Mer 13 Juin 2012 - 16:28





"Prénom"
&
"Prénom"

© Never-Utopia


Code:
<table style=" width: 400px; margin: auto;"><tr><td><span style="display: block; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #2d452e; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; margin: 5px;"></span></td>
<td><span style="display: block; width: 200px; font-family: trebuchet; font-weight: bold; font-size: 26px; line-height: 14px; color: #6c976e; text-shadow: 1px 1px 0px #2d452e; text-align: center; letter-spacing: 2px; border-bottom: 6px dotted #6c976e; padding-bottom: 40px;">"Prénom"
&
"Prénom"</span></td>
<td><span style="display: block; width: 100px; height: 100px; background: url(http://h2.mabellephoto.com/time-is-runnig-out-scenes-de-vie-8d6041C100.jpg) center center; border: 5px solid #2d452e; -moz-border-radius-topright: 100px; -moz-border-radius-bottomleft: 100px; margin: 5px;"></span></td></tr></table>
<a style="display: block; text-align: center; color: #5c8d5b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -30px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Okhmhaka

Ocean - Mer 13 Juin 2012 - 16:27



"Titre du topic"






&

© Never-Utopia

Code:
<span style="display: block; border-bottom: 10px solid #2e4c6a; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: center; color: #91b3d5; text-shadow: 2px 2px 0px #2e4c6a;">"Titre du topic"</span>
<span style="display: block; border-bottom: 6px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<span style="display: block; border-bottom: 3px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<span style="display: block; border-bottom: 1px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -70px;"><tr><td><span style="display: block; width: 100px; height: 100px; border: 1px solid #91b3d5; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center;"></span></td>
<td><span style="dislay: block; text-align: center; font-size: 46px; font-family: arial black; color: #91b3d5;">&</span></td>
<td><span style="display: block; width: 100px; height: 100px; border: 1px solid #91b3d5; background: url(http://32.mgl.skyrock.net/blog/vig/time-t0-live.68288732.2738672534.1.jpg) center center;"></span></td>
</tr></table>
<a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Okhmhaka

Dual curve - Mer 13 Juin 2012 - 16:13






Prénom & Prénom
© Never-Utopia

Code:
<span style="display: block; width: 100%; border-bottom: 4px dotted #b69276; margin-top: 100px; margin-bottom: -100px;"></span>
<table style="width: 200px; margin: auto;"><tr><td><span style="display: block; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #712a2a; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td>
<td><span style="display: block; width: 100px; height: 100px; background: url(http://h2.mabellephoto.com/time-is-runnig-out-scenes-de-vie-8d6041C100.jpg) center center; border: 5px solid #712a2a; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td></tr></table>
<span style="display: block; width: 400px; text-align: center; margin-left: auto; margin-right: auto; margin-top: -45px; font-size: 22px; font-weight: bold; letter-spacing: 4px; font-family: georgia; color: #ffffff; text-shadow: 0px 0px 5px #532f12;">Prénom & Prénom</span>
<a style="display: block; text-align: center; color: #746152; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -10px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>


Revenir en haut

La date/heure actuelle est Ven 24 Nov 2017 - 8:33