Test d'Alzufen


 
AccueilAccueil  PortailPortail  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 [Commande] Fiche RP Fifille

Aller en bas 
AuteurMessage
Alzufen
Maître de Timmy
avatar

Date d'inscription : 15/08/2013
Age : 73
Localisation : Ici

MessageSujet: [Commande] Fiche RP Fifille   Sam 8 Nov - 16:36








Welcome... In my... NIGHTMARE !




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales porta hendrerit. Aenean vitae posuere dolor, quis laoreet augue. Praesent in dolor nibh. Aliquam consectetur felis non risus vehicula tempor. Proin dapibus ac risus vel dictum. Donec in elit metus. Cras molestie magna non ipsum dignissim consectetur. Nulla ut odio lectus. Nunc sed laoreet est, eget pulvinar nibh. Pellentesque nec nulla tempor, suscipit arcu quis, auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc fringilla augue non leo varius aliquam. Pellentesque metus enim, vestibulum a rhoncus at, commodo et ipsum. Aliquam ac nibh dolor.



- Curabitur cursus elit quis lacinia interdum. Fusce eleifend odio sed vulputate bibendum. Vestibulum vel eleifend libero. Duis eget turpis ex. Nulla fermentum eros sapien, eget mollis nisi aliquet at. Curabitur laoreet ac justo ac luctus. Sed rhoncus ornare sem vitae faucibus. Mauris eu interdum neque, vel vulputate dui.






- Nulla eu fermentum turpis. Phasellus eu nisl ac tellus imperdiet scelerisque. Sed mauris enim, eleifend cursus faucibus ultricies, malesuada id justo. Nullam quis mauris pulvinar, tempus sem placerat, tempus libero. Maecenas libero turpis, hendrerit in tellus eget, luctus consequat quam. Sed a metus nisi. Etiam lobortis ipsum non enim iaculis, vel sollicitudin turpis pharetra. Suspendisse auctor, nisi ac fringilla porttitor, leo lacus consectetur enim, in cursus neque orci eu est. Fusce eget dolor non nunc placerat tincidunt. Sed in ante eget dui ultrices egestas. Integer non ornare lectus. Nulla tristique ut turpis sit amet ornare. Nunc egestas velit sed dolor gravida consectetur.



Aenean blandit arcu non facilisis consequat. Maecenas ut ex at sapien ultrices auctor eu et ante. Sed pharetra rutrum orci, ac scelerisque odio imperdiet vitae. Donec non lectus rutrum, consectetur felis sit amet, tristique tellus. Aenean commodo, nunc a fermentum tristique, sem ligula semper felis, vitae accumsan felis leo suscipit risus. Aliquam pharetra lacinia ipsum et volutpat. Ut eu fringilla enim. Sed ut orci nunc. Nunc ultrices tortor quis egestas ultricies. Vivamus volutpat hendrerit massa id vulputate. Praesent pretium bibendum ipsum accumsan sodales. Cras feugiat ex et malesuada fermentum. Morbi ac magna feugiat, eleifend tortor a, dictum turpis. Fusce sed accumsan eros. Fusce non dictum turpis, sit amet cursus elit. Donec eget sagittis diam. Suspendisse egestas leo nisi, at ullamcorper ipsum auctor nec.

Fusce vehicula sodales urna id dignissim. Nam nisl libero, vehicula in ante quis, aliquet sodales mi. In iaculis laoreet sapien nec pretium. Morbi condimentum ut ex ut rhoncus. Suspendisse eget elit tortor. Proin rhoncus, nisi quis accumsan lobortis, elit ligula molestie purus, ac malesuada leo libero eu lectus. Vivamus et augue sed urna porta dignissim id vitae lacus. Sed volutpat viverra lectus, sit amet venenatis mi posuere et. Ut facilisis metus eget hendrerit tempus. Cras tempus lectus ut lacus varius, quis vehicula quam sollicitudin. Nulla ipsum eros, rutrum eu nisl vel, ullamcorper facilisis mi.


Trick or Treat ?(c) Alzufen






Le code de la fiche complète :

Code:
<div id="fiche_fifille"><link href='http://fonts.googleapis.com/css?family=Kaushan+Script|Redressed|Quintessential' rel='stylesheet' type='text/css'/>
<style>#fifille:hover h1{color: #CDABFF !important; transform: scale(1)!important;}.fifille_left div:hover{transform: rotate(360deg);}.fifille_right div:hover{transform: rotate(-360deg);}#fiche_fifille br{display: none;}#fifille_texte span br{display: initial;}</style>
<div style="width: 500px; min-height: 600px; box-shadow: 3px 3px 3px #000, -3px -3px 3px #000, 3px -3px 3px #000, -3px 3px 3px #000; border-radius: 5px 5px 3px 3px; margin: auto;">
<div style="width: 500px; background: #603667;; border-radius: 5px 5px 2px 2px;">
<div style="width: 500px; height: 200px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg); border-radius: 5px 5px 0 0;">
</div>
<div id="fifille">
<h1 style="text-align: center; font: 32px 'Kaushan Script'; margin-top: -28px; color: #FFAA25;; text-shadow: 1px 1px #000; transition: 1s all; transform: scale(0.7);">Welcome... In my... NIGHTMARE !</h1>
</div>
<div style="width: 470px; min-height: 385px; border-right: 4px solid #412249; border-left: 4px solid #412249; background: #301834; margin: -40px 0 0 6px; padding: 15px 5px 5px 5px; color: #F80; font: 15px 'Redressed'; text-align: justify;" id ="fifille_texte">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales porta hendrerit. Aenean vitae posuere dolor, quis laoreet augue. Praesent in dolor nibh. Aliquam consectetur felis non risus vehicula tempor. Proin dapibus ac risus vel dictum. Donec in elit metus. Cras molestie magna non ipsum dignissim consectetur. Nulla ut odio lectus. Nunc sed laoreet est, eget pulvinar nibh. Pellentesque nec nulla tempor, suscipit arcu quis, auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc fringilla augue non leo varius aliquam. Pellentesque metus enim, vestibulum a rhoncus at, commodo et ipsum. Aliquam ac nibh dolor.</span>
<div style="color: #fff; font: 11px 'Quintessential'; margin-top: 10px;" class="fifille_left">
<div style="width:50px; height: 50px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg) 34% 40%; float: left; border-radius: 25px; margin-right: 5px; transition: 1s all;">
</div>
<span>- Curabitur cursus elit quis lacinia interdum. Fusce eleifend odio sed vulputate bibendum. Vestibulum vel eleifend libero. Duis eget turpis ex. Nulla fermentum eros sapien, eget mollis nisi aliquet at. Curabitur laoreet ac justo ac luctus. Sed rhoncus ornare sem vitae faucibus. Mauris eu interdum neque, vel vulputate dui.</span>
</div>
<div style="clear:both;">
</div>
<div style="color: #f00; font: 11px 'Quintessential'; margin-top: 10px;" class="fifille_right">
<div style="width:50px; height: 50px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg) 34% 40%; float: right; border-radius: 25px; margin-left: 5px; transition: 1s all;">
</div>
<span>- Nulla eu fermentum turpis. Phasellus eu nisl ac tellus imperdiet scelerisque. Sed mauris enim, eleifend cursus faucibus ultricies, malesuada id justo. Nullam quis mauris pulvinar, tempus sem placerat, tempus libero. Maecenas libero turpis, hendrerit in tellus eget, luctus consequat quam. Sed a metus nisi. Etiam lobortis ipsum non enim iaculis, vel sollicitudin turpis pharetra. Suspendisse auctor, nisi ac fringilla porttitor, leo lacus consectetur enim, in cursus neque orci eu est. Fusce eget dolor non nunc placerat tincidunt. Sed in ante eget dui ultrices egestas. Integer non ornare lectus. Nulla tristique ut turpis sit amet ornare. Nunc egestas velit sed dolor gravida consectetur.</span>
</div>
<div style="clear:both; margin-bottom: 10px;">
</div>
<span>Aenean blandit arcu non facilisis consequat. Maecenas ut ex at sapien ultrices auctor eu et ante. Sed pharetra rutrum orci, ac scelerisque odio imperdiet vitae. Donec non lectus rutrum, consectetur felis sit amet, tristique tellus. Aenean commodo, nunc a fermentum tristique, sem ligula semper felis, vitae accumsan felis leo suscipit risus. Aliquam pharetra lacinia ipsum et volutpat. Ut eu fringilla enim. Sed ut orci nunc. Nunc ultrices tortor quis egestas ultricies. Vivamus volutpat hendrerit massa id vulputate. Praesent pretium bibendum ipsum accumsan sodales. Cras feugiat ex et malesuada fermentum. Morbi ac magna feugiat, eleifend tortor a, dictum turpis. Fusce sed accumsan eros. Fusce non dictum turpis, sit amet cursus elit. Donec eget sagittis diam. Suspendisse egestas leo nisi, at ullamcorper ipsum auctor nec.

Fusce vehicula sodales urna id dignissim. Nam nisl libero, vehicula in ante quis, aliquet sodales mi. In iaculis laoreet sapien nec pretium. Morbi condimentum ut ex ut rhoncus. Suspendisse eget elit tortor. Proin rhoncus, nisi quis accumsan lobortis, elit ligula molestie purus, ac malesuada leo libero eu lectus. Vivamus et augue sed urna porta dignissim id vitae lacus. Sed volutpat viverra lectus, sit amet venenatis mi posuere et. Ut facilisis metus eget hendrerit tempus. Cras tempus lectus ut lacus varius, quis vehicula quam sollicitudin. Nulla ipsum eros, rutrum eu nisl vel, ullamcorper facilisis mi.</span>
<div style="background: #000; width: 488px; height: 10px; margin: 5px 0 -5px -9px;">
<span style="font-size: 12px; color: #fff; margin-left: 5px;">Trick or Treat ?</span><span style="float: right; font-size: 9px; color: #fff; opacity: 0.5; margin: 1px 5px 0 0;">(c) Alzufen</span>
</div>
</div>
</div>
</div>
</div>

Pour rajouter des paroles à gauche :
Code:
<div style="color: #fff; font: 11px 'Quintessential'; margin-top: 10px;" class="fifille_left">
<div style="width:50px; height: 50px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg) 34% 40%; float: left; border-radius: 25px; margin-right: 5px; transition: 1s all;">
</div>
<span>- Curabitur cursus elit quis lacinia interdum. Fusce eleifend odio sed vulputate bibendum. Vestibulum vel eleifend libero. Duis eget turpis ex. Nulla fermentum eros sapien, eget mollis nisi aliquet at. Curabitur laoreet ac justo ac luctus. Sed rhoncus ornare sem vitae faucibus. Mauris eu interdum neque, vel vulputate dui.</span>
</div>
<div style="clear:both;">
</div>

Il faut changer le "background: url()" pour changer l'image de parole. Et il faut rajouter un "margin-bottom: 10px;" après "clear:both;" si c'est la dernière parole avant du texte narratif.

Pour rajouter du texte de parole à droite :

Code:
<div style="color: #f00; font: 11px 'Quintessential'; margin-top: 10px;" class="fifille_right">
<div style="width:50px; height: 50px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg) 34% 40%; float: right; border-radius: 25px; margin-left: 5px; transition: 1s all;">
</div>
<span>- Nulla eu fermentum turpis. Phasellus eu nisl ac tellus imperdiet scelerisque. Sed mauris enim, eleifend cursus faucibus ultricies, malesuada id justo. Nullam quis mauris pulvinar, tempus sem placerat, tempus libero. Maecenas libero turpis, hendrerit in tellus eget, luctus consequat quam. Sed a metus nisi. Etiam lobortis ipsum non enim iaculis, vel sollicitudin turpis pharetra. Suspendisse auctor, nisi ac fringilla porttitor, leo lacus consectetur enim, in cursus neque orci eu est. Fusce eget dolor non nunc placerat tincidunt. Sed in ante eget dui ultrices egestas. Integer non ornare lectus. Nulla tristique ut turpis sit amet ornare. Nunc egestas velit sed dolor gravida consectetur.</span>
</div>
<div style="clear:both; margin-bottom: 10px;">
</div>

Il faut retirer le "margin-bottom: 10px;" si ce n'est pas la dernière parole avant du texte narratif. Pour changer l'image c'est comme au dessus.

Pour rajouter du texte narratif il te suffit de l'écrire entre les balises "span" comme ceci :
Code:
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales porta hendrerit. Aenean vitae posuere dolor, quis laoreet augue. Praesent in dolor nibh. Aliquam consectetur felis non risus vehicula tempor. Proin dapibus ac risus vel dictum. Donec in elit metus. Cras molestie magna non ipsum dignissim consectetur. Nulla ut odio lectus. Nunc sed laoreet est, eget pulvinar nibh. Pellentesque nec nulla tempor, suscipit arcu quis, auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc fringilla augue non leo varius aliquam. Pellentesque metus enim, vestibulum a rhoncus at, commodo et ipsum. Aliquam ac nibh dolor.</span>

Enfin, pour changer l'image en haut, il te suffit de changer le background ici :
Code:
<div style="width: 500px; height: 200px; background: url(http://image.noelshack.com/fichiers/2014/45/1415401262-ia-600-1796244.jpg); border-radius: 5px 5px 0 0;">
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://t-alzufen.kanak.fr
 
[Commande] Fiche RP Fifille
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Commande Fiche de Pub
» commande menu "Enregistrer"
» Commande et retrosignalisation d'aiguilles + RRTC
» nouvelle commande
» Commande de PA.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Test d'Alzufen :: Catégorie 1 :: Test en Codage-
Sauter vers: