|
|
| | (mise en page) fiches pour vos posts en libre service |  |
| |  Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Mar 24 Mar 2020 - 11:06 | |
| Olé tout le monde 
Je sais pas trop si c'est ici qu'il faut poster ce genre de trucs mais bon, j'ose, qui ne tente rien n'a rien sauf des coups de pieds.  Aussi, comme je viens de m'inscrire je ne peux pas poster de lien mais je n'ai pas de patience non plus ahah, bref tous les backgrounds (fonds) seront intégralement en dégradés et pas en images  Si j'enfreins des règles désolée 
Parfois, c'est difficile de faire une belle mise en page et rendre son texte attrayant : tout concorde sauf... le code. Ce monstre, le HTML, la bête noire de beaucoup d'entre nous.
Aujourd'hui je me propose de remédier à ce problème. J'ai dû souvent y faire face et j'ai codé mes propres fiches. Je ne les utilise plus mais je souhaite vous les partager, parce que ça pourrait dépanner quelques-uns.
Pour ceux qui veulent faire des modifications/souhaitent pousser un peu plus loin, voici quelques petites explications toutes simples qui vont vous aider à personnaliser.
- POUR CEUX QUI SONT A L'AISE ET VEULENT MODIFIER:
Bon, déjà, bonne nouvelle : tout est modifiable. Il y a un sujet très bien fait dans les posts-it qui explique le B.A.-BA, j'vais aller un peu plus loin Voici un petit récapitulatif des codes utilisés : - Code:
-
trucs généraux
font-family:nom de la police; ça gère le nom de la police
font-size: 0px; la taille de la police
font-weight:400, 500, bold; l'épaisseur (gras) de la police
font-style:italic; l'italique du texte
color:#000000; la couleur du texte
text-decoration:underline; texte souligné
text-transformation:uppercase; texte entièrement en majuscules
text-transformation:lowercase; texte entièrement en minuscules
les div (les "boîtes")
padding:0px; marges à l'intérieur de la div
margin:0px; marges à l'extérieur de la div
width:0px; taille de la div
height:0px; hauteur de la div
background: linear-gradient(0deg, #000000, #000000); fond en dégradé
background-color:#000000; fond uni
background-image:url('lien image'); fond avec une image En gros. Les plus fréquents. Vous pouvez faire varier ces instructions selon vos goûts.
Je me permets de faire plusieurs posts à la suite parce que sinon, ça va être compliqué malheureusement de s'y retrouver et cela risque de mettre en l'air tout le css. Pour utiliser les codes il suffit de les copier/coller, puis de re c/c votre texte à vous, d'adapter...
/!\ les codes précédés de la mention "code à ne copier QU'UNE fois, dans le premier message" doivent être impérativement présents car sinon cela ne fonctionnera pas ! et copiés une seule fois, il n'est pas nécessaire de doubler le code plusieurs fois.
/!!\ veillez à ce que les balises entre soient toutes fermées par un slash
/!!!\ code-couleur.com vous aidera à trouver votre bonheur pour remplacer les balises #000000
/!!!!\ Si vous avez un soucis, n'hésitez pas à m'envoyer un MP ou poster à la suite, des fois que cela puisse servir à certains.
/!!!!!\ J'en ajouterai d'autres au fur et à mesure, de différents styles. D'ailleurs, vous pouvez tout modifier à votre guise,tant que ça vous plaît c'est l'essentiel
Dernière édition par vert alligator le Mar 24 Mar 2020 - 11:31, édité 2 fois |
| | Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Mar 24 Mar 2020 - 11:06 | |
| Titre très beau et qui peut être long et là tu écris des petites précisions jolies qui sonnent bienAnother Caucasian, Gary. Urna sed orci ipsum, placerat id. Ahh, you know. Strikes and gutters, ups and downs. Condimentum rutrum, rhoncus ac. Stay out of Malibu, deadbeat! Lorem aliquam placerat posuere neque, at dignissim magna ullamcorper in aliquam sagittis massa ac. What are you, some kind of sad-assed refugee from the fucking sixties? Tortor ultrices faucibus curabitur eu mi sapien. Let me tell you something, pendejo. You pull any your crazy shit with us, you flash a piece out on the lanes, I'll take it away from you and stick it up your ass and pull the fucking trigger til it goes "click". Ut ultricies ipsum morbi eget risus nulla nullam. - codes:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">body {background-color:#060606;} .bxpre {width:540px;padding-top:30px;padding-bottom:30px;font-size:25px;font-style:italic;font-weight:400;color:#ffffff;font-family:old standard tt;} .bordure {border-bottom:1px solid #DEE1E4;padding:2px;width:380px;} .bxtxt {background-color:#ffffff;width:500px;padding:20px;font-size:12px;font-family:arial;text-align:justify}</style> version avec un dégradé : - Code:
-
<center><div class="bxpre" style="background: linear-gradient(80deg, #B1BED6, #E193BC)">Titre très beau et qui peut être long<div class="bordure"></div><span style="font-size:15px">et là tu écris des petites précisions jolies qui sonnent bien</span></div><div class="bxtxt">c/c ton texte ici</div></center> version couleur unie : - Code:
-
<center><div class="bxpre" style="background-color:#000000">Titre très beau et qui peut être long<div class="bordure"></div><span style="font-size:15px">et là tu écris des petites précisions jolies qui sonnent bien</span></div><div class="bxtxt">c/c ton texte ici</div></center> version image : - Code:
-
<center><div class="bxpre" style="background-image: url('url de ton image de préférence en hq et grande')">Titre très beau et qui peut être long<div class="bordure"></div><span style="font-size:15px">et là tu écris des petites précisions jolies qui sonnent bien</span></div><div class="bxtxt">c/c ton texte ici</div></center>
VARIANTETitre très beau et qui peut être long et là tu écris des petites précisions jolies qui sonnent bienAnother Caucasian, Gary. Urna sed orci ipsum, placerat id. Ahh, you know. Strikes and gutters, ups and downs. Condimentum rutrum, rhoncus ac. Stay out of Malibu, deadbeat! Lorem aliquam placerat posuere neque, at dignissim magna ullamcorper in aliquam sagittis massa ac. What are you, some kind of sad-assed refugee from the fucking sixties? Tortor ultrices faucibus curabitur eu mi sapien. Let me tell you something, pendejo. You pull any your crazy shit with us, you flash a piece out on the lanes, I'll take it away from you and stick it up your ass and pull the fucking trigger til it goes "click". Ut ultricies ipsum morbi eget risus nulla nullam. - Spoiler:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">body {background-color:#060606;} .bxpre {width:540px;padding-top:30px;padding-bottom:30px;font-size:25px;font-style:italic;font-weight:400;color:#ffffff;font-family:old standard tt;} .bordure {border-bottom:1px solid #DEE1E4;padding:2px;width:380px;} .bxtxt {background-color:#ffffff;width:500px;padding:20px;font-size:12px;font-family:arial;text-align:justify} .lis {width:540px;height:3px;background: linear-gradient(90deg, #e66465, #9198e5);margin-bottom}</style> version image : - Code:
-
<center><div class="bxpre" style="background-image:url('url de ton image')">Titre très beau et qui peut être long<div class="bordure"></div><span style="font-size:15px">et là tu écris des petites précisions jolies qui sonnent bien</span></div><div class="lis"></div><div class="bxtxt">c/c ton texte ici</div></center>
/!\ changer le dégradé sous l'image se fait dans le message à ne copier qu'une seule fois ! Il suffit de trouver la balise linear-gradient (dans .lis) et de changer les codes couleurs # !
Dernière édition par vert alligator le Mar 24 Mar 2020 - 11:12, édité 3 fois |
| | Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Mar 24 Mar 2020 - 11:08 | |
|  | mon titre court
et son sous titre joliCet espace pour des petites infos ou une citation ou autre est nécessairement sur trois lignes ou deux au minimum pour rien déformer, vous pouvez changer la taille des images pour équilibrer |  |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.icons by MISERUNT, citation de Ben Mazué, code par VERT ALLIGATOR. (la ptite zone de crédits quoi)- codes:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">.ksha {width:480px;background-color:#ffffff;border:1px solid #fafafa;padding:30px;;font-family:arial;line-height:13px;font-size:11px;text-align:justify;} .ksho {width:249px;padding:10px;margin-bottom:-15px;} titi {font-family:playfair display;font-size:21px;text-transform:uppercase} titi2 {font-family:playfair display;font-size:21px;text-transform:lowercase;font-style:italic} cit {font-family:arial;font-size:8px;color:#CFA589;} .bordure {border-bottom:1px solid #ededed;margin-bottom:15px;margin-top:10px} .bordure3 {border-bottom:1px solid #ededed;margin-bottom:15px;} .bordure4 {border-bottom:1px solid #ededed;margin-bottom:5px;margin-top:15px} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico2 {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;}</style> - Code:
-
<center><div class="ksha"><table><tr><td><img src="icon carrée"style="width:100px"></td><td><div class="ksho"><div class="bordure3"></div><center><titi>mon titre court</titi><br/><titi2>et son sous titre joli</titi2></center><div class="bordure4"></div><cit>Cet espace pour des petites infos ou une citation ou autre est nécessairement sur trois lignes ou deux au minimum pour rien déformer, vous pouvez changer la taille des images pour équilibrer</cit></div></td><td><img src="icon carrée 2"style="width:100px"></td></tr></table> <div class="bordure"></div>c/c ton texte ici, précision : les icons doivent être carrées (100*100, 200*200...) <div class="bordure"></div><center><cit>icons by ???, citation de ??? code par vert alligator</cit></center></div></center>
mon titre court
et son sous titre joliOn se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.icons by MISERUNT, citation de Ben Mazué, code par VERT ALLIGATOR. (la ptite zone de crédits quoi)- codes:
code à ne copier QU'UNE fois, dans le premier message c'est exactement le même que celui de la fiche ci dessus. - Code:
-
<style type="text/css">.ksha {width:480px;background-color:#ffffff;border:1px solid #fafafa;padding:30px;;font-family:arial;line-height:13px;font-size:11px;text-align:justify;} .ksho {width:249px;padding:10px;margin-bottom:-15px;} titi {font-family:playfair display;font-size:21px;text-transform:uppercase} titi2 {font-family:playfair display;font-size:21px;text-transform:lowercase;font-style:italic} cit {font-family:arial;font-size:8px;color:#CFA589;} .bordure {border-bottom:1px solid #ededed;margin-bottom:15px;margin-top:10px} .bordure3 {border-bottom:1px solid #ededed;margin-bottom:15px;} .bordure4 {border-bottom:1px solid #ededed;margin-bottom:5px;margin-top:15px} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico2 {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;}</style> - Code:
-
<center><div class="ksha"><center><div class="ksho"><center><titi>mon titre court</titi><br/><titi2>et son sous titre joli</titi2></center><div class="bordure4"></div><cit>On se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please !</cit></div></br></center><div class="bordure"></div>c/c ton texte ici<div class="bordure"></div><center><cit>citation de ????, code par vert alligator.</cit></center></div></center>
 | mon titre court
et son sous titre joliOn se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please ! |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.icons by MISERUNT, citation de Ben Mazué, code par VERT ALLIGATOR. (la ptite zone de crédits quoi)- codes:
- Code:
-
<style type="text/css">.ksha {width:480px;background-color:#ffffff;border:1px solid #fafafa;padding:30px;;font-family:arial;line-height:13px;font-size:11px;text-align:justify;} .ksho {width:249px;padding:10px;margin-bottom:-15px;} titi {font-family:playfair display;font-size:21px;text-transform:uppercase} titi2 {font-family:playfair display;font-size:21px;text-transform:lowercase;font-style:italic} cit {font-family:arial;font-size:8px;color:#CFA589;} .bordure {border-bottom:1px solid #ededed;margin-bottom:15px;margin-top:10px} .bordure3 {border-bottom:1px solid #ededed;margin-bottom:15px;} .bordure4 {border-bottom:1px solid #ededed;margin-bottom:5px;margin-top:15px} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico2 {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;}</style> - Code:
-
<center><div class="ksha"><table><tr><td><img src="https://images2.imgbox.com/c5/bd/4tXQgDtT_o.png" class="ico"><br/><img src="https://images2.imgbox.com/54/08/L2sgc1bX_o.png" class="ico"></td><td><div class="ksho" style="margin-left:100px;"><center><titi>mon titre court</titi><br/><titi2>et son sous titre joli</titi2></center><div class="bordure4"></div><cit>On se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please !</cit></div></td></tr></table><div class="bordure"></div>c/c ton texte ici<div class="bordure"></div><center><cit>icons by ???, citation de ????, code par VERT ALLIGATOR.</cit></center></div></center>
mon titre court
et son sous titre joliOn se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.icons by MISERUNT, citation de Ben Mazué, code par VERT ALLIGATOR. (la ptite zone de crédits quoi)- codes:
- Code:
-
<style type="text/css">.ksha {width:480px;background-color:#ffffff;border:1px solid #fafafa;padding:30px;;font-family:arial;line-height:13px;font-size:11px;text-align:justify;} .ksho {width:249px;padding:10px;margin-bottom:-15px;} titi {font-family:playfair display;font-size:21px;text-transform:uppercase} titi2 {font-family:playfair display;font-size:21px;text-transform:lowercase;font-style:italic} cit {font-family:arial;font-size:8px;color:#CFA589;} .bordure {border-bottom:1px solid #ededed;margin-bottom:15px;margin-top:10px} .bordure3 {border-bottom:1px solid #ededed;margin-bottom:15px;} .bordure4 {border-bottom:1px solid #ededed;margin-bottom:5px;margin-top:15px} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;margin-left:-63px;} .ico2 {width:50px;border-radius:100px;padding:5px;border:1px solid #dedede;}</style> - Code:
-
<center><div class="ksha"><center><div class="ksho"><center><img src="https://images2.imgbox.com/c5/bd/4tXQgDtT_o.png" class="ico2"> <img src="https://images2.imgbox.com/54/08/L2sgc1bX_o.png" class="ico2"><br/> <titi>mon titre court</titi><br/><titi2>et son sous titre joli</titi2></center><div class="bordure4"></div><cit>On se l'est tellement dit que ce serait pour longtemps, Que finallement 10 piges ça parait pas tant. Citation sur deux lignes maximum please !</cit></div></center><br/><div class="bordure"></div>c/c ton texte ici<div class="bordure"></div><center><cit>icons by MISERUNT, citation de Ben Mazué, code par VERT ALLIGATOR. (la ptite zone de crédits quoi)</cit></center></div></center>
Dernière édition par vert alligator le Ven 27 Mar 2020 - 12:39, édité 4 fois |
| | Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Mar 24 Mar 2020 - 11:09 | |
| un titre frappant
un petit sous-titre, ou un rappel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. - codes:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">.carotte {width:450px; overflow:auto} pn { color: #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 23px; text-transform: uppercase;font-weight: 200;} qu { color : #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 11px; font-weight: 500; text-transform: uppercase;} .boxcachee {margin:25px; overflow:auto} .boxcorps {background-color: #FFFFFF;padding:30px;text-align:justify;font-family:arial;font-size:13px;color:#444444}</style> version avec le dégradé - Code:
-
<center><div class="carotte" style="background: linear-gradient(0deg, #000000, #000000);"><div class="boxcachee"><div class="boxcorps"><center><pn>un titre frappant</pn><br/><qu>un petit sous-titre, ou un rappel</qu></center></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center> version avec une image en fond - Code:
-
<center><div class="carotte" style="background-image:url('url de ton image de préférence grande')"><div class="boxcachee"><div class="boxcorps"><center><pn>un titre frappant</pn><br/><qu>un petit sous-titre, ou un rappel</qu></center></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center> version avec fond uni - Code:
-
<center><div class="carotte" style="background-color: #000000"><div class="boxcachee"><div class="boxcorps"><center><pn>un titre frappant</pn><br/><qu>un petit sous-titre, ou un rappel</qu></center></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center> version avec une seule boîte (pas de titre) - Code:
-
<center><div class="carotte" style="background: linear-gradient(90deg, #e66465, #9198e5);"><div class="boxcachee"><div class="boxcorps">c/c ton texte ici</div></div></div></center>
 | un titre éclatantpartie 1 ; chapitre 1 ou autchozinscris ici ce que tu veux qui pourrait mettre dans l'ambiance, etc, ce qui te plaît... |
c/c ton texte ici - codes:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">.carotte {width:450px; overflow:auto} pn { color: #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 23px; text-transform: uppercase;font-weight: 200;} qu { color : #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 11px; font-weight: 500; text-transform: uppercase;} cit { color : #BFC2C4; font-family: 'old standard tt', cursive; letter-spacing: 0px; font-size: 10px;font-style:italic; font-weight: 000; text-transform: lowercase;} .boxcachee {margin:25px; overflow:auto} .titreb {padding:10px;margin-left:10px;} .boxcorps {background-color: #FFFFFF;padding:30px;text-align:justify;font-family:arial;font-size:13px;color:#444444} .boxcorps2 {background-color: #FFFFFF;padding:10px;text-align:justify;font-family:arial;font-size:13px;color:#444444} .icon { background: #FFFFFF; border: 1px solid #fafafa;border-radius:50px; height: 50px; object-fit: cover; opacity: .7; padding: 2px; width: 50px; }</style> version fond dégradé - Code:
-
<center><div class="carotte" style="background: linear-gradient(0deg, #000000, #000000);"><div class="boxcachee"><div class="boxcorps2"><table><tr><td><img src="url icon 100*100px 1" class="icon"><br/><img src="url icon 100*100px 2" class="icon" style="margin-top:-30px;margin-left:20px;"></td><td><div class="titreb"><pn>un titre éclatant</pn><br/><qu>partie 1 ; chapitre 1 ou autchoz</qu><br/><cit>inscris ici ce que tu veux qui pourrait mettre dans l'ambiance, etc, ce qui te plaît...</cit></div></td></tr></table></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center> version fond uni - Code:
-
<center><div class="carotte" style="background-color:#000000"><div class="boxcachee"><div class="boxcorps2"><table><tr><td><img src="url icon 100*100px 1" class="icon"><br/><img src="url icon 100*100px 2" class="icon" style="margin-top:-30px;margin-left:20px;"></td><td><div class="titreb"><pn>un titre éclatant</pn><br/><qu>partie 1 ; chapitre 1 ou autchoz</qu><br/><cit>inscris ici ce que tu veux qui pourrait mettre dans l'ambiance, etc, ce qui te plaît...</cit></div></td></tr></table></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center> version fond image - Code:
-
<center><div class="carotte" style="background-image:url('url image ici préférence grande')><div class="boxcachee"><div class="boxcorps2"><table><tr><td><img src="url icon 100*100px 1" class="icon"><br/><img src="url icon 100*100px 2" class="icon" style="margin-top:-30px;margin-left:20px;"></td><td><div class="titreb"><pn>un titre éclatant</pn><br/><qu>partie 1 ; chapitre 1 ou autchoz</qu><br/><cit>inscris ici ce que tu veux qui pourrait mettre dans l'ambiance, etc, ce qui te plaît...</cit></div></td></tr></table></div><br/><div class="boxcorps">c/c ton texte ici</div></div></div></center>
Dernière édition par vert alligator le Mar 24 Mar 2020 - 18:12, édité 3 fois |
| | Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Mar 24 Mar 2020 - 11:24 | |
| titre à ajouter
sous titre 1, ou citationLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   - codes:
code à ne copier QU'UNE fois, dans le premier message - Code:
-
<style type="text/css">.boxrp {width:300px; border: 3px double #fafafa; padding:30px; text-align:justify} pn { color: #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 19px; text-transform: uppercase;font-weight: 200;} qu { color : #424242; font-family: 'Playfair Display', cursive; letter-spacing: 1px; font-size: 11px; font-weight: 500; text-transform: uppercase;} .icon { background: #FFFFFF; border: 1px solid #fafafa;border-radius:50px; height: 50px; object-fit: cover; opacity: .7; padding: 2px; width: 50px; } .bordure2 {border-bottom:1px solid #DEE1E4;margin-top:13px;margin-bottom:5px;}</style> - Code:
-
<center><div class="boxrp"><center><pn>titre à ajouter</pn><br/><qu>sous titre 1, ou citation</qu></center><br/><div class="bordure2"></div><br/>c/c ton texte là <div class="bordure2"></div> <center><img src="img1" class="icon"> <img src="img2" class="icon"> <img src="img3" class="icon"></center></div></center>
|
| | | | Invité / Invité
Mar 24 Mar 2020 - 12:21 | |
| formidable idée, merci vert alligator  |
| |  Nombre de messages : 4666 Âge : 28 Localisation : Bureau Pensée du jour : Pétit coucou Date d'inscription : 12/05/2012 | Radischat / Dr. Danielle Jackson
Mar 24 Mar 2020 - 17:00 | |
| C'est génial ! Merci beaucoup |
| | Nombre de messages : 100 Âge : 22 Localisation : astéroïde b612 Pensée du jour : miyamenouïgadwiliiing Date d'inscription : 19/03/2020 | vert alligator / Barge de Radetzky
Ven 27 Mar 2020 - 12:40 | |
| juliette et red-scarf merciii j'en ai ajouté dans mon deuxième post |
| |
|
|
