Fiche RP #6

Codes

Code:

<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"><div class="content_rp_arte"><div class="block_left_rp"><img src="https://via.placeholder.com/90" alt="icon"/> <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote> <div>Prénom</div><div>Prénom</div><span>1000 words - @pseudo</span></div><div class="block_right_rp"><h2>Titre du rp</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan arcu eget lacus viverra, id venenatis massa aliquet. Nam pulvinar elit ut augue fermentum convallis. Aliquam pharetra, metus ac vulputate efficitur, felis nibh laoreet odio, quis suscipit lacus est vel mauris. Fusce cursus enim in vestibulum elementum. Vivamus pretium justo vitae elit porttitor, ac rhoncus nibh facilisis. Proin risus augue, elementum sit amet euismod sit amet, convallis a mauris. Donec felis nunc, vulputate in arcu a, facilisis lacinia metus. Nulla quis massa id metus tincidunt rhoncus. Pellentesque sodales urna nec tortor placerat, vel elementum quam convallis.Cras non justo tempus, aliquet odio cursus, aliquet leo. Maecenas pretium posuere ex, at convallis nunc posuere in. Sed sit amet massa eu ante lacinia ullamcorper non nec magna. In aliquet ipsum justo, a vulputate neque lobortis eget. Vestibulum pretium dapibus cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vitae libero nisl. Nunc scelerisque in dui in posuere. Donec pellentesque placerat nunc ut dictum. Nunc in sagittis massa. Nullam vel sagittis eros.Ut non vestibulum purus. Nullam id rutrum magna, id gravida arcu. Aenean tincidunt libero erat, in blandit metus elementum ut. Donec id leo non lorem vulputate pulvinar. Pellentesque metus quam, convallis ut laoreet id, feugiat vitae turpis. Ut sed leo eros. Maecenas sed velit condimentum nisi condimentum pulvinar vel quis enim. Pellentesque venenatis enim magna, vel tristique justo euismod nec. Praesent venenatis neque eget ligula auctor pretium. Vivamus ut orci accumsan, finibus velit eu, laoreet dolor. Integer vitae libero nisl. Nunc scelerisque in dui in posuere. Donec pellentesque placerat nunc ut dictum. Nunc in sagittis massa. Nullam vel sagittis eros.</p></div><span class="credits_arte">artemis | <a href="https://artifices.forumactif.com/">www</a></span></div>

<style>.content_rp_arte{width: 550px; height: 430px; background: #f1f1f1; margin: auto; display :-webkit-box; display :-ms-flexbox; display :flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: hidden; position: relative;}.block_left_rp{width: 185px; background: #f7f7f7; border-right: 1px solid #dfdfdf; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 10px;}.block_left_rp > img{width: 90px; height: 90px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; border: 5px solid white; margin-bottom: 5px;}.block_left_rp > blockquote{margin: 0; background: none; padding: 0; font: 11px calibri; line-height: 11px; color: #2e2e2e;}.block_left_rp > div , .block_right_rp > h2{height: 23px; background: #2e2e2e; color: white; text-align: right; font: 14px oswald; margin-top: 5px; text-transform: uppercase; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 5px;}.block_left_rp > span{font: 10px calibri; text-transform: uppercase;}.block_right_rp{width: 365px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px;}.block_right_rp > h2{margin: 0;}.block_right_rp > p{font: 12px calibri; text-align: justify; overflow: auto; height: 365px; line-height: 14px; color: #2e2e2e;}.credits_arte{position: absolute; bottom: 0; width: 550px; text-align: right; font: 10px arial; color: #484848;}.credits_arte > a{text-decoration: none; color: #6d656f;}</style>