Vous cherchez une fiche de présentation plus arrondie avec quelques animations ? Pourquoi ne pas tester celle-ci ?
Le noir et blanc des images s'enlève au survol de la présentation !
A savoir que l'idée a été faite de base pour le forum Perdition.

HTML

Code:

<div class="fichepresper"><div class="pres0"><img src="https://s1.qwant.com/thumbr/0x0/3/0/44d9198145237e5cb6d3a1291528e4a9b4cd9af0544d4c7eb0be81234b8fb0/tumblr_mphru3Om9f1ssmwt9o1_500.gif?u=https%3A%2F%2F31.media.tumblr.com%2F572e465ec4ba8d605d1653b09b078084%2Ftumblr_mphru3Om9f1ssmwt9o1_500.gif&q=0&b=1&p=0&a=1"></div><div class="maskpaper maskpaper2"></div>
<div class="pres1"><div class="avatarper"><img src="https://i.servimg.com/u/f30/19/45/51/53/rodric12.jpg"></div><div class="identiper">[b]Prénom :[/b]
[b]Nom :[/b]
[b]Race :[/b]
[b]Statut marital : [/b]
[b]Pouvoir : [/b]
[b]Lieu d'habitation :[/b]
[b]Occupation :[/b]
[b]Crédit avatar :[/b]</div></div>
<div class="pres2 carachi"><h2>Caractère</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec rhoncus diam. Ut tortor ligula, scelerisque vel augue eget, dictum iaculis massa. Sed pharetra tempor mauris et sollicitudin. Pellentesque tristique tempor mi, sit amet molestie est elementum vitae. Quisque fringilla diam sit amet nulla cursus, feugiat accumsan tortor rutrum. Aliquam non mattis elit, ac congue quam. In risus tortor, rhoncus sit amet elementum sed, faucibus at elit. In vel sem cursus, elementum erat gravida, viverra lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae vestibulum tellus. Morbi egestas facilisis mollis. Aliquam auctor odio sem, ut commodo purus rhoncus id.

Pellentesque tempor diam efficitur ex dapibus volutpat. Suspendisse velit urna, consequat quis posuere placerat, faucibus ac neque. Aenean sed mauris sit amet orci pulvinar volutpat eu pharetra purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris eu tempus nunc. Vivamus eleifend quam a lacus eleifend, a congue mauris mattis. Pellentesque feugiat bibendum sem ac tempor.

Suspendisse nunc elit, fringilla nec urna in, tempor varius mi. In quis placerat leo, ac tempus justo. Curabitur non dui pharetra, malesuada nisi sit amet, vulputate eros. Fusce euismod massa at mauris molestie rutrum. Quisque finibus nisl et mollis suscipit. Ut dapibus lectus lorem, id volutpat metus efficitur non. Quisque elementum facilisis arcu, nec tincidunt augue eleifend sit amet. Morbi egestas ex vitae lobortis luctus. Vestibulum lorem orci, ultricies ultricies laoreet ut, blandit et orci. Pellentesque vel finibus magna. Nulla facilisi. Phasellus iaculis mollis nisi quis pellentesque. Quisque elementum scelerisque lorem, nec consectetur augue congue sed. Sed vestibulum nec leo condimentum viverra. Nunc sed ex facilisis, vestibulum dui vitae, hendrerit enim. Proin eu bibendum odio.</div></div>
<div class="pres3 carachi"><h2>Histoire</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec rhoncus diam. Ut tortor ligula, scelerisque vel augue eget, dictum iaculis massa. Sed pharetra tempor mauris et sollicitudin. Pellentesque tristique tempor mi, sit amet molestie est elementum vitae. Quisque fringilla diam sit amet nulla cursus, feugiat accumsan tortor rutrum. Aliquam non mattis elit, ac congue quam. In risus tortor, rhoncus sit amet elementum sed, faucibus at elit. In vel sem cursus, elementum erat gravida, viverra lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae vestibulum tellus. Morbi egestas facilisis mollis. Aliquam auctor odio sem, ut commodo purus rhoncus id.

Pellentesque tempor diam efficitur ex dapibus volutpat. Suspendisse velit urna, consequat quis posuere placerat, faucibus ac neque. Aenean sed mauris sit amet orci pulvinar volutpat eu pharetra purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris eu tempus nunc. Vivamus eleifend quam a lacus eleifend, a congue mauris mattis. Pellentesque feugiat bibendum sem ac tempor.

Suspendisse nunc elit, fringilla nec urna in, tempor varius mi. In quis placerat leo, ac tempus justo. Curabitur non dui pharetra, malesuada nisi sit amet, vulputate eros. Fusce euismod massa at mauris molestie rutrum. Quisque finibus nisl et mollis suscipit. Ut dapibus lectus lorem, id volutpat metus efficitur non. Quisque elementum facilisis arcu, nec tincidunt augue eleifend sit amet. Morbi egestas ex vitae lobortis luctus. Vestibulum lorem orci, ultricies ultricies laoreet ut, blandit et orci. Pellentesque vel finibus magna. Nulla facilisi. Phasellus iaculis mollis nisi quis pellentesque. Quisque elementum scelerisque lorem, nec consectetur augue congue sed. Sed vestibulum nec leo condimentum viverra. Nunc sed ex facilisis, vestibulum dui vitae, hendrerit enim. Proin eu bibendum odio.</div></div>
<div class="pres4"><h2>Derrière l'écran</h2><div>[b]Pseudo : [/b]
[b]Âge :[/b]
[b]Pays : [/b]
[b]Présence : [/b]
[b]Comment nous as tu trouvé ? :[/b]
[b]Que penses tu du forum ? :[/b]</div></div>
<div class="maskpaper"></div></div>

CSS

Code:

/* Fiche pres de Perdition par KoalaVolant */

/* Couleurs */

.fichepresper .identiper, .fichepresper .carachi div, .fichepresper .pres4 div{ background-color:#A5B6B3;  }
.fichepresper .pres4 h2{ background-color:#49433a; color:#fff; font-family:Times New roman;  }
.fichepresper, .maskpaper2{ background-color:#586C68 !important; }
.fichepresper .carachi h2{ color:#fff; font-family:Times New Roman; border-bottom:2px solid #fff; }
.fichepresper .carachi div{ color:#222; font-family:Verdana; }
.fichepresper .identiper strong{ color:#49433a; font-family:Times New Roman; }

/* A changer selon la couleur de fond du sujet du forum */
.maskpaper{ background-color:#fff; }

/* Structure */

/* Encart total */
.fichepresper{ width:470px; margin:0 auto; -webkit-border-top-left-radius: 200px;
-webkit-border-top-right-radius: 200px;
-moz-border-radius-topleft: 200px;
-moz-border-radius-topright: 200px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
  overflow:hidden;
}

.maskpaper{    -webkit-mask-image: url("https://i.servimg.com/u/f30/19/45/51/53/maskto15.png");
  mask-image: url("https://i.servimg.com/u/f30/19/45/51/53/maskto15.png");
/* -webkit-mask-size: 470px 600px;
  mask-size: 470px 600px;
 -webkit-mask-repeat: no-repeat;
  -webkit-mask-position:bottom;*/
    width: 116%;
    height: 19px;
    margin-left: -46px; }

.maskpaper2{ margin-top:-30px; height:39px; }

.fichepresper *{ box-sizing:border-box; }

/* Gif */
.fichepresper .pres0{ width:100%; }
.fichepresper .pres0 img{ min-width:100%; max-width:100%; height:200px; object-fit:cover; -webkit-border-top-left-radius: 150px; -webkit-border-top-right-radius: 150px;
-moz-border-radius-topleft: 150px;
-moz-border-radius-topright: 150px;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
  filter: grayscale(100%); transition:500ms;
}
.fichepresper .pres0:hover img{ filter: grayscale(0%); }

/* Identite et Avatar */
.fichepresper .pres1{ display:flex; justify-content:space-around; width:100%; }

/* Avatar */

.fichepresper .avatarper img{ display:block; margin:0px 10px; min-width:180px; max-width:180px; height:320px; object-fit:cover; filter: grayscale(100%); transition:500ms; }
.fichepresper .avatarper img:hover{ filter: grayscale(0%); }

/* Identité */

.fichepresper .identiper{ margin-right:10px; width: 260px; height:320px; overflow:auto; padding:10px; font-size:12px; line-height:16px;  }
.fichepresper .identiper strong{ font-size:14px; text-transform:uppercase; }

/* Histoire et Caractère */

.fichepresper .carachi{ width:100%; }
.fichepresper .carachi h2{ width:91%; font-size:20px; line-height:21px; margin:0px; margin-left:20px; text-transform:uppercase; letter-spacing:2px;  }
.fichepresper .carachi div{ overflow:auto; padding:15px; margin: 0px 10px; text-align:justify; font-size:12px; line-height:16px;  position:relative; top:-10px; }
.fichepresper .pres2 div{ height:175px;  }
.fichepresper .pres3 div{ height:350px; }

/* Derrière l'écran */

.fichepresper .pres4{ width:80%; height:110px; margin:0 auto; position:relative; overflow:hidden;}
.fichepresper .pres4 h2{ font-size:20px; text-align:center; line-height:110px; display:flex; justify-content:center; padding-bottom:5px;
  align-items:center; height:112px; position:relative; z-index:13; top:-17px; transition:1200ms; left:0px; text-transform:uppercase; }
.fichepresper .pres4:hover h2{ left:-100%; }
.fichepresper .pres4 div{ width:100%; height:110px; overflow:auto; padding:15px; position:absolute; top:0; left:0; z-index:7; }