Rappel du premier message :
Bonjour !
Alors voilà une petite fiche de relations assez basique, avec quelques effets CSS. Pour que le code soit utilisable simplement, j'ai volontairement séparé le CSS du HTML. L'inconvénient, c'est que la personnalisation devient un peu plus compliquée. Bref, trêve de bavardages, voilà un aperçu!
Qui est-ce ?
BEAU ❖ PARFAIT ❖ FANTASTEEK
SURDOUÉ ❖ UNIQUE ❖ SYMPATHIQUE
Anglais, aime le jus d'orange et les mannequinettes en bois.
Prêtre-roi d'Inanna
Suisse
17 ans
Très mignonne
♥ ♥ ♥
Larbin de Nanna
Allemand
35ans
Prévoyant
Mon meilleur ami
Créanne d'Ersh
Canadien
368 ans
Démoniaque
Mon ennemi juré.
Et maintenant le code, en plusieurs parties pour simplifier la chose:
Le CSS
Après réfection, voici le code pour avoir une fiche centrée:
Comme cette fiche est prévue pour être postée dans les messages, les sauts de lignes sont de véritables sauts de ligne, non pas des balises br.
Voilà! ~
J'attaque la seconde partie, la personnalisation:
Bonjour !
Alors voilà une petite fiche de relations assez basique, avec quelques effets CSS. Pour que le code soit utilisable simplement, j'ai volontairement séparé le CSS du HTML. L'inconvénient, c'est que la personnalisation devient un peu plus compliquée. Bref, trêve de bavardages, voilà un aperçu!
Qui est-ce ?
BEAU ❖ PARFAIT ❖ FANTASTEEK
SURDOUÉ ❖ UNIQUE ❖ SYMPATHIQUE
Anglais, aime le jus d'orange et les mannequinettes en bois.
Charles Frederick Worth
127 ans, émissaire de Dieu
On recherche
-Un meilleur ami à noyer sous un flot de paroles
-Une maman
-Un papa pour construire un lit
-Un souffre-douleur, disponible 24h/24 sachant se plaindre juste ce qu'il faut, beau pour prendre plaisir à le défigurer, disposé à rester amorphe en endurant des coups, échangeable à vie.
-Un ennemi, histoire de pas trop s'ennuyer.
-Un meilleur ami à noyer sous un flot de paroles
-Une maman
-Un papa pour construire un lit
-Un souffre-douleur, disponible 24h/24 sachant se plaindre juste ce qu'il faut, beau pour prendre plaisir à le défigurer, disposé à rester amorphe en endurant des coups, échangeable à vie.
-Un ennemi, histoire de pas trop s'ennuyer.
Liste des RPs
-On ne badine pas avec l'amour, Musset
-Les Plaideurs, Racine
-Chatterton, Vigny
-L'avare, Molière
-Les précieuses ridicules, Molière
-Le Bourgeois Gentilhomme, Molière
-Phèdre, Platon
-Le jeu de l'amour et du hasard, Marivaux
-Bérénice, Racine
-On ne badine pas avec l'amour, Musset
-Les Plaideurs, Racine
-Chatterton, Vigny
-L'avare, Molière
-Les précieuses ridicules, Molière
-Le Bourgeois Gentilhomme, Molière
-Phèdre, Platon
-Le jeu de l'amour et du hasard, Marivaux
-Bérénice, Racine
Mes amis
Prêtre-roi d'Inanna
Suisse
17 ans
Très mignonne
♥ ♥ ♥
Miss Bernina
Je l'aiiimeuh...
Je l'aiiimeuh...
Larbin de Nanna
Allemand
35ans
Prévoyant
Mon meilleur ami
Singer
Lui, c'est mon meilleur ami. Il se promène toujours avec son parapluie, comme ça pas de risque de faire gonfler le bois! Hé oui, il tient à rester mince, Singer... En plus il chante, des fois.
Lui, c'est mon meilleur ami. Il se promène toujours avec son parapluie, comme ça pas de risque de faire gonfler le bois! Hé oui, il tient à rester mince, Singer... En plus il chante, des fois.
Ennemis
Créanne d'Ersh
Canadien
368 ans
Démoniaque
Mon ennemi juré.
Mr. Pfaff
Il est méchannnnnnt Maman!
Il est méchannnnnnt Maman!
Et maintenant le code, en plusieurs parties pour simplifier la chose:
Le CSS
Après réfection, voici le code pour avoir une fiche centrée:
- Spoiler:
- Code:
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<style>.r_contenu{opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; ms-transition: all 0.5s;-o-transition: all 0.5s; -moz-box-shadow: 2px 2px 7px 0px #000000; -webkit-box-shadow: 2px 2px 7px 0px #000000; -o-box-shadow: 2px 2px 7px 0px #000000;box-shadow: 2px 2px 7px 0px #000000;filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=7);}.r_contenu:hover{opacity:1;}.r_image{opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); z-index:1;} .r_image:hover{ opacity:0; transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg);}.r_titre{font-size:35px; font-family: 'The Girl Next Door', cursive; color: #C9EAA5; text-shadow: 2px 2px 4px black; text-align: center; margin: auto;font-weight: bold;}.r_soustitre{font-size:20px; font-family: 'The Girl Next Door', cursive; color: #C9EAA5; text-shadow: 1px 1px 2px black; text-align: center; margin: auto;}.r_titre2{font-size:20px; font-family: 'The Girl Next Door', cursive; color: black; text-shadow: 1px 1px 2px #C9EAA5; font-weight: bold;}.r_zone{ background: white; overflow: auto; border-top: 7px solid #C9EAA5; border-bottom: 7px solid #C9EAA5; -moz-box-shadow: 2px 2px 7px 0px #000000; -webkit-box-shadow: 2px 2px 7px 0px #000000; -o-box-shadow: 2px 2px 7px 0px #000000;box-shadow: 2px 2px 7px 0px #000000; filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=7); text-align: left;}.relations{background: #2E372E; border-radius: 25px; border-top: 8px solid #C9EAA5; border-bottom: 8px solid #C9EAA5; position: relative;width: 500px;}.r_iun{width: 140px; height: 140px; position: absolute; top: 20px;left: 20px; z-index:1;}.r_cun{width: 120px; height: 120px; background:white; position: absolute; top: 20px; left: 20px; padding: 10px;}.r_zun{width: 280px; height: 120px; position: absolute; top: 20px; left: 180px; padding: 10px; border:0;}.r_header{width: 460px; height: 220px; position: absolute; top: 30px; left: 20px;}.r_cdeux{width: 430px; height: 190px; background:white; position: absolute; top: 30px; left: 20px; padding: 15px;}.r_zdeux{width: 200px;height: 200px; padding:10px;}</style>
<center>
<div class="relations"><div style="position: relative; width:500px; height: 270px;">
<div class="r_image r_header" style="background-image: url(http://i39.servimg.com/u/f39/15/54/06/55/paul10.jpg);"></div>
<div class="r_contenu r_cdeux">
<span class="r_titre2">Qui est-ce ?</span>
<div style=" height:1em; width: 400px; margin: auto; border: 1px inset black;">[scroll]UNE PETITE DEVISE ? [/scroll]</div>
QUALITÉ ❖ DÉFAUT ❖ QUALITÉ
DÉFAUT ❖ QUALITÉ ❖ DÉFAUT
Nationalité, préférences, autres
[right]<a href="ADRESSE DE LA PAGE">texte du lien</a>[/right]
</div></div>
<div class="r_titre">VOTRE NOM</div>
<div class="r_soustitre">AGE, CLASSE ET RANG</div>
[center]<table width="470"><tr><td><div class="r_zone r_zdeux"><span class="r_titre2">On recherche</span>
-VOUS CHERCHEZ UN AMI?
</div></td><td width="10"></td><td><div class="r_zone r_zdeux"><span class="r_titre2">Liste des RPs</span>
-LISTE DE VOS RPs
</div></td></tr></table>[/center]
</div>
<div class="r_titre">AMI</div>
<div class="relations" style="height:180px">
<div class="r_image r_iun" style="background-image: url('http://i39.servimg.com/u/f39/15/54/06/55/paul210.jpg');"></div>
<div class="r_contenu r_cun">
Rang
Nationalité
Age
Qualité
type de lien
</div><div class="r_zone r_zun">
<span class="r_titre2">SON NOM</span>
DESCRIPTION DE VOTRE LIEN AVEC LUI/ELLE</div>
</div>
<div class="r_titre">ENNEMI</div>
<div class="relations" style="height:180px">
<div class="r_image r_iun" style="background-image: url('http://i39.servimg.com/u/f39/15/54/06/55/paul210.jpg');"></div>
<div class="r_contenu r_cun">
Rang
Nationalité
Age
Qualité
type de lien
</div><div class="r_zone r_zun">
<span class="r_titre2">SON NOM</span>
DESCRIPTION DE VOTRE LIEN AVEC LUI/ELLE</div>
</div>
</center>
Comme cette fiche est prévue pour être postée dans les messages, les sauts de lignes sont de véritables sauts de ligne, non pas des balises br.
Voilà! ~
J'attaque la seconde partie, la personnalisation:
Dernière édition par Alumine le Lun 18 Aoû 2014 - 20:31, édité 2 fois
