FICHE — liens

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"><div class="power3"><div class="titlepo3"><div class="test">titre du sujet</div></div><img src="https://i.imgur.com/YE7j7DC.png" class="imgava" /><div class="infos"><div class="details">nom du chat</div><div class="details">âge</div><div class="details">clan</div><div class="details">rang</div><div class="details">sexe</div></div><div class="blocpo3"><mi>noms successifs</mi> ✧
<mi>famille</mi> ✧
<mi>traits distinctifs</mi> ✧
<mi>but</mi> ✧
<mi>à savoir</mi> ✧
<mi>liens utiles</mi> ✧
</div><div class="grblocpo3"><mi>nom du chat</mi> ✧ (lien) texte
<mi>nom du chat</mi> ✧ (lien) texte</div>
<div class="blocpo"><mi>noms successifs</mi> φ
<mi>famille</mi> φ
<mi>traits distinctifs</mi> φ
<mi>but</mi> φ
<mi>à savoir</mi> φ
<mi>liens utiles</mi> φ
</div><img src="https://i.imgur.com/IDwkqSY.png" class="imgava2" /><div class="infos2"><div class="details">nom du chat</div><div class="details">âge</div><div class="details">clan</div><div class="details">rang</div><div class="details">sexe</div></div><div class="grblocpo"><mi>name</mi> φ (lien) texte
<mi>name</mi> φ (lien) texte</div>
</div>

<style>.power3{margin: auto; width: 500px; color: black;} .titlepo3{background-image:url('http://pa1.narvii.com/6218/272f024a465bb8bec3d3c7b63145d89bada6cd7e_hq.gif'); margin-bottom: 10px; height: 55px; padding: 5px;} .titlepo3 .test{background-color: rgba(255, 255, 255, 0.7); padding: 5px; margin: 10px; font: 25px/25px Oswald; text-align: center; } .imgava{width : 150px; height: 240px; float: left; margin-right: 15px; transition: 2s; position: absolute;} .imgava:hover{opacity: 0.3; transition: 2s;} .infos{float: left;width: 150px; height: 240px; margin-right: 15px;} .blocpo3{width: 315px; height: 220px; overflow: auto; background-color: lightgray; font-size: 11px; padding: 10px; text-align: justify;} .details{text-align: center; background-color: #111012; color: #CBCBCB; font: bold 11px/11px calibri; margin: 14px; padding: 10px; text-transform: uppercase;} mi{font: bold 11px/12px calibri; text-transform: uppercase;} .grblocpo3{clear: both; background-color: lightgray; padding: 10px; margin-top: 10px; font-size: 11px; height: 100px; overflow: auto;} .imgava2{width: 150px; height: 240px; float: right; transition: 2s; position: relative;} .imgava2:hover{opacity: 0.3; transition: 2s;} .infos2{float: right;width: 150px; height: 240px; margin-left: 15px; margin-top: -240px;} .blocpo{float: left;width: 315px; height: 220px; overflow: auto; background-color: lightgray; font-size: 11px; padding: 10px; text-align: justify; margin-bottom: 10px;} .details{text-align: center; background-color: #111012; color: #CBCBCB; font: bold 11px/11px calibri; margin: 14px; padding: 10px; text-transform: uppercase;} mi{font: bold 11px/12px calibri; text-transform: uppercase;} .grblocpo{clear: both; background-color: lightgray; padding: 10px; margin-top: 10px; font-size: 11px; height: 100px; overflow: auto;}</style>