HTML et CSS n'ont pas de secrets pour moi
✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : Tophiltre & Toshop CS5
| Posté le Sam 13 Oct - 17:17 “ Commentaire de Ocean Lounge. ” | | [Vous devez être inscrit et connecté pour voir ce lien] |
✎ MERCI DE BIEN LIRE CE PREMIER POST ! C'est épuisant de toujours se répéter. ✎ Le crédit mis en bas de la fiche est relativement discret, merci de ne pas le retirer. ✎ La fiche est un peu compliquée au niveau du codage donc si vous ne savez pas quoi modifier, n'hésitez pas à demander. ✎ Vous pouvez modifier les couleurs bien évidemment : ) ✎ Je précise au passage qu'en cas d'absence de ma part, les modifications de couleur ne se feront pas - je ne tiens pas à imposer aux modos la charge que celles-ci représentent ✎ Après avoir remplir le formulaire, le tout vous seras envoyé par mp |
html
- Spoiler:
- Code:
-
<center><div id="fondpv"><div id="nameprez">✓ Prénom Prénom² NomdeFamille <span class="arrowprez"></span><span class="arrowprez2"></span></div><div id="ava1"><table><tr><td><div style="margin:auto;text-align:center;width:100%">
<div align="left"><div id="ribbon"><div style="margin:auto;text-align:center;width:100%"><B class="khotitle2">son caratère</B></div><br/><div style="height: 225px;overflow:-moz-scrollbars-vertical;overflow-y:auto;"><div align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div> </div></div> </td><td><div class="cate2"><div class="cate2_img"><img src="http://img826.imageshack.us/img826/4629/ava1a.png" /></div><center><div class="cate2_description"><B class="khotitle2">en bref</B>
[b]Prénom :[/b] écrire ici ⊱ [b]Nom :[/b] écrire ici [b]⊱ Surnom(s) [/b]: écrire ici [b]⊱ Date & Lieu de Naissance :[/b] écrire ici [b]⊱ Je suis actuellement :[/b] écrire ici [b]⊱ Statut :[/b] célibataire/en couple [b]⊱ Rang social [/b]: écrire ici [b]⊱ Situation financière [/b]: écrire ici [b]⊱ Situation familiale :[/b] écrire ici [b]⊱ Groupe :[/b] écrire ici
<label for="pv1" class="inline">PV</label><input type="radio" name="CSS" id="oui" /> <label for="scena" class="inline">Scénar</label><input type="radio" name="CSS" id="non" /> <label for="invente" class="inline3">Inventé</label><input type="radio" name="CSS" value="non" id="non" /> [size=9]seulement ajouté [i]checked[/i] après le "oui" ou le "non" & avant le /[/size]</div></center>
[center][size=9]fiche (c) oceanlounge.[/size][/center]</div></td></tr></table></div>
<div id="ava1"><B class="khotitle2">ღ now, what's your past ?</B>
<img src="http://30.media.tumblr.com/tumblr_l9yrys6Iib1qdz7llo1_500.gif" style="width:350px;" /> <div align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div>
<div id="ava1"><br/><B class="khotitle2">ღ and the winner is</B> <img src="http://27.media.tumblr.com/tumblr_llggrxx8yE1qj36t5o1_500.gif" width="180" align="left" alt="" style="margin-right:10px;margin-bottom:4px; border: 1px solid #E2C5D3; padding: 1px;"/></a><div style="text-align: justify;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<div id="nameprez2">✓ Statut de la présentation: en cours ✓ Suivie par: pseudo <span class="arrowprez"></span><span class="arrowprez2"></span></div></div></div><br/></div></center>
css
- Spoiler:
- Code:
-
/* début du css pour l'avatar qui monte au passage de la souris */ .cate2{ width: 200px; height: 320px; overflow: hidden; border: 2px solid ghostwhite; background-color: #ffffff;}
.cate2_img{ position: relative; z-index: 2; width: 200px; height: 320px; margin-top: 0px; transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; overflow: auto;}
.cate2:hover .cate2_img{ margin-top: -320px; transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s;}
.cate2_description{ position: relative; z-index: 1; height: 320px; margin-top: 10px; text-align: justify; font-size: 11px; color: #8c8c8c; overflow: hidden; margin-left: 10px; margin-right: 10px;}
/* fin du css pour l'avatar qui monte au passage de la souris */
/* début du css le ruban en haut & en bas de la fiche */ .arrowprez{ width:0; height:0; line-height:0; border-left:20px solid transparent; border-top:10px solid #c8c8c8; top:32px; left:0; position:absolute;}
.arrowprez2{ width:0; height:0; line-height:0; border-right:20px solid transparent; border-top:10px solid #c8c8c8; top:104%; left:96%; position:absolute;}
/* fin du css le ruban en haut & en bas de la fiche */
/* début du css pour le fond de la fiche */ div#fondpv{ width:400px; padding:20px; BACKGROUND: white; /*box-shadow*/ -webkit-box-shadow:3px 3px 4px black; -moz-box-shadow:3px 3px 4px black; box-shadow:3px 3px 4px black; /*border-radius*/ -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; line-height:95%;} /* fin du css pour le fond de la fiche */
/* début du css pour les titres (bande du début&la fin) */ #nameprez{ margin: auto; background:#e3e3e3; /*linear-gradient*/ background:-webkit-gradient(linear,left top,left bottom,from(#e3e3e3),to(#c8c8c8)); background:-webkit-linear-gradient(top, #e3e3e3, #c8c8c8); background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -o-linear-gradient(top, #e3e3e3, #c8c8c8); background: linear-gradient(top, #e3e3e3, #c8c8c8); background:-webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8)); padding:10px 20px; margin-left:-40px; margin-top:0; position:relative; width:440px; /*box-shadow*/ -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; box-shadow:1px 1px 3px #292929; color:#454545; letter-spacing:1px; color:#B9121B; text-shadow:0 1px 1px #000000; font-size:15px; font-weight:bold; text-align: center; text-shadow:0 1px 0 white; z-index:999;}
#nameprez2{ background:#e3e3e3; margin: auto; padding:10px 20px; margin-left:-53px; margin-top:-20px; position:relative; width:440px; /*box-shadow*/ -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; box-shadow:1px 1px 3px #292929; color:#454545; text-shadow:0 1px 0 white; z-index:999;} /* fin du css pour les titres (bande du début&la fin) */
/* début du css pour la box caractère */ #ribbon { /*border-radius*/ -webkit-border-radius:7px 7px 0px 7px; -moz-border-radius:7px 7px 0px 7px; border-radius:7px 7px 0px 7px; opacity:0.90; -moz-opacity:0.90; filter:alpha(opacity=90); background: whitesmoke; padding: 10px 5px; left: 5%; margin-top: 0; margin-left: 0px; width: 98%; position: relative; -moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; color: #454545; text-shadow: 0 1px 0 white; z-indez: 8;}
/* fin du css pour la box caractère */
/* début pour les gros titres (écriture) */ .khotitle2{ font-family:segoe script; font-size:30px; text-align:center; color: goldenrod; margin-bottom:-5px; text-shadow:1px 1px 3px white; margin-top:-10px;} /* fin pour les gros titres (écriture) */
/* début pour le fond jaune/orange */
#ava1{ position:relative; top:-20px; z-index:7; text-align:center; padding:15px; background:URL('http://i.imgur.com/AgOnq.png'); /*border-radius*/ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
/* fin pour le fond jaune/orange */
|
|
Who run the world ?
✓ ANCIENNETE : : 26/12/2011
✓ LOGICIELS : : To shop :)
| Posté le Sam 13 Oct - 18:51 “ Commentaire de Emie ” | | Anh j'adore ! merci beaucoup !!! |
|
Who run the world ?
✓ ANCIENNETE : : 26/12/2011
✓ LOGICIELS : : Photoshop
▶ MUSIQUE DU MOMENT : : Never say never - JACOB ARTIST
▶ EMPLOI/ETUDES : : Infographiste
| Posté le Sam 13 Oct - 19:52 “ Commentaire de Amethyst. ” | | Cette fiche est superbe, merci pour ce partage |
|
Je débute, je suis un coquelicot
✓ ANCIENNETE : : 13/10/2012
✓ LOGICIELS : : photophiltre et tophop
| Posté le Dim 14 Oct - 12:10 “ Commentaire de Siiliia'♥ ” | | |
|
| Posté le “ Commentaire de Contenu sponsorisé ” | | |
|