
Bon il y a fort longtemps que je ne vous avez pas proposée une petite ressource. Cette fois me voici me voilà avec un template de « Card » pour vous.
Ce template contient :
- Un fichier « psd » qui vous permettra si vous le souhaitez modifier le design de celle-ci.
- Un autre fichier « psd » nommé « sprite.psd » qui contient les éléments du design regroupés dans un fichier (picto + networks).
- Toute une partie « html » avec le css, le js, l’habillage, les images et bien sûr le code source (code source commenté)
- Une version compatible « mobile » réalisé avec des « media queries »
Version web :

Version mobile :

Téléchargement de la source ici.
Voici quelques petites astuces si vous désirez changer la couleur du texte ou encore enlever des réseaux sociaux.
Pour changer la couleur du texte soit le « name » rendez-vous à la ligne 43 de la feuille du style css.
#header .name { color:#cfba2b; }
Pour changer la couleur du « A propos », rendez-vous à la ligne 51 de la feuille de style css.
#main .about { color:#cfba2b; }
Pour changer la couleur du « hover du mail » allez à la ligne 58 de la feuille de style css.
#main .informations li a:hover { color:#cfba2b}
Et enfin si vous mettez moins de « networks » vous vous apercevrez qu’ils ne sont plus alignés au centre. Pour y remédier allez à la ligne 64 de la feuille de style css et changer le « margin-left »
#footer .networks { margin-left:102px; }
Si vous avez des questions n’hésitez pas ! A très vite sur Xbition-art, le blog !
6 Commentaires pour “Un template « vCard » pour vous.”
1
Benjamin Fréva Le 27 octobre à 16:52
Super ta carte.
Simplement tu aurais du utiliser la techno less pour personaliser la CSS. cf : http://lesscss.org/
Dans le footer j’aurai utilisé un ul li. Et pas plein de de div comme c’est le cas. Car la ce que tu fais dans ton footer, c’est une liste.
Sinon c’est ton bon
.
2
Xbition-art Le 27 octobre à 17:18
Oui pour le footer j’avais fais une liste mais jquery tools avec le tooltips en ul li cela ne marché pas alors j’ai du faire une concession
3
Philippe Sainte-Laudy Le 27 octobre à 17:53
Bonjour
Très sympa cette carte, si c’est pas trop compliqué tu peux me dire comment intégrer ces fichiers sur un site WordPress ? Merci
4
Philippe Sainte-Laudy Le 28 octobre à 16:58
Bon… ça doit être une question bête… pas grave.
Ciao
5
Xbition-art Le 28 octobre à 19:55
Tu t’y connais un peu sous wordpress ou pas du tout ? Sinon oui je peut t’aider mais soit pas si presser je ne passe mon temps sur les commentaire de mon blog
Voici mon mail : franck.julie@xbition-art.fr dis moi exactement ce que tu aimerais sous wp et je t’expliquerai par mail
Cordialement,
6
Julien Le 7 novembre à 23:05
Merci beaucoup pour ce template, que je vais utiliser !