Fiche RP #4

Codes

Code:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/><div class="ficherp_a"> <div class="blockg"> <h1> Titre du RP </h1> <p> Quisque egestas ultrices maximus. Aliquam ante mauris, elementum et odio in, lobortis viverra lacus. Duis sit amet condimentum justo. Curabitur hendrerit eros felis, et condimentum leo auctor id. Nulla fermentum tellus volutpat, semper elit ac, sagittis lacus. Integer auctor magna id ullamcorper posuere. Sed mauris massa, tristique eu nisi eu, dapibus aliquam arcu. Vivamus orci purus, luctus at eros quis, porta malesuada odio. Aliquam ut dictum urna. Etiam sapien enim, porttitor ut sodales quis, luctus sed nunc. Quisque ut elit convallis, fringilla neque eget, consectetur risus. Suspendisse risus lacus, interdum a enim eget, ornare tincidunt nisl. Sed porta odio id condimentum sagittis. Cras tincidunt nisi vitae mauris ullamcorper, sed molestie nisl tristique. Etiam ex metus, lobortis eu sodales scelerisque, dictum ac est.Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum sapien mi, convallis vel tincidunt ac, lacinia et diam. Aenean ac tempus erat, et eleifend dui. Morbi a neque non metus dictum blandit. Aliquam non ornare eros. Sed tempor viverra arcu, a posuere diam consectetur quis. Nullam auctor, dui quis iaculis lobortis, felis dolor tempus ipsum, id sagittis ante enim sed nulla. Sed commodo, tellus eu ultricies facilisis, sem quam mattis ligula, ac ultrices ligula tellus in justo. Mauris suscipit est non nulla hendrerit, dictum semper nibh dignissim. Aliquam maximus, nisl sit amet interdum luctus, quam orci molestie mi, scelerisque aliquam purus neque a nulla.</p></div><div class="blockd"> <img src="http://placehold.it/135x135" alt="icon"/> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper consectetur ultricies.</span> <div>feat. lorem ipsum</div><div>850 mots</div></div><a href="https://artifices.forumactif.com/" class="credit-fiche-arte">artemis | www</a></div>


<style>.ficherp_a{width: 550px; height: 600px; margin: auto; background: url('https://zupimages.net/up/19/08/ljot.png'); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; position: relative;}.blockg{width: 370px; height: 100%;}.blockg h1{width: 90%; text-align: right; font: 33px Oswald; text-transform: uppercase; font-style: oblique; margin: 20px auto 0; color: #b20021; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 10px;}.blockg p{width: 90%; height: 84%; margin: -5px auto 0; text-align: justify; color: #bdc3bb; overflow: auto; font: 12px arial; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; line-height: 13px;}.blockd{width: 180px; height: 100%; background: #b20021; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 12px;}.blockd img{width: 155px; height: 155px; -o-object-fit: cover; object-fit: cover; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0d100c;}.blockd span{display: block; width: 150px; margin: 5px auto; text-align: justify; font: 10px arial; text-transform: uppercase; color: #0d100c;}.blockd div{width: 150px; height: 30px; margin: auto; background: #0d100c; margin-bottom: 3px; color: #bdc3bb; font: 8px arial; text-transform: uppercase; letter-spacing: 2px; line-height: 30px;}.credit-fiche-arte{position: absolute; bottom: 0; left: 2px; text-decoration: none; font: 11px arial; color: #6e6e6e;}</style>