Les activités sur Kaitaku - modèle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Messages : 310
¥ : 2147483647
Date d'inscription : 20/09/2013
Emploi/études : Directeur du Body Scandals
avatar
PNJ

MessageSujet: Les activités sur Kaitaku - modèle   Dim 17 Sep - 20:36

Présentation Générale
Obligatoire

Code:
<center><div class="bloc_presa"><img src="URLGIF/IMAGE" style="width : 500px; margin-top: 10px; border-bottom : 4px; border: 1px solid white; "><div class="PresaNomPr">Nom </div>
<div class="News_infos"><div> Ici il te faudra décrire l'activité/lieu que possède/où travaille ton personnage. Si tu es en manque d'inspiration pour son organisation, il ne faut pas hésiter à jeter un coup d'œil sur celui du BS ou de ses petits camarades pour se faire une idée. Toutefois, pour te donner des pistes une description générale, l'histoire des lieux/de l'activité et les services proposés seront un bon début pour cette partie. Ces descriptions peuvent être bien évidement succinctes.

<div style="width: 465px; height: 10px; background-color: #261325; text-transform: uppercase; text-align: center;"><div style="margin-top: -9px;">Séparateur</div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet interdum massa, at bibendum nulla. Nulla mauris lacus, rhoncus vel commodo a, pretium at tellus. Maecenas dolor nisi, pulvinar vitae erat sed, posuere iaculis eros. Phasellus dignissim velit ligula, eget vestibulum justo accumsan sit amet. Maecenas sed sapien eget libero vulputate tincidunt vel interdum turpis. Cras cursus elit nec fringilla venenatis. Mauris vitae dignissim sapien. Ut semper laoreet enim, dignissim aliquet odio semper non.

Morbi a pharetra neque, non interdum quam. Aliquam laoreet ex ut tincidunt euismod. Quisque convallis, ligula sollicitudin volutpat efficitur, quam massa lacinia justo, vel laoreet lectus nibh id tortor. Nulla consequat, massa vitae facilisis gravida, velit enim porta mauris, in eleifend massa felis eget turpis. Mauris ullamcorper varius nunc in cursus. In dapibus nisl id venenatis vulputate. Sed malesuada mi nisi, nec aliquet leo vestibulum sit amet. Duis bibendum orci ut erat sagittis pulvinar ac sed nisl. Ut id purus at nulla pharetra viverra placerat non nisl. Proin sagittis ante nec justo rhoncus tristique. Sed quis metus eu ipsum dignissim tincidunt ut non leo. Duis commodo mollis tellus et pulvinar.

</div></div>
</div></center>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Messages : 310
¥ : 2147483647
Date d'inscription : 20/09/2013
Emploi/études : Directeur du Body Scandals
avatar
PNJ

MessageSujet: Re: Les activités sur Kaitaku - modèle   Dim 17 Sep - 20:36

Tour des lieux
Facultatif

Code:
<center><div class="bloc_presa"><div class="PresaNomPr">Un tour des lieux</div>
<div class="News_infos"><div>
<head><style>ul{width:500px;height:230px;} ul li{list-style:none;float:left;width:150px;height:100px;margin:5px;} ul li:nth-child(3){clear:left;} ul img{position:absolute;z-index:1;height:100px;width:150px;margin:0;box-shadow:0 0 3px black;-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);-moz-transition:all .5s cubic-bezier(.6,2,.4,1);-ms-transition:all .5s cubic-bezier(.6,2,.4,1);-o-transition:all .5s cubic-bezier(.6,2,.4,1);transition:all .5s cubic-bezier(.6,2,.4,1);} ul li:hover img{z-index:5;-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);-o-transform: scale(1.5);transform: scale(1.5);box-shadow:0 0 10px black;} ul:hover li:not(:hover) img{-webkit-filter: grayscale(1) blur(5px);-moz-filter: grayscale(1) blur(5px);-ms-filter: grayscale(1) blur(5px);-o-filter: grayscale(1) blur(5px);filter: grayscale(1) blur(5px);}</style></head>



<div style="width: 465px; height: 10px; background-color: #261325; text-transform: uppercase; text-align: center;"><div style="margin-top: -9px;">Séparateur</div></div>


</div></div>
</div></center>


Parce que c'est toujours plus beau avec de belles images

Gauche 3 images

Code:
<ul><table style="text-align: left; width: 500px; height: 230px; margin-left: -50px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="width:150px;"><li><img src="IMAGE1" style="height:100px;width:150px;"></li></td><td><li><img src="IMAGE2" style="height:100px;width:150px;"></li></td></tr><tr><td style="width:150px; vertical-align:top;"><li><img src="IMAGE3" style="height:100px;width:150px;"></li></td><td style="text-align: justify; vertical-align: top; width=300px; padding-right: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td></tr></tbody></table></ul>


Gauche 2 images

Code:
<div style="margin-left: -55px;"><ul><table style="text-align: left; width: 500px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="vertical-align:top;"><li><img src="IMAGE1" style="height:100px;width:150px;"></li></td><td colspan="1" rowspan="2" style="text-align:justify; vertical-align:top; padding-right: 15x; width=300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td></tr><tr><td><li><img src="IMAGE2" style="height:100px;width:150px;"></li></td></tr></tbody></table></ul></div>

Gauche 1 image

Code:
<div style="margin-left: -50px;"><ul><table style="text-align: left; width: 500px; height: 100px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="width:150px;"><li><img src="IMAGE" style="height:100px;width:150px;"></li></td><td style="text-align: justify; vertical-align: top; width=300px; padding-right: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td></tr></tbody></table></ul></div>

Droite 3 images

Code:
<div style="margin-left: -50px;"><ul><table style="text-align: left; width: 500px; height: 230px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="width: 300px; text-align: justify; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td><td style="vertical-align:bottom;"><li><img src="IMAGE1" style="height:100px;width:150px;"></li></td></tr><tr><td style="width:150px; text-align:right;"><li><img src="IMAGE2" style="height:100px;width:150px;"></li></td><td style="width:150px;"><li><img src="IMAGE3" style="height:100px;width:150px;"></li></td></tr></tbody></table></ul></div>

Droite 2 images

Code:
<div style="margin-left: -50px;padding-right: 10px;"><ul><table style="text-align: left; width: 500px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td colspan="1" rowspan="2" style="text-align:justify; vertical-align:top; width=300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td><td colspan="1" rowspan="1"><li><img src="IMAGE1" style="height:100px;width:150px;"></li></td></tr><tr><td><li><img src="IMAGE2" style="height:100px;width:150px;"></li></td></tr></tbody></table></ul></div>

Droite 1 image

Code:
<div style="margin-left: -50px;"><ul><table style="text-align: left; width: 500px; height: 100px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td style="width:300px; text-align: justify; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non lacus dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. In vitae tempus erat. Donec pellentesque dignissim libero et blandit. Etiam scelerisque justo sed libero feugiat, nec condimentum nunc malesuada. Mauris sed diam a nisl ornare laoreet. Sed in leo metus. Vivamus efficitur sit amet lorem sit amet consectetur. Fusce quis congue diam, et porta turpis. Cras in velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pellentesque ligula sodales, placerat eros eu, malesuada ex.</td><td style="width=150px;"><li><img src="IMAGE" style="height:100px;width:150px;"></li></td></tr></tbody></table></ul></div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Messages : 310
¥ : 2147483647
Date d'inscription : 20/09/2013
Emploi/études : Directeur du Body Scandals
avatar
PNJ

MessageSujet: Re: Les activités sur Kaitaku - modèle   Dim 17 Sep - 20:36

Les postes
Obligatoire

Code:
<center><div class="bloc_presa"><div class="PresaNomPr">Les postes </div>
<div class="News_infos"><div>
[center][size=14]Patron [/size]
[/center]


<div style="width: 465px; height: 10px; background-color: #261325; text-transform: uppercase; text-align: center;"><div style="margin-top: -9px;">Poste</div></div>

...

<div style="width: 465px; height: 10px; background-color: #261325; text-transform: uppercase; text-align: center;"><div style="margin-top: -9px;">Poste</div></div>

...


</div></div>
</div></center>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Les activités sur Kaitaku - modèle
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Kaitaku :: Commissariat :: Le code pénal :: Annexes :: Les activités sur Kaitaku-
Sauter vers: