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
Yeong Hyo Soo
♫ DC : Song An Hi
♫ AVATAR : Son Dong Woon [BEAST]
♫ ÂGE : 23 ans
♫ POINTS : 328
Sujet: 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>
