Taille de l'image : 220x221 px

Code:

<div class="aay-perso"><div class="aay-presgroup">Groupe</div><div class="aay-presname">Prénom Nom</div><br>
<div class="aay-presinfo">
<span class="info"><b>Age:</b></span> réponse
<span class="info"><b>Sexe:</b></span> réponse
<span class="info"><b>Métier/Occupation:</b></span> réponse
<span class="info"><b>Taille:</b></span> réponse
<span class="info"><b>Date d’emménagement:</b></span> réponse
<span class="info"><b>Appartement</b> désiré:</span> réponse

</div><div class="aay-photo"><img src="https://i.servimg.com/u/f39/20/57/84/31/modele10.jpg"/><div class="aay-photo-src"></div></div>
<div class="aay-title">Miroir</div>
<div class="aay-bloctxt">
À quoi ressembles-tu ? Allez dis nous… </div>

<div class="aay-title">Caractère</div>
<div class="aay-bloctxt">
Dis nous on est là.</div>

<div class="aay-title">Ta P’tite histoire</div>
<div class="aay-bloctxt">
D'où viens-tu? Tu es arrivé quand ? Ça va la famille ? </div>

<div class="aay-title">Un peu plus?</div>
<div class="aay-bloctxt">
Que penses-tu de tes voisins ? As-tu une réputation particulière ? </div>

<div class="aay-opinion">
<span class="info">Pseudo:</span> réponse
<span class="info">Age:</span> réponse
<span class="info">Quelque chose à nous dire?</span> réponse

<div class="crédits">Code by Frosty Blue de <a href="http://www.never-utopia.com">never Utopia</a></div></div>

<style type="text/css"> .aay-presgroup {margin-left: auto; background: #36cb98; width: 150px; padding: 17px;text-align: center; color: #f4f4f4; font-family: 'Arimo'; display: inline-block; font-size: 17px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 10px; text-align: center; color: #36cb98; background: #eaebeb; overflow: hidden; font-family: 'Arimo'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; text-transform: uppercase; letter-spacing: 1px;} .aay-perso {margin: auto; text-align: justify; width: 565px;} .aay-presinfo {float: left; width: 320px; height: 200px; overflow: auto; padding: 10px; margin-right: 10px;background: #eaebeb;} .info {color: black; font-size: 13px; text-transform: uppercase; font-style: normal;} .aay-photo {width: 215px; background: black; vertical-align: top; height: 220px; overflow: hidden;} .aay-photo img {transition: 1s; -webkit-transition: 1s; position: relative; z-index: 1;} .aay-photo-src {position: relative; top: -60px; background: rgba(195,195,195,0.6); color: white; text-align: center; font-size: 12px; z-index: 2; padding: 5px; opacity: 0; transition: 1s; -webkit-transition: 1s;} .aay-bloctxt {background: #eaebeb; padding: 10px; height: fit-content; overflow: auto; border-top: #36cb98 4px solid; position: relative; z-index: 2;} .aay-title { text-transform: uppercase; letter-spacing: 1px; font-family: 'Arimo'; color: #120d16; font-size: 25px; position: relative; left: 5px; bottom: -15px; z-index: 1;} .aay-player {width: 215px; height: 220px; display: inline-block; margin-right: 15px; background: #36cb98;} .aay-opinion {display: inline-block; width: 315px; padding: 10px; height: fit-content; overflow: auto; background: #eaebeb; text-align: justify; vertical-align: top;} .in {font-style: normal; color: #36cb98; font-size: 14px; text-transform: uppercase;} .in2 {font-style: normal; color: #0080ff; font-size: 14px; text-transform: uppercase;} .crédits {text-align: right; color: silver; opacity: 0.4; font-size: 11px; font-family: 'Arimo'; position: relative; right: 5px;}</style>
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />