Cyberpunk-Fantastique

Chapitre 1 :
Pressions sociales


Été 2042 - La chaleur est étouffante


En 2012, le calendrier Maya avait prédit la fin du monde tel que nous le connaissons. Ils n'avaient pas tort, le Génome Shinigami, issu de modification génétique sur des tomates, a faillit amener les humains au bord de l'extinction, décimant les deux tiers de la population mondiale et révélant l'existence au monde entier, de plusieurs espèces qui, jusqu’à présent, n’existaient que dans les légendes. Toutes les recherches génétiques ont été interdites et depuis, les survivants ont évolué...

2042, à Tokyo. Le Japon semble être un pays exemplaire, mais la paix y est plus fragile qu'il n'y paraît. Les humains ne parviennent plus à trouver leur place dans ce monde transformé, à présent dominé par les upyrs et les zoanthropes. Tandis que les membres de l'ASP sont persuadés d'être les mieux placés pour assurer la paix, leur oppression se fait de plus en plus sentir. Et pendant ce temps là, une nouvelle drogue sur le marché noir fait des ravages...





Le Deal du moment :
Display Star Wars Unlimited Ombres de la Galaxie : ...
Voir le deal

 :: La Foire aux Forums :: Altered Tokyo
CSS Fiche de présentations
Sakura
Admin
Admin
Sakura
Messages : 167
Date d'inscription : 17/06/2009

Sujet : CSS Fiche de présentations

rédigé le Lun 8 Juin - 21:47
Code:
/ ******************************************** PRESENTATION ****************************************** /

.presentation {
        width: 600px;
        margin: 2% auto;
}

.entete {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 8% 0 0 0;
  width: 600px;
  height: 150px;
  text-align: center;
  text-transform: uppercase;}

.titre {
  text-shadow: 1px 1px #000;
  font-family: 'Contrail One', cursive;
  font-size: 30px;
  letter-spacing: 2px;}

.st {
  width: 70%;
  font-size: 9px;
  padding: .5%;
  margin: auto;
  font-weight: bold;}

.contenu {
  background: url('https://www.zupimages.net/up/20/06/ww32.png');
  width: 600px;
  height: 1380px;
  overflow: auto;
  margin-top: -7.2%;
  position: relative;
  z-index: 1;
  line-height: 1.7;
  text-align: justify;
  font-size: 11px;}


.trait{
  width: 90%;
  margin: auto;
  background: rgba(0,0,0,.8);
  padding: 2% 5%;
  box-sizing: border-box;
  height: 125px;
  display: block;
  overflow: auto;}

.trait p{
  width: 100%;
  height: 70px;
  margin: 5% 0 0;
  display: block;}

.trait p span {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;}

.caractere {
  width: 90%;
  margin: auto;
  background: rgba(0,0,0,.8);
  padding: 2% 5%;
  height: 200px;
  box-sizing: border-box;
  display: block;
  overflow: auto;}

.caractere p {
  width: 100%;
  margin: auto;
  height: 150px; }

.citation {
  display: block !important;
  margin: 3% auto;}

.histoire {
  width: 90%;
  margin: auto;
  background: rgba(0,0,0,.8);
  padding: 2% 5%;
  box-sizing: border-box;
  height: 250px;
  display: block;
  overflow: auto;}

.histoire p {
  width: 100%;
  height: 200px; }

.question{
  width: 90%;
  margin: auto;
  background: rgba(0,0,0,.8);
  padding: 2% 5%;
  box-sizing: border-box;
  height: 150px;
  display: block;
  overflow: auto;}

.question p{
  width: 100%;
  height: 100px; }
 
.footer {
  width: 600px;
  height: 152px;
  margin-top: -18%;
  position: relative;
  z-index: 2;
  padding: 8% 5% 0 5%;
  box-sizing: border-box;
  line-height: 1.3;
  color: white;}

.img_footer {
  float: left;
  margin-right: 5%;
  margin-top: -12px;}

.footer span {
  text-transform: uppercase;
  font-weight: bold;}


.fiche_presentation ::-webkit-scrollbar {
       width: 10px;
}
.fiche_presentation ::-webkit-scrollbar-thumb {
       background: #888;
}
.fiche_presentation ::-webkit-scrollbar-track {
       background: #252b2f;
}


.fiche_presentation {
        width: 600px;
        margin: 2% auto;
        font-size: 11px;
        text-align: justify;
        padding: 5% 0 4% 0;
        color:white;
}

/* BLOC IDENTITE */
.identite {
        float: left;
        margin: 2% 3% 0 5%;
        width: 250px;
        overflow: auto;
        padding: 2% 2%;
        box-sizing: border-box;
        background: rgba(0,0,0,.8);
}

.identite p {
        width: 100%;
        height: 290px;
     margin: 2% 0 0;
        display: block;
}

.identite p span {
        font-weight: bold;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 1px;
}

/* PHYSIQUE */
.physique {
        float: right;
        text-align: center;
        margin: 1% 5% 0 3%;
        width: 250px;
}

.bloc_physique {
        width: 250px;
        height: 320px;
        overflow: hidden;
        margin: 5% 0 0;
}

.bloc_physique:hover .description {
        margin-top: -320px;
        transition: .5s all;
        display: block;
}

.bloc_physique .description {
        background: #000;
        width: 250px;
        height: 320px;
        text-align: justify;
        padding: 10%;
        box-sizing: border-box;
        transition: .5s all;
        position: relative;
        z-index: 2;
     overflow: auto;
}

.description span {
        font-weight: bold;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 1px;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Nos partenaires