Modèle de journal de bord

Messages :

Journal de bord

Ce topic-ci a pour objectif de vous fournir un ornement décoratif pour votre journal de bord. Tout comme la fiche de relations [A venir], 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. La modification du CSS demande de s'y connaître un minimum en codage pour ne pas faire n'importe quoi.

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">Compétences et équipement</a></div><div class="jdbongle"><a href="#ongletlibre2">Onglet libre </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">Archétypes, capacités et équipement</div>
Archétype :
Capacité :
Equipement :

Vehicule spatial :

<div class="chapjdb" id="ongletlibre2">Onglet Libre</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,30,40,0.25) ; border : 1px solid rgba(135,215,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,215,235,0.5) ; border-top : 0px solid red ; width : 675px ; padding : 5px 7.5px ; margin : auto ; color : steelblue ; background-color : rgba(20,30,50,0.2) ; background-image : url(http://nsa34.casimages.com/img/2013/12/30/131230103514122302.png) ; text-align : justify ; transition : 750ms ; margin-top : 5px ; margin-bottom : 5px ; font-family : sans-serif ; }.jdbcadre01:hover{ width : 675px ; transition : 750ms ; padding : 5px 7.5px ; 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{width : 150px ; margin : 2px 0px 2px 15px ; padding : 1px ; border : 1px solid rgba(135,215,235,0.5) ; border-radius : 10px / 30px ; display : inline-block ; transition : 750ms ; }.sommairejdb{ width : 430px ; margin : 10px 20px 5px 35px ; padding : 5px 0px ; text-align : center ; display : inline-block ; vertical-align : top ; color : mediumseagreen ; font-family : Electrolize ; }.titresommaire{ text-shadow : 1px -1px 5px black ; 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 : 15px ; background-color : #000e17 ; box-shadow : 0px 0px 5px 0px rgba(135,225,235,0.5) inset , 0px 0px 0px yellow ; letter-spacing : 4px ; transition : 250ms ; }.jdbongle:hover{ box-shadow : 0px 0px 5px seagreen ; transition : 250ms ; letter-spacing : 0px ;}.jdbongle a:link,.jdbongle a:visited{ color : rgba(135,225,235,0.5) ; transition : 250ms ; }sommairejdb a{ color : rgba(135,215,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,215,235,0.5) ; padding : 5px 7.5px ; margin-top : 7.5px ; margin-bottom : 5px ; }.chapjdb{ background-color : rgba(20,30,40,0.3) ; border-radius : 10px ; padding : 5px 15px ; margin : -10px 20px ; margin-top : 7.5px ; text-align : center ; color : seagreen ; font-size : 12px ; font-family : Electrolize ; border : 1px solid rgba(135,215,235,0.5) ; font-variant : small-caps ; letter-spacing : 1px ; }</style>

Résultat :

Journal d'Ashley Madeline Williams

Personnage

Histoire

Bible RP

Compétences et équipement

Onglet libre

Personnage

A remplir

Histoire

A remplir

Bible des RP