<link href="https://fonts.googleapis.com/css?family=News+Cycle|Nixie+One|Yeseva+One&display=swap" rel="stylesheet"><style>.creditsNECTA{height: 1px;top: 10px;left: 10px;font-size: 10px;position: relative;}.complete{color: #313131;width:550px;margin:auto;background:#fff;padding:10px;} .border{border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;} .boite_1{border-bottom: 1px solid #ccc;height: 200px;} .couleur_1{height:100px;background:#f9f9f9;} .text_1{position: absolute;z-index: 99;font-family: 'Yeseva One', cursive;font-size: 32px;color: #5a5a5a;margin-left: 332px;margin-top: -21px;} .sous_titre_1{position: absolute;z-index: 99;font-family: 'Nixie One', cursive;font-size: 13px;color: #5a5a5a;margin-left: 335px;margin-top: 0px;font-weight: bold;} .avatar{position: absolute;text-align: center;width: 100px;height: 100px;border-radius: 100px;margin-top: -50px;margin-left: 220px;} .avatar img{width: 100px;height: 100px;} .text_2{position: absolute;z-index: 99;font-family: 'Yeseva One', cursive;font-size: 32px;color: #5a5a5a;margin-left: 7px;margin-top: -21px;width: 205px;text-align: right;} .sous_titre_2{position: absolute;z-index: 99;font-family: 'Nixie One', cursive;font-size: 13px;color: #5a5a5a;margin-left: 7px;margin-top: 0px;font-weight: bold;width: 200px;text-align: right;} .couleur_2{height:100px;background:#ffa904;} .liste{font-family: 'News Cycle', sans-serif;border-bottom: 1px solid #ccc;display: block;text-align: justify;padding: 50px;line-height: 12px;} .liste b{text-transform: uppercase;margin: 3px;display: inline-block;}.liste_info{font-family: 'Yeseva One', cursive;font-weight: bold;font-size: 15px;padding-top: 5px;color: #ffa904;} .info_gauche{float:left;width:220px;} .info_droite{float:left;width:220px;} </style>  <div class="complete"><div class="border"> <div class="boite_1"> <div class="couleur_1"></div> <div class="text_1">Prénom</div><div class="sous_titre_1">citation_2</div> <div class="avatar"><img src="#" /></div> <div class="text_2">Nom</div><div class="sous_titre_2">citation_1</div> <div class="couleur_2"></div> </div> <div class="boite_2"> <span class="liste"><div class="info_gauche"><span class="liste_info">Informations</span>
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici</div><div class="info_droite">
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici
<b>info</b> reponse_ici</div><div style="clear:both;"></div></span><span class="liste"><span class="liste_info">Psychologie</span> VOTRE_TEXTE_ICI</span><span class="liste"><span class="liste_info">Physique</span> VOTRE_TEXTE_ICI</span></div><div class="boite_3"><span class="liste"><span class="liste_info">Histoire</span> VOTRE_TEXTE_ICI</span></div></div><div class="creditsNECTA"><a href="http://nectarinels.forumactif.com" target="_blank">@ NECTA</a></div></div>