<div class="v0"><div class="v1">Pseudo du membre</div><!--

--><div class="v2">« Je suis une citation ou des paroles de chanson par exemple. »</div><center><!--

--><div class="vimg1"><img src="https://via.placeholder.com/150" class="vimg" /></div></center><!--

--><div class="v3"><span class="v4">Carte d'identité</span><div class="v5">Je suis un paragraphe.</div>
</div>
<div class="v6"><span class="v8">Les traits physiques</span><!--
--><div class="v7">Je suis un paragraphe.</div><!--

-->
<span class="v8">Les traits psychiques</span><!--
--><div class="v7">Je suis un paragraphe.</div><!--

-->
<span class="v8">Le background</span><!--
--><div class="v7">Je suis un paragraphe. </div><!--

-->
</div><div class="v12"><div class="v9"><center><!--
--><div class="v9img1"><img src="https://via.placeholder.com/150" class="v9img" /></div></center></div><!--
--><div class="v10"><!-- CRÉDIT A NE PAS RETIRER, MERCI --><a class="cr" href="https://agora-ls.forumactif.com/" target="_blank">agora</a></div><!--

--><div class="v11"><span>Je suis un paragraphe.</span><!--

--></div></div></div><! -- feuille de style --><style>@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed&display=swap'); .v0 {background-color: #EBEBEB; color: #959595; width: 360px; margin: auto; font-size: 13px; line-height: 13px; font-family: barlow condensed;} .v1 {font-family: times new roman; font-size: 24px; color: #EBC994; text-transform: uppercase; text-align: center; padding: 40px 10px 0 10px; text-shadow: 1px 1px #FFF;} .v2 {font-size: 11px; line-height: 12px; width: 250px; margin: auto; text-align-last: center; margin-top: 5px; margin-bottom: 20px;} .vimg {height: 150px; width: 150px; border-radius: 50%; border: 10px solid #EBEBEB;} .vimg1 {width: 170px; border-radius: 50%; border: 5px solid #FAE0B7;} .v3 {background-color: #FAE0B7; padding-top: 110px; margin-top: -90px;} .v4 {font-family: Times new roman; font-size: 12px; background-color: #FDF0DD; color: #EBC994; text-transform: uppercase; text-align: center; display: block; width: 298px; margin: auto; padding: 1px; margin-bottom: 5px;} .v5 {font-size: 12px; width: 280px; margin: auto; padding: 10px; background-color: #FDF0DD; margin-bottom: 20px; max-height: 150px; overflow: auto;} .v5::-webkit-scrollbar {width: 1px; height: 10px; background-color: #FDF0DD;} .v5::-webkit-scrollbar-track {background-color: #FDF0DD;} .v5::-webkit-scrollbar-thumb {background-color: #FDF0DD;} .v6 {margin-top: 20px; margin-boyyom: 20px;} .v8 {font-family: Times new roman; font-size: 12px; background-color: #F5F5F5; color: #EBC994; text-transform: uppercase; text-align: center; display: block; width: 298px; margin: auto; padding: 1px; margin-bottom: 5px;} .v7 {font-size: 12px; width: 280px; margin: auto; padding: 10px; background-color: #F5F5F5; margin-bottom: 20px; max-height: 100px; overflow: auto; transition: all 1s;} .v7:hover {max-height: 300px; transition: all 1s;} .v7::-webkit-scrollbar {width: 1px; height: 10px; background-color: #F5F5F5;} .v7::-webkit-scrollbar-track {background-color: #F5F5F5;} .v7::-webkit-scrollbar-thumb {background-color: #F5F5F5;} .v9 {background-color: #fae0b7; height: 70px; padding-top: 20px;} .v9img {filter: grayscale(100%); height: 100px; width: 100px; border-radius: 50%; border: 10px solid #FEFEFE;} .v9img1 {width: 120px; border-radius: 50%; border: 5px solid #FAE0B7;} .v10 {height: 20px;} a.cr {display: block; color: #959595; opacity: 0.7; font-size: 9px; letter-spacing: 1px; margin-top: 70px; text-align: center; text-transform: none;} a.cr:hover { opacity: 1;} .v11 { width: 330px; overflow: auto; height: 140px; margin: auto; background-color: #F5F5F5; position: relative; top: -165px; opacity: 0; transition: all 1s;} .v11 span{font-size: 12px; padding: 10px; display: block;} .v12 {height: 180px;} .v11:hover {opacity: 1; transition: all 1s;} .v11::-webkit-scrollbar {width: 1px; height: 10px; background-color: #F5F5F5;} .v11::-webkit-scrollbar-track {background-color: #F5F5F5;} .v11::-webkit-scrollbar-thumb {background-color: #F5F5F5;}</style>

<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed&display=swap" rel="stylesheet">

<div class="v0"><div class="v1">Pseudo du membre</div><!--

--><div class="v2">« Je suis une citation ou des paroles de chanson par exemple. »</div><center><!--

--><div class="vimg1"><img src="https://via.placeholder.com/150" class="vimg" /></div></center><!--

--><div class="v3"><span class="v4">Carte d'identité</span><div class="v5">Je suis un paragraphe.</div>
</div>
<div class="v6"><span class="v8">Les traits physiques</span><!--
--><div class="v7">Je suis un paragraphe.</div><!--

-->
<span class="v8">Les traits psychiques</span><!--
--><div class="v7">Je suis un paragraphe.</div><!--

-->
<span class="v8">Le background</span><!--
--><div class="v7">Je suis un paragraphe. </div><!--

-->
</div><div class="v12"><div class="v9"><center><!--
--><div class="v9img1"><img src="https://via.placeholder.com/150" class="v9img" /></div></center></div><!--
--><div class="v10"><!-- CRÉDIT A NE PAS RETIRER, MERCI --><a class="cr" href="https://agora-ls.forumactif.com/" target="_blank">agora</a></div><!--

--><div class="v11"><span>Je suis un paragraphe.</span><!--

--></div></div></div>

/* FICHE DE PRESENTATION - AGORA LS */
.v0 {/* ensemble fiche */
  background-color: #EBEBEB;
  color: #959595;
  width: 360px;
  margin: auto;
  font-size: 13px;
  line-height: 13px;
  font-family: barlow condensed;
}

.v1 {/* bloc pseudo*/
  font-family: times new roman;
  font-size: 24px;
  color: #EBC994;
  text-transform: uppercase;
  text-align: center;
  padding: 40px 10px 0 10px;
  text-shadow: 1px 1px #FFF;
}

.v2 {/* bloc citation*/
  font-size: 11px;
  line-height: 12px;
  width: 250px;
  margin: auto;
  text-align-last: center;
  margin-top: 5px;
  margin-bottom: 20px;
}

.vimg {/* image en haut*/
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 10px solid #EBEBEB;
}

.vimg1 {/* second cadre de l'img */
  width: 170px;
  border-radius: 50%;
  border: 5px solid #FAE0B7;
}

.v3 {/* cadre jaune qui passe en dessous de l'img */
  background-color: #FAE0B7;
  padding-top: 110px;
  margin-top: -90px;
}

.v4 {/* sous titre carte id */
  font-family: Times new roman;
  font-size: 12px;
  background-color: #FDF0DD;
  color: #EBC994;
  text-transform: uppercase;
  text-align: center;
  display: block;
  width: 298px;
  margin: auto;
  padding: 1px;
  margin-bottom: 5px;
}

.v5 {/* bloc description identité */
  font-size: 12px;
  width: 280px;
  margin: auto;
  padding: 10px;
  background-color: #FDF0DD;
  margin-bottom: 20px;
  max-height: 150px;
  overflow: auto;
}

.v5::-webkit-scrollbar {
  width: 1px;
  height: 10px;
  background-color: #FDF0DD;
}

.v5::-webkit-scrollbar-track {
  background-color: #FDF0DD;
}

.v5::-webkit-scrollbar-thumb {
  background-color: #FDF0DD;
}

.v6 { /* impose une marge en haut et en bas du bloc descriptif en gris */
  margin-top: 20px;
  margin-boyyom: 20px;
}

.v8 {/* bloc sous titre des trois bloc description du perso */
  font-family: Times new roman;
  font-size: 12px;
  background-color: #F5F5F5;
  color: #EBC994;
  text-transform: uppercase;
  text-align: center;
  display: block;
  width: 298px;
  margin: auto;
  padding: 1px;
  margin-bottom: 5px;
}

.v7 {/* bloc paragraphe des trois blocs description du perso */
  font-size: 12px;
  width: 280px;
  margin: auto;
  padding: 10px;
  background-color: #F5F5F5;
  margin-bottom: 20px;
  max-height: 100px;
  overflow: auto;
  transition: all 1s;
}

.v7:hover {
  max-height: 300px;
  transition: all 1s;
}

.v7::-webkit-scrollbar {
  width: 1px;
  height: 10px;
  background-color: #F5F5F5;
}

.v7::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

.v7::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
}

.v9 {/* bloc orange en bas qui passe en dessous de l'image */
  background-color: #fae0b7;
  height: 70px;
  padding-top: 20px;
}

.v9img {/* image en bas */
  filter: grayscale(100%);
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 10px solid #FEFEFE;
}

.v9img1 { /*deuxième cadre de l'image */
  width: 120px;
  border-radius: 50%;
  border: 5px solid #FAE0B7;
}

.v10 { /* bloc marge */
  height: 20px;
}

a.cr {/* crédit SAKURA sur Agora ; ne pas le retirer */
  display: block;
  color: #959595;
  opacity: 0.7;
  font-size: 9px;
  letter-spacing: 1px;
  margin-top: 70px;
  text-align: center;
  text-transform: none;
}

a.cr:hover {
  opacity: 1;
}

.v11 {/* bloc paragraphe qui apparaît au survol */
  width: 330px;
  height: 140px;
  margin: auto;
  background-color: #F5F5F5;
  position: relative;
  top: -165px;
  opacity: 0;
  transition: all 1s;
  overflow: auto;
}

.v11:hover {
  opacity: 1;
  transition: all 1s;
}

.v11 span{
  font-size: 12px;
  padding: 10px;
  display: block;
}

.v11::-webkit-scrollbar {
  width: 1px;
  height: 10px;
  background-color: #F5F5F5;
}

.v11::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

.v11::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
}

.v12 {/* impose une taille au bloc gris du bas pour ne pas que la fiche dépasse */
  height: 180px;
}