Modèle de journal de bord

27/10/2013

Journal de bord

Si le topic ici explique ce qu'est le journal de bord et comment le remplir, ce topic-ci a pour objectif de vous fournir un ornement décoratif. Tout comme la fiche de relations, le code se compose en deux parties : HTML dans laquelle vous devrez remplir et CSS qu'il faudra joindre à la fin du message sans rien modifier.

HTML :

Code:: <div class="jdbname"></div>
<div class="jdbcadre01"><img src="liendelimagedevotrepersonnage" class="jdbimage" /><div class="sommairejdb"><div class="titresommaire">Journal de (nom du personnage)</div>
<div class="jdbongle" style="margin-top : 0px ;"><a href="#perso">Personnage</a></div><div class="jdbongle"><a href="#histoire">Histoire</a></div><div class="jdbongle"><a href="#biblerp">Bible RP</a></div><div class="jdbongle"><a href="#ongletlibre">Onglet libre</a></div><div class="jdbongle"><a href="#ongletlibre2">Onglet libre 2</a></div></div>
<div class="jdbcadre02"><div class="chapjdb" id="perso">Personnage</div>
A remplir

<div class="chapjdb" id="histoire">Histoire</div>
A remplir

<div class="chapjdb" id="biblerp">Bible des RP</div>
A remplir

<div class="chapjdb" id="ongletlibre">Onglet Libre 1</div>
A remplir

<div class="chapjdb" id="ongletlibre2">Onglet Libre 2</div>
A remplir

</div></div>
<div class="jdbname jdbfin"></div>

CSS :

Code:: <style type="text/css">.cla{ color : #B8A664 ; }.jdbname{ position : relative ; z-index : 10 ; padding : 5px 5px ; text-align : center ; margin : auto ; width : 680px ; margin-bottom : -19px ; height : 30px ; background-color : rgba(20,20,65,0.25) ; border : 1px solid rgba(135,206,235,0.5) ; border-radius : 40px / 80px ; border-bottom-left-radius : 0px ; border-bottom-right-radius : 0px ; }.jdbcadre01{ background-clip : padding-box ; border : 1px solid rgba(135,206,235,0.5) ; border-top : 0px solid red ; width : 660px ; padding : 5px 7.5px ; margin : auto ; color : steelblue ; background-color : rgba(20,20,50,0.2) ; background-image : url(http://nsa34.casimages.com/img/2013/12/30/131230103514122302.png) ; text-align : justify ; transition : 750ms ; margin-top : 2.5px ; margin-bottom : 2.5px ; font-family : sans-serif ; }.jdbcadre01:hover{ width : 660px ; transition : 750ms ; padding : 2.5px 15px ; margin-top : 0px ; margin-bottom : 0px ; border-radius : 2.5px ; } .jdbfin{ margin-bottom : 0px ; margin-top : -19px ; border-radius : 40px / 80px ; border-top-left-radius : 0px ; border-top-right-radius : 0px ; }.jdbimage{ transform: rotate(0deg) ; -webkit-transform: rotate(0deg) ; -moz-transform: rotate(0deg) ; -o-transform: rotate(0deg) ; -ms-transform: rotate(0deg) ; width : 150px ; margin : 2px 0px 2px 15px ; padding : 1px ; border : 1px solid rgba(135,206,235,0.5) ; border-radius : 10px / 30px ; display : inline-block ; transition : 750ms ; }.jdbimage:hover{ transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ; transition : 750ms ; }.sommairejdb{ width : 430px ; margin : 10px 20px 5px 35px ; padding : 5px 0px ; text-align : center ; display : inline-block ; vertical-align : top ; color : #B8A664 ; font-family : Electrolize ; }.titresommaire{ text-shadow : 1px -1px 5px skyblue ; font-size : 16px ; }.jdbongle{ font-variant : small-caps ; font-size : 18px ; margin : 7.5px ; min-width : 100px ; color : red ; padding : 5px 7.5px ; border : 1px solid #003b59 ; border-radius : 5px ; background-color : #000e17 ; box-shadow : 0px 0px 5px 0px rgba(135,206,235,0.5) inset , 0px 0px 0px yellow ; letter-spacing : 4px ; transition : 250ms ; }.jdbongle:hover{ box-shadow : 0px 0px 5px #B8A664 ; transition : 250ms ; letter-spacing : 0px ;}a:link, a:visited{ color : rgba(135,206,235,0.5) ; transition : 250ms ; }sommairejdb a{ color : rgba(135,206,235,0.5) ; transition : 250ms ; }.ligne{ box-shadow : 0px 0px 0px #69F ; }.jdbcadre02{ text-align : justify ; overflow : auto ; height : 540px ; color : cadetblue ; font-size : 11px ; font-family : sans-serif ; border : 1px solid rgba(135,206,235,0.5) ; padding : 5px 7.5px ; margin-top : 7.5px ; margin-bottom : 5px ; }.chapjdb{ background-color : rgba(20,20,40,0.3) ; border-radius : 10px ; padding : 5px 15px ; margin : -10px 20px ; margin-top : 7.5px ; text-align : center ; color : #B8A664 ; font-size : 12px ; font-family : Electrolize ; border : 1px solid rgba(135,206,235,0.5) ; font-variant : small-caps ; letter-spacing : 1px ; }</style>

Résultat :

Journal d'Ashley Madeline Williams

Personnage

A remplir

Histoire

A remplir

Bible des RP