''Qui nous somme et qui nous devons être pour survivre sont deux choses bien différentes.''
               
Bellamy Blake
 
''On a tous des monstres en nous. Et parfois ils prennent le dessus.''
               
Lincoln
 
''La souffrance, la haine et l’envie, c’est sûrement ce qui me représente le mieux. Si vous m’enlevez ça, il ne me reste plus grand chose.
               
John Murphy
 
''Note pour moi même, la prochaine fois, sauve la fille !''
               
Monty Green
 
''je suis descendu de l'espace , j'ai défié la mort, tout ça était pour une raison.''
               
Thelonious Jaha
 
''La délivrance vient avec un prix. Je le supporte pour qu’eux n’aient pas à le faire.''
               
Dante Wallace
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

 :: New Game :: Didacticiel Voir le sujet précédent Voir le sujet suivant Aller en bas

Codage

avatar
Blablabla
Blablabla
Messages : 145
Date d'inscription : 28/10/2011
Jeu 14 Juin - 19:09
https://i.servimg.com/u/f37/11/98/02/07/2017-011.png

CSS
Code:
/* FICHE ADMIN */
.fond_titre {
width:490px;
height:150px;
background-image:url(http://i.imgur.com/d7iNDaF.gif);
border-radius: 10px 10px 0px 0px;
margin-bottom: -5px;
position: relative;
z-index: 99; }

.fond_text{
padding-top: 10px;
padding-bottom: 10px;
width: 490px;
}

.titres{
font-size: 30px!important;
font-family: 'Fjalla One', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
color: #dbb798;
margin-top: 25px;
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}

.squote{
fon-size: 11px;
color: #081726;
text-transform: lowercase;
font-style: italic;
line-height: 10px;
max-height: 30px;
margin-bottom: 5px;
}

.crédit{
color: #000;
opacity: 0.3;
fon-size: 11px;
}

.barre1 {
width: 478px;
border-left: #032324 solid 10px;
padding-bottom: 10px; }

.barre2 {
width: 455px;
text-align: justify;
font-family: calibri;
font-size: 12px;
color: #222;
line-height: 90%;
border-left: solid 10px #074755;
padding-left: 5px;  }

.barre2 b { color: #91746d; font-size: 11px;font-weight: 800; }
.barre2 i { color: #074755; font-size: 11px;}
.barre2 p:first-letter {  float: left; margin-top: 4px; margin-left: 5px; margin-right: 8px;padding: 5px; font-family: 'Fjalla One', sans-serif;
font-size: 24px; color: #126a84; font-weight: 800; }

.barre3 {
width: 440px; 
border-left: #126a84 solid 10px;
padding-left: 5px;
padding-bottom: 5px;}

HTML
Code:
<center>
<div class="fond_titre"><div class="fond_text" align="center"><div class="titres">titre du sujet</div><div class="squote">courte phrase ou citation qui résume le sujet</div><div class="crédit">©️ CODE PAR <a href="http://www.pub-rpg-design.com/u1498">EFFET MER.</a></div></div></div><div class="barre1"><div class="barre2"><div class="barre3"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

<p><b>texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras texte en gras </b> 

<p><i>texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique texte en italique </i></div>
</div></div></center>

Voir le profil de l'utilisateur
avatar
Blablabla
Blablabla
Messages : 145
Date d'inscription : 28/10/2011
Jeu 14 Juin - 19:14
https://redcdn.net/hpimg4/pics/776192Sanstitre6.png

https://redcdn.net/hpimg4/pics/403290Sanstitre7.png

Code partie 1

Code:
<center><table><tr><td align="center"><div class="case1"><div class="contentcase1" style="background-image:url('http://img4.hostingpics.net/pics/793320Sanstitre3.png');"><div class="dents"></div><div class="sodapoptitre">gertrude mcadams</div><div class="sodapopsoustitre">ft. elle fanning</div></div></div></td><td align="center"><div class="case2"><div class="contentcase2"><div class="sodapopminititre">↘️ carte d'identité</div><div class="sodapoptextes"> Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.
</div>
<div class="sodapopminititre">↘️ caractère</div><div class="sodapoptextes"> Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.
</div>
</div></div></td></tr>
<tr><td align="center"><div class="case3"><div class="contentcase3"><div class="sodapopminititre">↘️ anecdotes</div><div class="sodapoptextes"> Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.
</div></div></div></td><td align="center"><div class="case4"><div class="contentcase4"><img src="http://ellefanningfrance.com/photos/albums/userpics/10001/sofilm5.jpg" class="iconsodapop"><div class="sodapoptitre">derrière l'écran</div><div class="sodapopsoustitre">pseudo | prénom</div><div class="sodapopbehindthescreen">[b]Quel âge as-tu ?[/b] ... [b]Comment es-tu arrivé jusqu'à nous ?[/b] ... [b]Comment trouves-tu notre forum ?[/b] ... [b]A quelle fréquence penses-tu nous rendre visite ?[/b] ... [b]Un petit mot pour la fin ?[/b] ... </div></div></div></td></tr></table></center>

Code partie 2

Code:
<center><div class="fondhistoire"><div class="contenthistoire"><img src="http://66.media.tumblr.com/558b9663bebdf4e5142e7a163c082d75/tumblr_inline_oa2pvlM2Za1r2j133_500.gif" class="imagehistoire"><div class="dentshistoire"></div><div class="histoiretitre">i'm gonna pop your bubble gum heart</div><div class="histoiretexte">Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures. Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur. Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.

Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.
</div><div class="dentshistoire2"></div><img src="http://66.media.tumblr.com/558b9663bebdf4e5142e7a163c082d75/tumblr_inline_oa2pvlM2Za1r2j133_500.gif" class="imagehistoire2"></div></div></center>

CSS
Code:

/* FICHE DE PRESENTATION PAR REVEREND LILY G */
/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/RdfS2KomDWXvet4_dZQehvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/9NqNYV_LP7zlAF8jHr7f1vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/cycBf3mfbGkh66G5NhszPQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* hebrew */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/0RHaX4U39H5gje3plavIkBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/NbP6qMfQq9hiuVWpHYLvhxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Suez One';
  font-style: normal;
  font-weight: 400;
  src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/ml_pO8aziPWinsvwguX7dPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.case1 {
width:250px;
height: 420px;
background-color: white;
border: 1px solid white;
}

.case2 {
width: 250px;
height: 420px;
background-color: whitesmoke;
}

.case3 {
width: 250px;
height: 250px;
background-color: whitesmoke;
}

.case4 {
width: 250px;
height: 250px;
background-color: white;
}

.contentcase1 {
width: 200px;
height: 320px;
margin-top: 25px
}

.contentcase2 {
width: 200px;
height: 370px;
overflow: auto;
padding: 25px;
}

.contentcase3 {
width: 200px;
height: 200px;
padding: 25px;
overflow: auto;
}

.contentcase4 {
width: 200px;
height: 200px;
padding: 25px
}

.dents {
content:url('http://img4.hostingpics.net/pics/302262Sanstitre2.png')
}

.sodapoptitre {
font-family: 'Suez One';
color: #c6353a;
font-size: 16px;
text-align: center;
padding: 5px;
border-bottom: 1px solid #c6353a;
}

.sodapopsoustitre {
font-family: arial;
font-size: 9px;
letter-spacing: 5px;
color: grey;
}

 .sodapopminititre {
font-family: 'Lobster';
color: #304779;
font-size: 16px;
text-align: justify;
padding-left: 10px;
}

.sodapoptextes {
font-family: arial;
font-size: 11px;
text-align: justify;
color: #2d2e30;
line-height: 1;
}

.sodapopbehindthescreen {
height: 50px;
overflow: auto;
font-family: arial;
font-size: 9px;
text-align: justify;
color: #2d2e30;
line-height: 1;
}

.iconsodapop {
width: 100px;
border-radius: 100px;
border: 2px solid #5c719d;
}

.fondhistoire {
width: 455px;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 25px;
padding-right: 25px;
background-color: whitesmoke;
}

.contenthistoire {
width: 400px;
}

.imagehistoire {
width: 400px;
}

.dentshistoire {
content:url(http://img4.hostingpics.net/pics/388314Sanstitre5.png);
margin-top: -18px;
}

.histoiretitre {
font-family: 'Lobster';
color: #304779;
font-size: 16px;
text-align: center;
padding: 5px;
padding-top: 25px;
border-bottom: 1px solid #304779;
margin-bottom: 15px;
}

.histoiretexte {
width: 400px;
font-family: arial;
font-size: 11px;
text-align: justify;
color: #2d2e30;
line-height: 1;
padding-bottom: 25px;
}

.imagehistoire2 {
width: 400px;
}

.dentshistoire2 {
content:url(http://img4.hostingpics.net/pics/388314Sanstitre5.png);
margin-bottom: -18px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);}

/* FIN FICHE DE PRESENTATION */

Voir le profil de l'utilisateur
avatar
Blablabla
Blablabla
Messages : 145
Date d'inscription : 28/10/2011
Jeu 14 Juin - 19:17
https://i.imgur.com/xYKSdkn.png

HTLM
Code:
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"><div class="NBpresa__container"><div class="NBpresa__quicklook"><div class="quicklook__letter">P</div><div class="quicklook__name">Prénom Nom</div><div class="quicklook__info">Avatar</div><div class="quicklook__info">État Civil</div><div class="quicklook__info">Sexualité</div><div class="quicklook__info">Métier</div><div class="quicklook__info">Age</div><div class="quicklook__info">Nationnalité</div>

<div class="quicklook__quote">Une citation qui roxe du poney en tong</div>
<div class="quicklook__song"><a href="https://www.youtube.com/watch?v=Dc2BKczvRc0">► Titre d'une chanson qui te fait penser à ton perso</a></div>

<div class="quicklook__think">Souffle nous ici une petite phrase que ton personnage aurait pu dire. Que ça soit à propos d'un sujet qui lui tient particulièrement à coeur, une parole précise qu'il a tenu à quelqu'un au court de sa vie ou tout simplement une sale manie qu'il a. Donne nous donc ici un premier aperçu de qui il peut être et de comment il peut évoluer au quotidien.</div></div>

<div class="NBpresa__moar__container"><div class="NBpresa__moar__bg" style="background: url(http://www.jeppecarlsen.com/wordpress/wp-content/mads_mikkelsen001_dark.jpg) no-repeat center; background-size: cover;"></div><div class="NBpresa__moar"><div class="moar__title">Meet me</div><div class="moar__container"><div class="moar__vava" style="background: url(http://www.hapshack.com/images/TavYO.png) no-repeat center; background-size: cover;"><div class="moar__name1">Prénom personnage</div></div><div class="moar__cara__container1"><div class="cara__title">Nature</div><div class="moar__cara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio sit reiciendis ipsum optio iusto ut voluptatum vitae voluptatem facilis aut dolores repellendus quaerat nobis tempore, odit error expedita laboriosam dolorem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nemo, dolorem fugiat sequi, consectetur et quo labore sunt hic molestias ab explicabo harum, officiis laudantium quae nobis voluptas quibusdam autem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nisi, at, sunt libero quisquam, laudantium perferendis ducimus nostrum, mollitia ad minima nulla! Officia facilis omnis optio, quae quisquam obcaecati magni?</div></div></div><div class="moar__container"><div class="moar__cara__container2"><div class="cara__title">Pouvoirs</div><div class="moar__cara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio sit reiciendis ipsum optio iusto ut voluptatum vitae voluptatem facilis aut dolores repellendus quaerat nobis tempore, odit error expedita laboriosam dolorem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nemo, dolorem fugiat sequi, consectetur et quo labore sunt hic molestias ab explicabo harum, officiis laudantium quae nobis voluptas quibusdam autem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nisi, at, sunt libero quisquam, laudantium perferendis ducimus nostrum, mollitia ad minima nulla! Officia facilis omnis optio, quae quisquam obcaecati magni?</div></div><div class="moar__vava" style="background: url(http://www.hapshack.com/images/Y4QcX.png) no-repeat center; background-size: cover;"><div class="moar__name2">Prénom personnage</div></div></div></div></div>

<div class="NBpresa__story"><div class="story__title">Un titre d'histoire qui pèse dans l'game</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi delectus at expedita exercitationem ullam amet esse, magnam quae quas assumenda commodi, odio aspernatur quibusdam voluptate quod obcaecati quos vel nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsa exercitationem inventore aliquam vitae assumenda voluptates minus consequuntur sit cum temporibus, tempora a, neque debitis numquam perspiciatis dignissimos alias nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae deleniti tempore dolores nobis aspernatur magni sit praesentium, sapiente ratione beatae est minus repellendus fugiat fugit officia. Dignissimos est provident placeat!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore at nisi ex impedit, atque iure non a qui labore adipisci similique quia aspernatur blanditiis, in odit quod quidem quibusdam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo repellendus possimus totam saepe nulla ad qui laborum, consequuntur facere corporis praesentium adipisci incidunt quos amet maxime, tenetur, perspiciatis beatae reiciendis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae asperiores dolorum magnam molestias. Quos magni eos, tenetur culpa perferendis, omnis neque ad harum distinctio id possimus sapiente consectetur, a?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsa exercitationem inventore aliquam vitae assumenda voluptates minus consequuntur sit cum temporibus, tempora a, neque debitis numquam perspiciatis dignissimos alias nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae deleniti tempore dolores nobis aspernatur magni sit praesentium, sapiente ratione beatae est minus repellendus fugiat fugit officia. Dignissimos est provident placeat!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore at nisi ex impedit, atque iure non a qui labore adipisci similique quia aspernatur blanditiis, in odit quod quidem quibusdam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo repellendus possimus totam saepe nulla ad qui laborum, consequuntur facere corporis praesentium adipisci incidunt quos amet maxime, tenetur, perspiciatis beatae reiciendis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum recusandae asperiores dolorum magnam molestias. Quos magni eos, tenetur culpa perferendis, omnis neque ad harum distinctio id possimus sapiente consectetur, a?</div>

<div class="NBpresa__player__container"><div class="NBpresa__player__bg" style="background: url(http://www.universdescomics.com/wp-content/uploads/2015/08/mads-mikkelsen.jpg) no-repeat center; background-size: cover;"></div><div class="NBpresa__player"><div class="player__title">Dis m'en plus sur toi...</div>Ici parle nous un peu de toi en tant que joueur... La manière dont on peut t'appeler, ton âge, ton pays d'origine, tes disponniblités, la manière dont tu as découvert le forum, ce genre de petits trucs quoi... ♥️</div></div></div>

Css
Code:
/*--------------------FICHE DE PRESENTATION PAR NYXBANANA-----------------------*/

.NBpresa__container {
  width: 100%;
  border: solid 10px #050505;
  color: #050505;
  background-color: #FAFAFA;
  box-sizing: border-box;
}

.NBpresa__quicklook, .NBpresa__moar, .NBpresa__story, .NBpresa__player {
  width: 450px;
  margin: 0 auto;
  position: relative;
}

.quicklook__letter, .player__title, .NBpresa__player::after, .story__title, .moar__title, .moar__name1, .moar__name2, .cara__title, .quicklook__name, .quicklook__info, .quicklook__quote, .quicklook__song a, .quicklook__q {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

.quicklook__letter {
  position: absolute;
  font-size: 200px;
  width: 400px;
  left: 50%;
  bottom: 30px;
  margin-left: -200px;
  text-align: center;
  font-weight: lighter;
}

.quicklook__name {
  background-color: #050505;
  padding: 20px 8px 8px 8px;
  margin-bottom: 50px;
  color: #FAFAFA;
  display: inline-block;
}

.quicklook__info {
  float: right;
  padding: 20px 8px 8px 8px;
}

.quicklook__quote {
  font-size: 24px;
  width: 200px;
  line-height: 1.2;
}

.quicklook__song a {
  color: #050505 !important;
  font-size: 9px;
  width: 175px;
  display: block;
  line-height: 1.2;
}

.quicklook__think {
  position: absolute;
  right: 0;
  width: 165px;
  top: 150px;
  text-align: justify;
  font-size: 10px;
  line-height: 1.2;
}

.quicklook__think::before {
  content: "“";
  display: block;
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 50px;
}

.NBpresa__moar__container, .NBpresa__player__container {
  background-color: #050505;
  color: #FAFAFA;
  position: relative;
}

.NBpresa__moar__bg, .NBpresa__player__bg {
  position: absolute;
  top: 0;
  height: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: brightness(0.5) contrast(1.5) grayscale(1) opacity(20%);
          filter: brightness(0.5) contrast(1.5) grayscale(1) opacity(20%);
}

.NBpresa__moar {
    content: " ";
    display: table;
}

.NBpresa__moar:after {
    clear: both;
}

.NBpresa__moar {
    *zoom: 1;
}

.moar__title, .story__title, .player__title {
  font-size: 38px;
  padding: 60px 0 70px 20px;
  letter-spacing: 10px;
}

.moar__cara, .moar__vava {
  float: left;
}

.moar__vava {
  width: 200px;
  height: 320px;
  position: relative;
}

.moar__vava::after{
  content: "";
  display: block;
  position: absolute;
  width: 200px;
  height: 320px;
  border: 2px solid #1c1b1b;
  top: -30px;
  right: -20px;
}

.moar__name1, .moar__name2 {
  position: absolute;
  left: 30px;
  bottom: 40px;
  font-size: 18px;
  color: #050505;
}

.moar__cara__container1, .moar__cara__container2 {
  width: 200px;
  float: left;
}

.moar__cara__container1 {
  margin: -20px 0 150px 50px;
}

.moar__cara__container2 {
  margin: -20px 50px 100px 0;
}

.moar__cara {
  height: 320px;
  overflow-y: auto;
  text-align: justify;
  padding-right: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: #bdbdbd;
}

.cara__title {
  font-size: 18px;
}

.NBpresa__story {
  padding-bottom: 50px;
}

.NBpresa__player {
  padding-bottom: 100px;
}

.story__title, .player__title {
  text-align: center;
  line-height: 1.4;
}

.NBpresa__player::after {
  content: "Fiche codée par NyxBanana";
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  font-size: 10px;
  opacity: .8;
}

Voir le profil de l'utilisateur
avatar
Blablabla
Blablabla
Messages : 145
Date d'inscription : 28/10/2011
Jeu 14 Juin - 19:22
https://i.imgur.com/1b3hTC2.png

HTML

Code:
<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">
<style>.atlas_p {width: 500px; margin: auto; color: #f4f4f4; font-size: 10px;} .atlas_p_entete {position: relative; z-index: 2; box-sizing: border-box; padding: 8% 0 0 0; background: url('https://i.imgur.com/EZ9Wz25.png'); width: 500px; height: 150px; text-align: center; text-transform: uppercase;} .atlas_titre {text-shadow: 1px 1px #000; font-family: 'Contrail One', cursive; font-size: 30px; letter-spacing: 2px;} .atlas_st {background: #453257; width: 46%; font-size: 8px; padding: .5%; margin: auto; font-weight: bold;} .atlas_p_contenu {background: url('https://i.imgur.com/lFQIHvk.png'); width: 100%; height: 800px; overflow: auto; margin-top: -7.2%; position: relative; z-index: 1; line-height: 1.7; text-align: justify;} .atlas_p_infos {background: rgba(0,0,0,.5); width: 35%; margin: 8% 0 6% 4%; padding: 3%; height: 210px;} .atlas_p_infos p {width: 95%; margin: auto; height: 200px; padding: 0 7% 0 0; overflow: auto;} .atlas_p_infos span {font-weight: bold; text-transform: uppercase;} .atlas_caractere {background: #1b0f28; width: 100%; margin: auto; height: 180px; box-sizing: border-box; padding: 5% 10%;} .atlas_caractere p {width: 100%; margin: auto; height: 130px; overflow: auto;} .atlas_citation {display: block !important; margin: 3% auto;} .atlas_histoire {width: 90%; margin: auto; background: rgba(0,0,0,.5); padding: 2% 5%; box-sizing: border-box; height: 200px;} .atlas_histoire p {width: 100%; height: 150px; overflow: auto;} .atlas_histoire span {text-align: right; text-transform: lowercase; font-weight: bold; font-size: 18px; letter-spacing: -1px; display: block; border-right: 5px solid #453257; padding-right: 5%; line-height: 1; margin: 0 2% 0 0;} .atlas_footer {background: url('https://i.imgur.com/zLxznFX.png'); width: 100%; height: 152px;} .atlas_footer {margin-top: -8%; position: relative; z-index: 2; padding: 10% 5% 0 5%; box-sizing: border-box; line-height: 1.3;} .atlas_img_footer {float: left; margin-right: 5%;} .atlas_footer span {text-transform: uppercase; font-weight: bold;}</style>

<div class="atlas_p"><div class="atlas_p_entete"><div class="atlas_titre">Hiroki Nishimura</div>
<div class="atlas_st">Atlas - 28 ans - Masculin - Exodus</div></div><div class="atlas_p_contenu"><div class="atlas_p_infos"><p><span>Nationalité</span> : Japonaise<br /><span>Origine</span> : Japonaise<br /><span>Orientation sexuelle </span>: Hétéro<br /><span>Situation maritale</span> : Il est en relation libre avec le monde<br /><span>Situation financière</span> : Modeste, je vide régulièrement mon porte-monnaie tortue<br /><span>Job/étude</span> : Bosse dans un garage, des fois, quand il y pense<br /><span>Rôle au sein du gang</span> : Bras droit d'Exodus<br /><span>Taille</span> : Le plus grand du monde<br /><span>Corpulence</span> : Parfaite<br /><span>Cheveux</span> : Blonds décolorés<br /><span>Yeux</span> : Envoûtants bb<br /><br /><span>Force</span> : 3/5<br /><span>Défense</span> : 2/5<br /><span>Dextérité</span> : 1/5<br /><span>Intelligence</span> : 2/5<br /><span>Charisme</span> : 4/5<br /><span>Social</span> : 5/5</p></div><div class="atlas_caractere"><p>Au premier abord, Atlas est cool. Genre il parle à tout le monde, c'est un "bon vivant", il est drôle (sans forcément l'vouloir, tu vois le genre ? Tu te payes sa tête quoi), il est le premier à lever la main quand un poto a besoin d'aide ou pour les sales besognes. Il se tape de savoir si tu portes un slip ou un boxer. Il se fout de ta religion, de savoir si t'as des couilles en or ou si tu vies dans une poubelle comme un certain Meiji. Il attire les gens, tout simplement. Un mec charismatique, qu'on dit. Ça c'est l'Atlas que tu veux en face de toi.

Mais au fond, un mot trop haut et il part en cacahuète. Il est bagarreur le blondinet, il aime servir des salades de phalanges et des coups de tête à point. Non, c'est pas un cuisinier poète je t'arrête de suite. Au fond, il a des intérêts à protéger Hiroki. Ceux de son frère, ceux de son sang, ceux d'Exodus. Et pour ça, il est prêt à tout. A te faire un beau sourire tout en te jaugeant discrètement. A faire l'abruti tout en observant le type du Shinsen qui est au fond du bar. A profiter de ton moment de déprime pour t'introduire des idées à lui dans le crâne. Manipulateur ? Naaan … il se contente de se servir des gens pour arriver à ses fins, c'est tout. … Ouais, manipulateur. Et pas la peine d'essayer d'avoir un coup d'avance, Atlas a déjà tout calculé (ou du moins, il essaie). PERSONNE ne peut nuire à Karas, c'est même pas une règle de vie c'est sa Bible ! Parce que même s'il fait le clown et qu'il boit des coups avec toi, il est pro le blondinet.

Après, il reste humain. Et quel humain ! Un corps séduisant, une personnalité affirmée, un joli minois … et le voila lancé ! Un vrai baratineur ! Certaines apprécient, d'autres le trouvent lourd. Mais il persiste le bougre, parce qu'il est joueur. En revanche avec le "sexe fort" c'est une autre paire de manche. Il ne perd pas une occasion de prendre les gens pour des cons, c'est naturel. Plus fort que lui. "Eh mec, t'as pas vu un gringalet passer ?" "Bah si" "Il allait où ?" "Ça j'en sais rien" "… T'es con ou quoi ? Il était où ?" "En face de moi". Ou l'art et la manière 1) de faire perdre son temps aux gens, 2) de se payer leur tête, 3) de se foutre sur la gueule pour le plaisir. Ça lui vient tout seul en une fraction de seconde. Il est impulsif, qu'est-ce qu'il y peut ? D'ailleurs Nishimura père le lui avait assez reproché. "Plus tu agis vite, plus tu risques de passer à côté d'un meilleur contrat". Bah ouais. Quand on est intrépide on subit, c'est la vie.

Et sa vie, c'est son gang. C'est son frère. Il porte Exodus comme Atlas porte le monde. Il en est fier. Rien ni personne ne pourra plus les atteindre. Il y laissera sueur, sang et vie si besoin est, mais il sera le mur infranchissable qui empêchera son frère d'être atteint. Tuer ou être tué, c'est ainsi et il le sait. Sa loyauté étouffera probablement, ça aussi il le sait, et il en est fier. Atlas est brave, ça ne l'effraie pas. Et puis l'existence c'est fragile de toute façon, s'il peut dépasser les limites il le fera sans hésitation. Oui, la vie il la méprise. Tout comme il méprise ses ennemis. Il est suffisamment fort pour ça, il est le meilleur. C'est ce qu'on lui répète depuis toujours donc c'est forcément vrai. L’arrogance est sienne. Et malheureusement, elle est source de bien des maux.

Il n'est pas très équitable le blondinet quand il est question de se jauger. Si lui t'insultes ou se paye ta tête, t'avises pas d'en faire de même car sa colère est sans frontière. S'il pète une durite il peut vite faire rouler ta tête par terre. Il est sanguin l'Exodus, et il l'a déjà prouvé. Genre, tu as entendu parler du mec qui voulait refiler des infos sur un échange "équitable" entre un politicien véreux et Exodus ? Ouais nan, c'est normal. Et le mec qui a volé dans le butin du gang ? Ses os ont fondu dans un bidon près d'Akihabara. Ou le type mutilé d'un bras et d'une jambe qui pensait pouvoir vendre Karas au Shinsengumi ? paquerette Atlas a bien tenté de laver ses fringues mais au final il a du tout brûler. Il s'arracherait le cœur lui-même pour Exodus si ça pouvait leur apporter gloire et immunité.

Puis, il court partout le blond. Dans le passé Atlas courrait après la vie, maintenant il court aux côtés de son frère à la poursuite des emmerdes. Il ne tient pas en place, c'est comme ça. Dormir ? Pour les faibles. Lui il n'a pas le temps. Il doit collecter des infos, gérer les affaires de Karas quand il considère la chose un peu trop légèrement, regarder ses ennemis, surveiller ses amis. Il a toujours quelque chose à faire Hiroki, c'est comme ça, c'est sa voie, il l'a choisi. Et malgré tous ses efforts, malgré toute sa volonté, à ses yeux il ne saura jamais remboursé l'immense dette qu'il estime avoir envers Karas.</p></div><img src="https://i.imgur.com/eh9xHUj.png" class="atlas_citation" /><div class="atlas_histoire"><p>Hiroki, il aurait pu se faire mettre des dents en or plutôt qu'un appareil dentaire. Il aurait pu se promener avec des bagouzes à chaque doigt en rappant comme un gosse de riche. Mais voila, Hiroki n'est pas comme ça. Plutôt que se la jouer "équitation, école privée et billet doré à la Willy Wonka", il était dans l'game en mode pull à capuche, chuppa chups de branleur et vieille console dans la poche. Bon c'est vrai, comme tout les gosses il aimait se la péter un chouillat, mais sans prétention. Juste pour le plaisir de venir à l'école avec chauffeur /PAN/

Dans la cour, il jouait avec ses potos sur un pied d'égalité, mais en classe, c'était différent. Bien coller les gommettes dans les cercles. Etre le premier à répondre aux questions. Toujours bien s'entendre avec tout le monde. Etre le meilleur partout pour devenir PDG comme papa. Etre précis pour être inégalable, comme papa. Etre poto avec tous ses copains pour avoir des "relations" comme papa. Une voie toute tracée qui lui collait assez bien à la peau. Qu'aurait-il pu faire d'autre ? Le talent appelle le talent, non ? C'est dans son sang. Une vie des plus agréable enveloppait alors Hiroki. Plein de copains, les sourires innombrables de la maîtresse chaque jour, la satisfaction et la fierté de ses parents … Un Dracaufeu sur Pokemon rouge feu. Bref, au poil. Et puis vint une drôle de bestiole ...

Un "frère" ? Le blondinet avait déjà envisagé la chose, avoir un modèle réduit à éduquer un peu comme un chien. Lui lancer une balle et attendre qu'il la lui rapporte. Ça aurait été cool. Mais non. C'était ni un marmot (clairement pas), ni un chien. Son arrivée avait laissé Hiroki sur le cul. Déjà d'une, sa mère n'avait même pas eu son gros bide. Ensuite, il ne lui ressemblait pas du tout. Alors que l'un semblait être né dans une bulle dorée, l'autre ressemblait à un vilain cabot des rues. "Takeshi". Alors une fois seuls, maladroit comme jamais, Hiroki tenta le coup. Voir si c'était VRAIMENT un frangin. Il lança la balle, la pointa du doigt et lança un "va chercher". Première, et dernière fois. Avec une rapidité et une force sans nom, l'autre lui brisa l'estomac. Leçon numéro 1 : le respect. Un autre jour, voulant être sympa, il lui apporta de l'eau dans un bol qui posa par terre. Leçon numéro 2 : le respect 2.1 et l'absence de chien. Une autre fois, Hiroki décida de lui faire comprendre que c'était lui qui régnait sur cette maison, alors il brailla qu'il était le plus fort. La bagarre dura un certain temps avant que son père, alerté par les hurlements, ne rapplique et ne les sépare. Cette fois la leçon fut commune : chui pas un branleur, moi aussi je cogne. D'ailleurs cette expérience plu au blondinet. Il réitéra l'expérience à l'école avec un gamin qui avait lui aussi reçu les beaux sourires de la maîtresse.

Malgré ces tensions Hiroki n'avait rien de particulier contre ce gosse fraîchement débarqué. L'idée d'avoir un frangin du jour au lendemain avait simplement du mal à faire son chemin. Et au fond se battre avait été leur moment de communication le plus intense jusque là. Une telle colère semblait habiter le nouveau membre de la famille, qu'Hiroki s'imaginait tout un tas d'histoire. La véritable lui fut révélée un soir de cette même semaine, alors qu'il écoutait aux portes comme souvent. Un conte qui n'était clairement pas pour les enfants. Alors le Nishimura réfléchit toute la nuit à un moyen de se "connecter" avec ce nouveau frère. Et le lendemain Hiroki mit son plan à éxécution. Il prit Takeshi par surprise et ils se foutèrent à nouveau sur la gueule. Jusqu'à ce qu'il hurle "stop", mettant sa paume de main face à son adversaire, puis le pointant du doigt.

<span>" - Tu saignes de la lèvre, et moi tu m'as défoncé le nez. Nos sangs se sont mélangés, t'es maintenant mon frère de sang. Et la famille, c'est sacré. J'te péterai la mâchoire que si ça peut te faire du bien à partir de maintenant. "</span>

Sur ces mots, la nounou intervint, les engueula une bonne fois pour toute et leur servit le goûter dans le jardin. A partir de ce moment-là Hiroki eu la sensation d'avoir gagné le respect de son frère. Il ne regrettera d'ailleurs jamais ce moment. Petit à petit la complicité s'installa entre eux et l'adage "à la vie à la mort" ne trouva pas meilleur exemple. Bien que ce fut (et ce que c'est toujours, d'ailleurs) rude, le blondinet se donna pour mission de redonner le sourire au nouveau Nishimura. Vivre d'amour et d'eau fraîche, de baston sans raison valable à l'école, dos à dos, manipuler les gens pour obtenir tout ce qu'ils voulaient, foutre la carotte un peu partout sans se faire chopper … Ils auraient pu vivre ainsi jusqu'à la fin de leurs jours, mais ça n'aurait pas été drôle.

Finalement, ce ne fut pas le visage plein de sourire qui se multiplia, mais celui de la douleur. Quand c'est ton héros, ton pilier qui se casse la gueule, ça fait mal. Il était parti comme Takeshi était arrivé : du jour au lendemain. Une mort brutale tant pour le blondinet que pour son frère. Plus envie de rire, plus envie de faire des blagues, juste se faire péter les dents sans raison, prendre des coups pour raviver la douleur physique et atténuer la douleur psychologique. Hiroki ne pense plus, il se laisse mourir à petit feu. Plus d'envie de PDG, rien à branler des sourires des gens, plus envie de les manipuler pour arriver à ses fins. Juste le silence et la solitude. Mais Takeshi est son frère de sang, et ça, c'est sacré.

Une bonne raclée un soir et juste une phrase : "J'te péterai la mâchoire que si ça peut te faire du bien à partir de maintenant.". Toute les larmes du corps du blondinet sortirent ce soir-là. Et son frère le redressa une bonne fois pour toute, ignorant l'état pitoyable dans lequel il était. Une bonne leçon de prise, encore, et un retour à la réalité violent mais efficace. Et leur mère dans tout ça ? Et son frangin ? Comment avait-il pu en arriver là ? La honte le submergea et il changea de pilier. Il en avait oublier les sentiments de ce bro arrivé de n'importe où, qui perdait son second père. Et qui avait perdu temporairement son sang.

Plusieurs années après, Hiroki est toujours là. Vivant, bagarreur, manipulateur comme jamais. Fidèle comme un chien à son maître. Il vit pour Takeshi. Il le soutient de tout son être. Car rien ne compte plus que lui. Le sang, c'est sacré, ça l'a toujours guidé. Il écoute, il oriente, il suit. Sans jamais se détourner des intérêts de son frère. Seuls dans ce monde pourri, ils survivront. Mieux, ils vivront !

Et puis cette pseudo sphère de bonheur s’est effritée quand, contre l'avis du blondinet, Takeshi s'éprend de Valéria. Jusqu'à ce qu'ils se marient. Mais l'autre Nishimura semble si heureux, qu'Hiroki ne se sent pas le droit de tout foutre en l'air. Alors il s'efface, lentement, gardant un œil sur son meilleur ami à distance. Au fond, cette fille n'est pas si mal. Elle apporte un équilibre à son frère, elle le soutient, elle l'oriente, elle le maintient en vie. Tout comme lui. C'est un soutien non négligeable, et au fond il aime discuter avec elle. Alors naïvement il lui fait confiance. Mais une fois de plus, c'est une désillusion qui l'attend.

Et cette fois, ils sombrent tous les deux

L'un est brisé d'avoir perdu l'amour de sa vie. L'autre est brisé de voir son modèle couler sans savoir comment le relever. La haine et la colère deviennent leur maîtresse. La rancune bouffe le cœur du blondinet, les épisodes foireux de sa vie le font suffoquer. La vie c'est ça, c'est quand ça fait tellement mal qu'on arrive plus à respirer. Alors ils rejoignent Exodus afin de déchaîner leur souffrance. Ils embrassent ce monde de violence tant craint par Valéria. Mais Hiroki n'est plus aussi ambitieux que dans son enfance, il se contente de suivre le mouvement. Takeshi, lui, vise plus haut. Bien plus haut. C'est ainsi qu'il finit par prendre les commandes du gang. Inconsciemment, le blondinet a toujours su qu'il n'aurait qu'un second rôle, mais cette situation lui convient. Il en a moins chié que son frangin, il lui doit tout. Il lui donnera tout. Son intelligence, son courage, sa vie.

Un beau matin, Karas vit le jour. Maître d'Exodus, redouté tant par les siens que par ses ennemis. Une proie pour les assoiffés de pouvoir. Un être à protéger d'autant plus. Alors Hiroki aussi doit évoluer. Hiroki aussi doit insuffler la peur, mais aussi la sympathie pour garder Exodus soudé. Il doit devenir un bras droit, un bras gauche et même un troisième bras au besoin. Petit, sa mère lui parlait beaucoup de mythologie Grecque, de divinité, de martyres … mais aussi d'un colosse portant le ciel sur ses épaules. Hiroki devait porter leur nouveau monde sur les siennes pour éviter une chute fatale à Karas. Atlas porte et portera toujours Exodus sur ses frêles épaules.</p></div></div><div class="atlas_footer"><img src="https://i.imgur.com/rhkMElg.jpg" class="atlas_img_footer" /><span>Feat. Dino Cavallone, Reborn</span><br />J'ai pris quelques libertés, j'espère que ça ira :O Comme le faire bosser dans un garage de temps en temps, je trouvais ça cool (genre vider sa tête en bidouillant dans la "tête" des voitures). N'hésitez pas à me dire si vous pensez que j'ai mal cerné le personnage \o/<br />Poutoux de Ledgouille</div></div>

Voir le profil de l'utilisateur
Contenu sponsorisé

Codage
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Sujets similaires
-
» Petit codage pour signature
» Codage pour le RP
» LIBRE SERVICE — codage uniquement
» Codage?
» Codage Libre-Service

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
The 100: Forum test :: New Game :: Didacticiel-
Sauter vers: