AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|
Quelques petits codes.
Invité
MessageSujet: Quelques petits codes. Dim 22 Mar - 1:56
Ayo !

Alors, malheureusement je n'ai aucun graph' à vous présenter puisque je suis vraiment très nulle en graphisme. Cependant, je sais plus ou moins coder ! Ouais... Plus ou moins, je débute tout juste à vrai dire...
Donc, je vais mettre ici quelques petites fiches diverses et variées, peut-être même des PA plus tard.

Bon, ce que je fais reste très simple pour l'instant et mes codes peuvent comporter des erreurs, n'hésitez pas à me les signaler si vous en voyez.

Pour le moment je n'ai qu'un seul code à vous proposer. J'en rajouterais petit à petit.

La première fiche l'ai crée pour la partie Fanclub du forum, cependant, je pense qu'elle peut également faire office de fiche de liens sur un forum de RPG. Les couleurs sont bien évidemment modifiables~

Fiche n°1:
 

Code:
<center><div style="border:4px solid #4B088A; border-radius: 30px; width: 500px; padding: 20px; background-color:#E6E6E6"><span style="display:block; font-size:35px; color: #4B088A; text-align:center; margin:auto; font-family: impact; letter-spacing: 3px">Titre</span>

<div style= "display:block; border-bottom: dashed 4px #4B088A; border-top: dashed 4px #4B088A"><img src="http://img11.hostingpics.net/pics/284850tumblrnfgtvjajFs1qhwguzo1500.gif"/></div>

<table style= cellpadding="1" cellspacing ="3" width = 100%><tr><td width = 40%px><div style="border:2px solid #4B088A; height: 120px; overflow: auto; padding: 10px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo.</div></td><td colspan ="2"><div style="border:2px solid #4B088A; height: 120px; overflow: auto; padding: 10px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.</div></td></tr></table>

<img src="http://img11.hostingpics.net/pics/153918Pimagicsuperphoto9.png" style="width: 100px; border:2px dashed #4B088A; height: 100px; float: left; border-radius: 100px; margin-right:10px"/><div style="height: 100px; overflow: auto; text-align: center;"><span style ="display:block; font-family: arial black; font-size:13px;">Titre</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.
</div>
<img src="http://img11.hostingpics.net/pics/246574Pimagicsuperphoto10.png" style="width: 100px; border:2px dashed #4B088A; height: 100px; float: right; border-radius: 100px; margin-left:10px"/><div style="text-align: center; height: 100px; overflow: auto;"><span style ="display:block; font-family: arial black; font-size:13px;">Titre</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. </div>

<span style="display:block; font-family: Time new; font-size:10px; text-align:center;">Fiche par Onna.</span>
</div></div>

<span style="display:block; font-family: Time new; font-size:10px; text-align:center;">Fiche par Onna.</span>
</div>

Fiche Karaoké -ou ce que vous voulez en fait-

fiche n°2:
 

Code:
<center><div style="border: 5px solid #58D3F7; width: 600px; height: 780px; background: url(http://data.bloggif.com/distant/user/store/c/9/c/9/ab7973eada71c0a7f9c5be9e9afe9c9c.jpeg) center;">

<span style="font-size: 22px; font-family: Impact; color: #58D3F7;">Artiste - Nom de la chanson.</span>

<div style="border: 2px solid #58D3F7; width: 420px; height: 250px;"><iframe width="420" height="250" src="https://www.youtube.com/embed/kUSIdLEs2hA" frameborder="0" allowfullscreen></iframe></div>

<div style="display:inline-block; border: 2px solid #58D3F7; float: left; margin-left: 10px; width: 125px;"><span style="font-size: 18px; font-family: Impact; color: #58D3F7;">Cast</span>
Nom : Pseudo.
Nom : Pseudo.
Nom : Pseudo.
Nom : Pseudo
Nom : Pseudo.</div><div style="display:inline-block; border: 2px solid #58D3F7; float: right; margin-right: 10px; margin-left: 10px; width: 435px; overflow: auto; height: 380px; padding: center;"><span style="font-size: 18px; font-family: Impact; color: #58D3F7;">Lyrics + <a href="LIEN LYRICS ICI">Lien [Click]</a></span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper.</div>

<div style="border: 2px solid #58D3F7; float: left; margin-left: 10px; margin-top: 10px; width: 125px;"><span style="font-size: 18px; font-family: Impact; color: #58D3F7;">Montage</span>
Montage son :
Image :
Montage vidéo :</div>

<div style="border: 2px solid #58D3F7; float: left; margin-left: 10px; margin-top: 10px; width: 125px;"><span style="font-size: 18px; font-family: Impact; color: #DF0101;">Enregistrements</span>
Pseudo : Non rendu.
Pseudo : Non rendu.
Pseudo : Non rendu.</div>


<span style="font-size: 9px;">Fiche par Onna</span></div></center>

Donc, voilà une "pseudo-signature", dans le sens où c'est relativement simple à faire, mais aussi esthétiquement parlant. Ceci dit, voilà, je partage quand même le code, sait-on jamais.
Pour information la typo' et la présentation du texte sont modifiables.
Petite précision pas besoins de se casser la tête à chercher des gif/des images de la bonne taille, ils devraient se recadrer automatiquement normalement.

Signature n°1:
 

Code:
<center><div style= "display:inline-block;"><img src="LIEN GIF" style="width: 180px; border: 2px solid #BCF5A9; height: 100px; float: left; margin-right:5px"/><img src="LIEN GIF" style="width: 180px; border: 2px solid #BCF5A9; height: 100px; float: left; margin-right:5px"/><img src="LIEN GIF" style="width: 180px; border: 2px solid #BCF5A9; height: 100px; float: left; margin-right:5px"/></div>
<br><span style="font-variant: small-caps; color: #D1FBC3; letter-spacing: 2px; font-size: 20px; text-decoration: overline underline;">TEXTE ♥</span>


Voilà, voilà~ Si vous avez des questions pour la modifier, des remarques ou des avis donner, n'hésitez pas ! :3
Revenir en haut Aller en bas
Invité
MessageSujet: Re: Quelques petits codes. Dim 22 Mar - 11:49
Mais t'es une pro du codage, je t'admire o.o !

Je ne sais pas du tout faire ce genre de codage, même si tu ne présentes qu'une seule fiche pour le moment, je te trouve vachement douée ;D C'est super beau, bien structuré, aéré e très esthétique. J'adore, j'achète.
Je peux l'utiliser sur le forum ? =D
Ce serai même trop cool si tu deviennes codeuse du forum tellement je suis Fail in love with ton code xD
Revenir en haut Aller en bas
Invité
MessageSujet: Re: Quelques petits codes. Dim 22 Mar - 12:04
Une pro, peut-être pas, mais merci ! ♥️

Ça me fait hyper plaisir ce que tu dis là, surtout que c'est ma première véritable fiche ! Et bien sûr que tu peux l'utiliser sur le forum, même ailleurs si tu veux~ ! :3

Merci encore !
Revenir en haut Aller en bas
avatar
Messages : 1297
Date d'inscription : 26/10/2013
Voir le profil de l'utilisateur
MessageSujet: Re: Quelques petits codes. Dim 22 Mar - 12:45
Je confirme que tu es un Pro du codage
Ta fiche gère au top du top, comme toi, tu gères. Tu gères comme tes codages, je t'aime. Je t'aime. Je t'aime. Même si je ne te connais pas encore je t'aime. Je te viole, je te veux.

_________________


Spoiler:
 
Revenir en haut Aller en bas
Invité
MessageSujet: Re: Quelques petits codes. Mer 20 Mai - 20:10
Hey ! o/ ♥️

Petite "MàJ"

J'ai ajouté une fiche pour vos karaokés si vous voulez rendre ça plus présentable~ Vous pouvez l'utiliser ici ou ailleurs, ça ne me pose aucun problème. J'aimerais juste que le crédit reste -quand bien même ce n'est pas très utile.-
Les couleurs et l'image background sont bien sûr modifiable, si vous n'arrivez pas à le faire seul, n'hésitez pas à venir me demander.

Petite précision, en spoiler ça rend légèrement moins bien. Dans le sens où normalement les cadres et le textes ne sont pas aussi collés.

Voilà, voilà.

Aussi, si vous avez des avis et/ou des conseils à me donner, je suis preneuse ! o/


EDIT : +Ajout d'une "signature". C'est un code tout bête pour mettre trois gif alignés dans un cadre... Oui, bon tout le monde peut faire ça m'enfin voilà ! La typographie et la présentation du texte peuvent être modifiés. Aussi, les gif se recadrerons automatiquement.
Revenir en haut Aller en bas
Contenu sponsorisé
MessageSujet: Re: Quelques petits codes.
Revenir en haut Aller en bas
Quelques petits codes.
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Quelques petits Logos très rédicule pour rire un peu!
» petits aimants pour figurines
» Quelques videos sympathiques
» [Culture] Vidéos et Codes HeroPad sur le Blog de LEGO
» plus de petits elos ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ai no yume :: Le graphisme est un art :: Galerie-