Fiche de présentation simple,gris&bleu, géométrique

Bonjour bonjour ~

J'étais tranquillement en train de coder pour mon forum, et je me suis dit que je pouvais partager ma création, vu comment Never Utopia m'a aidé à progresser dans le codage

Voici donc une fiche de présentation assez simple mais que je trouve très jolie.



Désolée pour la qualité, je ne suis pas super douée en screen :s
Les couleurs sont personnalisable comme vous le souhaitez, les polices également. N'enlevez pas le copyright par contre ♥

Si vous êtes administrateur : code à ajouter dans la feuille de style css

Code:

.cadre_pres
{
  width: 580px;
  border: 2px solid #627764;
  background: #d0cdc8; /* Couleur du fond de la fiche */
  margin: auto;
}
.text_gras
{
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 20px;
  color: #627764;
}
img.image_pres
{
  width: 580px;
  height: 300px;
  border-bottom: 2px solid #627764;
}
.titre_pres
{
  font-size: 40px;
  color: #ffffff; /* Couleur de la police du titre*/
  font-weight: bold;
  font-family: 'Shadows Into Light Two', cursive; /*Police du titre*/
  font-variant: small-caps; /* Transforme les minuscules en petites majuscules*/
  width: 550px;
  padding: 15px;
  margin: auto;
  text-align: center;
  margin-bottom: -15px;
  background: #16768e; /* Couleur du fond du titre */
}
.citation_pres
{
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 15px;
  font-style: italic;
  margin: auto;
  text-align: center;
  border-bottom: 1px dotted #627764;
  padding-left: 5px;
  padding-right: 5px;
}
.tableau_pres
{
  margin-left: 40px;
  margin-right: 40px;
  height: 400px;
}
img.image_pres_2
{
  widht: 200px;
  height: 400px;
  border: 2px solid #627764;
}
.cadre_pres_infos
{
  width: 220px;
  height: 380px;
  background: #fafafa; /*Couleur de fond du cadre à côté de l'image*/
  border-left: 8px solid #16768e; /* bordure bleue à gauche du cadre à côté de l'image*/
  padding: 10px;
  margin-left: 40px;
  overflow: auto;
  line-height: 1.3; /*agrandit l'interligne*/
}
.sous_titre_pres
{
  background: #16768e; /* Couleur des fonds des sous-titres */
  color: #ffffff; /*Couleur de police des sous-titres*/
  padding: 5px;
  position: relative;
  left: 40px;
  bottom: 8px;
  font-family: 'Alegreya Sans SC', sans-serif; /*Police des sous-titres*/
  font-size: 25px;
}
.cadre_pres_description
{
  width: 500px;
  background: #fafafa; /*couleur de fond des cadres larges*/
  border-left: 8px solid #16768e;  /*bordures bleues au niveau des cadres larges*/
  border-right: 8px solid #16768e;
  padding: 10px;
  margin: auto;
}

Si vous êtes membres : code à placer en haut de votre message

Code:

<style> .cadre_pres {width: 580px; border: 2px solid #627764; background: #d0cdc8; margin: auto;} .text_gras {font-family: 'Alegreya Sans SC', sans-serif; font-size: 20px; color: #627764;} img.image_pres {width: 580px; height: 300px; border-bottom: 2px solid #627764;} .titre_pres {font-size: 40px; color: #ffffff; font-weight: bold; font-family: 'Shadows Into Light Two', cursive; font-variant: small-caps; width: 550px; padding: 15px; margin: auto; text-align: center; margin-bottom: -15px;} .citation_pres {font-family: 'Alegreya Sans SC', sans-serif; font-size: 15px; font-style: italic; margin: auto; text-align: center; border-bottom: 1px dotted #627764; padding-left: 5px; padding-right: 5px;} .tableau_pres {margin-left: 40px; margin-right: 40px; height: 400px;} img.image_pres_2 {widht: 200px; height: 400px; border: 2px solid #627764;} .cadre_pres_infos {width: 220px; height: 380px; background: #fafafa; border-left: 8px solid #16768e; padding: 10px; margin-left: 40px; overflow: auto; line-height: 1.3;} .sous_titre_pres {background: #16768e; color: #ffffff; padding: 5px; position: relative; left: 40px; bottom: 8px; font-family: 'Alegreya Sans SC', sans-serif; font-size: 25px;} .cadre_pres_description {width: 500px; background: #fafafa; border-left: 8px solid #16768e; border-right: 8px solid #16768e; padding: 10px; margin: auto;}</style>

Polices utilisées :

Code:

 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two|Alegreya+Sans+SC' rel='stylesheet' type='text/css'>

Code à mettre dans votre message

Code:

<div class="cadre_pres"><img src="https://img15.hostingpics.net/pics/743831hautpres.png" class="image_pres"/>
<div class="titre_pres bleu">Nom&Prénom</div>
<center><span class="citation_pres">Citation qui tue</span></center>

<table class="tableau_pres"><tr><td style="width: 200px;"><img src="https://img15.hostingpics.net/pics/445476vavapres.png" class="image_pres_2"/></td>
<td><div class="cadre_pres_infos"><span class="text_gras">Nom:</span>
<span class="text_gras">Prénom:</span>
<span class="text_gras">Race:</span>
<span class="text_gras">Age:</span>
etc
 </div></td></tr></table>


<span class="sous_titre_pres">Apparence</span>
<div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


<span class="sous_titre_pres">Caractère</span>
<div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


<span class="sous_titre_pres">Histoire</span>
<div class="cadre_pres_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempor ipsum eu imperdiet. Cras tristique ipsum orci, in pellentesque magna luctus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dignissim ante, eget placerat ante varius non. Proin iaculis lacus leo, non finibus felis malesuada eget. Aliquam orci justo, maximus ut volutpat et, finibus sit amet diam. Sed tempus non lacus at lobortis. In vehicula odio ac quam aliquet porttitor. In porttitor neque nisl, vitae auctor augue tincidunt at. Suspendisse placerat est non neque mattis, eget lobortis justo dignissim. Quisque volutpat turpis nec hendrerit interdum.</div>


<div class="titre_pres bleu">Et IRL ? </div>

<div class="cadre_pres_description"><span class="text_gras">Votre pseudo ?</span>
<span class="text_gras">Expérience en RP ? </span>
etc
</div>

<center><span style="font-size: 11px; color: #ffffff; text-shadow: 0 0 5px #000000;"> codage par Mini BN sur <a href="http://www.never-utopia.com/">Never Utopia</a></span></center>
</div>

J'espère que ce code vous plaira ^-^

Coucou mini BN c'est à croquer . Merci beaucoup pour le partage.

Merci, c'est excellent !

C'est super joli !

Tout semble bon, donc je déplace dans le Libre Service ^^
Merci de ton partage ♥

Merci pour le partage :)

Merci pour cette création, c'est vraiment joli :3

Merci

Merci beaucoup !

merci

Merci beaucoup pour ce code, il est vraiment super chouette !