Joy FondAdmin narcissiqueMessages : 628Date d'inscription : 06/06/2012Âge : 25Localisation : Derrière son écran, confortablement installée au pays des licornes pégases. (# ) Sujet: Cadre pour Liens #3 Dim 16 Juin - 0:34 Nature du code
Cadre pour liens. => Fiche assortie
Aperçu
Code
Code: <link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'> <div style="display: inline-block; border-top: 10px #91D2F8 solid; border-bottom: 10px solid #91D2F8; background: #98D6FB; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #0988A7; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #0988A7; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #0988A7; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div><div style="display: inline-block; border-top: 10px #91D2F8 solid; border-bottom: 10px solid #91D2F8; background: #98D6FB; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #0988A7; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #0988A7; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #0988A7; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
Dernière édition par Joy le Ven 12 Déc - 17:34, édité 1 fois
Joy FondAdmin narcissiqueMessages : 628Date d'inscription : 06/06/2012Âge : 25Localisation : Derrière son écran, confortablement installée au pays des licornes pégases. (# ) Sujet: Re: Cadre pour Liens #3 Jeu 4 Sep - 20:03 Voici le résultat :
Spoiler: NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
NATURE DU LIEN Lorem ipsum dolor sit amet, consectetuer 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.
Codes: Tout d'abord, copie/colle ce bout de code dans le premier post de ta partie fiche de liens, il te permettra d'avoir la jolie police pour le titre de la nature du lien :
Code: <link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
Ensuite, en rouge :
Code: <div style="display: inline-block; border-top: 10px #EA0000 solid; border-bottom: 10px solid #EA0000; background: #FA0000; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #BE0000; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #BE0000; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #BE0000; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div><div style="display: inline-block; border-top: 10px #EA0000 solid; border-bottom: 10px solid #EA0000; background: #FA0000; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #BE0000; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #BE0000; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #BE0000; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
En vert :
Code: <div style="display: inline-block; border-top: 10px #198900 solid; border-bottom: 10px solid #198900; background: #1B9100; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #004D00; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #004D00; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #004D00; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div><div style="display: inline-block; border-top: 10px #198900 solid; border-bottom: 10px solid #198900; background: #1B9100; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #004D00; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #004D00; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #004D00; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
En jaune :
Code: <div style="display: inline-block; border-top: 10px #FDF925 solid; border-bottom: 10px solid #FDF925; background: #FDFA33; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #FABB10; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #FABB10; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #FABB10; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div><div style="display: inline-block; border-top: 10px #FDF925 solid; border-bottom: 10px solid #FDF925; background: #FDFA33; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #FABB10; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #FABB10; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #FABB10; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
En bleu :
Code: <div style="display: inline-block; border-top: 10px #193F92 solid; border-bottom: 10px solid #193F92; background: #1C4AA0; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #000E64; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #000E64; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #000E64; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div><div style="display: inline-block; border-top: 10px #193F92 solid; border-bottom: 10px solid #193F92; background: #1C4AA0; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #000E64; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #000E64; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #000E64; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
En violet :
Code: <div style="display: inline-block; border-top: 10px #8A3AEB solid; border-bottom: 10px solid #8A3AEB; background: #8F44EC; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #5308B0; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #5308B0; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #5308B0; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
En noir :
Code: <div style="display: inline-block; border-top: 10px #1E1E1E solid; border-bottom: 10px solid #1E1E1E; background: #202020; width: 150px; height: 250px; border-radius: 40px / 20px; margin: 2px; padding: 10px; text-align: justify; color: #434343; font-size: 11px;"><center><img src="http://i48.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border: 2px ridge #434343; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px;" /> <span style="display: inline-block; border-bottom: 2px dashed #434343; width: 100%; letter-spacing: 1px; font-family: 'Lily Script One', cursive;">NATURE DU LIEN</span></center><p style="display: inline-block; overflow: auto; height: 110px;">Lorem ipsum dolor sit amet, consectetuer 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. </p></div>
Voilà ! Par contre, j'ai essayé de faire bicolore (rouge et or, vert et argent, jaune et noir, bleu et bronze) mais ça donnait vraiment pas. D: En tout cas voici tes codes ! ^^ J'espère qu'ils te plaisent !