AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Modèle de fiche de Journaux de Bord (facultatif)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
MessageAuteur
MessageSujet: Modèle de fiche de Journaux de Bord (facultatif)   Dim 6 Juil - 10:38


Nom Prénom
Petit texte, citation ou autre


Code:
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700italic' rel='stylesheet' type='text/css'><div id="content" style="text-align:center;background:#de3a3e;margin:auto; font-size:11px; font-family:arial; position:relative; width:450px;border-radius:10px; padding:100px 20px 0 ; height:500px;box-sizing:border-box;box-shadow:3px 3px 0 white,4px 4px 0 grey,6px 6px 0 white,7px 7px 0 grey,9px 9px 0 white, 10px 10px 0 grey,13px 13px 0 #de3a3e,10px 13px 0 #de3a3e"><img style="box-shadow:2px 0 4px grey;border:14px white solid; display:block;margin:auto; max-width:380px;" src="http://i.imgur.com/ctwI8ov.gif"/><div style="dont-size:12px;font-family:arial; line-height:22.25px;letter-spacing:0px;font-style:italic;margin-top:30px;">
<span style="font-size:32px;color:black;font-family: 'Playfair Display', serif; text-shadow:-1px -1px 0 rgba(0,0,0,0.35); ">Nom Prénom</span><span style="border-bottom:1px solid rgba(0,0,0,0.0);color:rgba(0,0,0,0.7)"><br/>Petit texte, citation ou autre</span></div></div>

1 - Pour changer la couleur du "journal"
Il faut repérer "#de3a3e" qui donne la couleur rouge et la changer par la couleur voulue. Il y en a trois en tout dans ce code.

2 - Modifier la marge du haut
Selon le gif que l'on met, la marge risque d'être trop grande ou trop petite. Alors il faut repérer "padding:100px 20px 0" et changer le 100 en une autre valeur (en gardant le px !!)

_________________


Dernière édition par Yeong Hyo Soo le Dim 6 Juil - 17:05, édité 1 fois
avatar
♫ DC : Song An Hi
♫ AVATAR : Son Dong Woon [BEAST]
♫ ÂGE : 23 ans
♫ POINTS : 328
A-Koustik

Voir le profil de l'utilisateur http://creaphy.olympe.in
Revenir en haut Aller en bas
MessageSujet: Re: Modèle de fiche de Journaux de Bord (facultatif)   Dim 6 Juil - 10:48

Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in eros magna. Ut vel risus auctor, vulputate ante ac, posuere tellus. Sed accumsan turpis turpis, id gravida nibh gravida sed. Integer egestas eget nulla sed tincidunt. Vivamus bibendum ac diam sit amet consequat. In hendrerit neque tortor, id aliquet velit posuere in. Sed feugiat tincidunt leo pretium interdum. Etiam eu mi tempus, sagittis dolor sed, tincidunt arcu.

Cras porttitor cursus urna a porta. Mauris et felis vitae lacus semper ultrices ut non sem. Nunc porta dui in sagittis volutpat. Etiam justo nunc, gravida dictum quam non, tincidunt accumsan massa. Mauris id sem ac sem dapibus commodo. Vestibulum et risus lectus. Integer tempor leo ut est fermentum, id posuere magna laoreet. Aliquam faucibus eros ut metus dictum ornare. Donec vitae volutpat nunc. Aenean sit amet urna ligula. Ut porta quis turpis ac posuere. Praesent posuere pulvinar nunc, eu venenatis nisi molestie ac. Curabitur dapibus libero sed justo semper, in luctus arcu aliquet. Mauris sagittis luctus malesuada. Maecenas ac aliquet quam. Proin non condimentum ligula.

Vestibulum ultrices quis felis fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac faucibus lacus. Maecenas ullamcorper tellus at felis porttitor, eu pretium sapien tincidunt. Sed convallis nisi nec lectus feugiat posuere. Praesent faucibus viverra arcu, a dignissim dolor volutpat sit amet. In a varius neque, id adipiscing ante.



1- Changer la couleur du "journal"
Repérer "#de3a3e" et changer par la couleur voulue. Elle apparaît 2 fois dans ce code.

2- Changer la marge entre le texte et les images du haut
Selon les gifs ajoutés, c'est possible qu'il y ait une marge trop grande, ou au contraire que cela passe par dessus le texte. Dans ce cas, repérer "margin-top:153px" et changer 150 par une autre valeur (en gardant le px !!)

3 - Ajouter une image dans le texte
Comme le code est un peu délicat, pour pouvoir garder les lignes sur les lignes du fond, il faut, pour ajouter une image, ajouter ce code
Code:
<img src="URL" height="60"/>
ou
Code:
<img src="URL" height="120"/>
selon la grandeur voulue.


Si vous avez des problèmes ou des questions, posez les à la suite !

Code:
<div style="border: rgba(0,0,0,0) solid 1px; font-size:11px; font-family:arial; position:relative; margin:40px auto; width:450px;background:url(http://img11.hostingpics.net/pics/629097paysageenprintemps154730.jpg) #f6f6f6; border-radius:10px; box-shadow:-1px 0 0 rgba(0,0,0,0.1),1px 1px 0 rgba(0,0,0,0.3),3px 3px 0 white,4px 4px 0 rgba(0,0,0,0.4), 6px 7px 0 white,7px 8px 0 rgba(0,0,0,0.5), 20px 12px 0 #de3a3e,0px 12px 0 #de3a3e;"><img style=" box-shadow:2px 0 8px grey;border:14px white solid; display:block;position:absolute; top:-20px;left:5px; transform:rotate(350deg); -ms-transform:rotate(350deg); -webkit-transform:rotate(350deg);" src="http://i.imgur.com/Xgg6IEZ.gif" width="200"/><img src="http://i.imgur.com/W9NtFyc.gif" width="200" style="border:12px white solid;display:block; box-shadow:2px 0 8px grey; position:absolute;top:-10px;right:-5px;transform:rotate(7deg);-ms-transform:rotate(7deg); -webkit-transform:rotate(7deg);"/><div style="padding:5px 10px 15px;font-size:12px;font-family:arial; margin-top:153px ;text-align:justify;line-height:22.25px;letter-spacing:0px;font-style:italic;"><span style="font-size:20px;color:black;padding-left:20px; ">Titre</span><span style="border-bottom:1px solid rgba(0,0,0,0.0);color:rgba(0,0,0,0.7)"> <img src="http://i.imgur.com/A1YGANA.gif" height="60"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in eros magna. Ut vel risus auctor, vulputate ante ac, posuere tellus. Sed accumsan turpis turpis, id gravida nibh gravida sed. Integer egestas eget nulla sed tincidunt. Vivamus bibendum ac diam sit amet consequat. In hendrerit neque tortor, id aliquet velit posuere in. Sed feugiat tincidunt leo pretium interdum. Etiam eu mi tempus, sagittis dolor sed, tincidunt arcu.

Cras porttitor cursus urna a porta. Mauris et felis vitae lacus semper ultrices ut non sem. Nunc porta dui in sagittis volutpat. Etiam justo nunc, gravida dictum quam non, tincidunt accumsan massa. Mauris id sem ac sem dapibus commodo. Vestibulum et risus lectus. Integer tempor leo ut est fermentum, id posuere magna laoreet. Aliquam faucibus eros ut metus dictum ornare. Donec vitae volutpat nunc. Aenean sit amet urna ligula. Ut porta quis turpis ac posuere. Praesent posuere pulvinar nunc, eu venenatis nisi molestie ac. Curabitur dapibus libero sed justo semper, in luctus arcu aliquet. Mauris sagittis luctus malesuada. Maecenas ac aliquet quam. Proin non condimentum ligula.

Vestibulum ultrices quis felis fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac faucibus lacus. Maecenas ullamcorper tellus at felis porttitor, eu pretium sapien tincidunt. Sed convallis nisi nec lectus feugiat posuere. Praesent faucibus viverra arcu, a dignissim dolor volutpat sit amet. In a varius neque, id adipiscing ante. </span></div>
</div>

_________________
avatar
♫ DC : Song An Hi
♫ AVATAR : Son Dong Woon [BEAST]
♫ ÂGE : 23 ans
♫ POINTS : 328
A-Koustik

Voir le profil de l'utilisateur http://creaphy.olympe.in
Revenir en haut Aller en bas
 
Modèle de fiche de Journaux de Bord (facultatif)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» modèle de fiche de liens
» Fiche d'accueil et de présentation
» [Fiche] judoBoy
» [Fiche] jeune-demon et radine
» [Fiche] Sombre-Panda

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
» K I R I N • :: ONCE UPON A TIME :: Gestion :: Journaux de bord-