Le Deal du moment : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

 

 Fiche RP #9

Aller en bas 
Artemis
aka artedelamuerte
Artemis



MessageSujet: Fiche RP #9   Fiche RP #9 EmptyMer 13 Mai - 11:34



Codes



HTML & CSS:
Code:
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet"/><div class="fiche_rp_artemis"><div class="block_avatars_f"><div><img src="https://i.ibb.co/4J0hfCF/13.png"/></div><div><img src="https://i.ibb.co/4J0hfCF/13.png"/></div></div><h2>Titre</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim odio id ornare finibus. Donec pretium at mauris ac efficitur. Phasellus libero tellus, mollis sed nisl et, vehicula condimentum nunc. Integer in orci a ipsum porttitor aliquet. Nullam a quam eros. Pellentesque tristique sodales lobortis. Donec euismod vulputate posuere. Donec venenatis facilisis lorem, molestie lacinia turpis dictum vel. Vestibulum a augue eu nibh interdum porttitor porta sit amet quam. Aliquam nec velit et metus porta dapibus. Praesent mollis tortor non elit consectetur elementum. Vestibulum non sapien mi. Sed convallis, lorem id fringilla fermentum, libero eros vehicula est, nec pretium mi sapien eu enim. Nulla maximus pretium volutpat. Duis felis risus, pretium id augue vel, dictum vehicula felis.Nullam volutpat eget diam ut vehicula. Maecenas eu diam in sapien viverra blandit nec molestie mi. Mauris commodo neque augue, sollicitudin pharetra turpis facilisis ut. Aenean mattis sit amet ante ut euismod. Curabitur commodo magna non massa lacinia, non rutrum urna congue. Quisque ultricies, nulla at consequat lobortis, augue dui tempus tortor, vel vehicula augue mi eget dui. Aliquam ac velit faucibus, lacinia mi quis, ultrices tortor.Nunc id semper nibh. Integer dui dolor, eleifend vitae diam vel, mollis posuere lectus. Nullam aliquet metus nec elit vestibulum, in elementum nunc vehicula. Nunc tincidunt condimentum neque sit amet fermentum. Mauris et nunc dictum, auctor nulla et, venenatis mauris. Quisque laoreet justo nec diam iaculis dictum. In nec enim nec nulla hendrerit facilisis. Vivamus tristique elementum nisl in porttitor. Morbi lorem felis, condimentum vitae odio a, tincidunt condimentum ex. Quisque imperdiet, mi et pharetra lobortis, dolor ante volutpat nulla, ut malesuada ligula lorem non odio. Mauris pellentesque ipsum at justo rhoncus, nec pellentesque eros rhoncus. Etiam non nisl non elit ornare maximus a sit amet sapien. Sed laoreet feugiat lobortis. Nunc at ornare est. In congue sagittis ligula, sed sagittis sapien eleifend eu. Sed interdum lacinia dolor.</p><div class="artemis_credits"><a href="https://artifices.forumactif.com/">artemis</a> <div class="block_words">1000 words - pseudo</div>

<style>:root{--couleur-bleue: #658299; --fond-right: #97B6E4;}.fiche_rp_artemis{width: 500px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: auto; background: #F1F1F1;}.block_avatars_f{width: 500px; height: 125px; background: var(--couleur-bleue); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 124px; position: relative; overflow: hidden;}.block_avatars_f div{margin: auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; border:1px solid white; width: 90px; height: 90px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 9; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}.block_avatars_f div img{width: 70px; height: 70px; margin: auto; -o-object-fit: cover; object-fit: cover;}.block_avatars_f:after{content: " "; width: 688px; height: 500px; position: absolute; background: var(--fond-right); -webkit-clip-path: polygon(73% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(73% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 1; top: 0; right: 0;}.block_avatars_f div:hover{border: none; border:1px dashed white;}.block_avatars_f div:nth-of-type(1):hover{background: var(--fond-right);}.block_avatars_f div:nth-of-type(2):hover{background: var(--couleur-bleue);}.fiche_rp_artemis > h2{margin: 0; font: 35px fjalla one; color: var(--couleur-bleue); text-transform: uppercase; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; font-style: oblique;}.fiche_rp_artemis > p{width: 93%; margin: 0px 0 10px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; font: 12px calibri; padding: 0 20px; border-left: 10px solid var(--couleur-bleue); text-align: justify; color: #737373;}.artemis_credits{width: 100%; text-align: center; font: 10px calibri; margin: 5px 0;}.artemis_credits a{text-decoration: none; color: #5c5c5c;}.block_words{width: 100%; height: 25px; background: var(--couleur-bleue); margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; color: white; text-transform: uppercase; font-weight: bold;}</style>

Vous pouvez modifier les couleurs bleues en touchant à ces lignes de CSS
Code:
:root{--couleur-bleue: #658299; --fond-right: #97B6E4;}

En cas de soucis avec ce code, laissez-moi un petit message ici ! c:



Revenir en haut Aller en bas
 
Fiche RP #9
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Fiche RP #6
» Fiche RP #7
» Fiche RP #8
» Fiche RP #10
» Fiche RP #11

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sauter vers: