Modèle de fiche de relation

Prénom Nom

Une citation qui envoie du pâté

Détails

★ Age
★ Nationalité
★ Orientation sexuelle
★ Occupation
★ Trois qualités
★ Trois défauts ;
★ Hobby

en bref ...

Sale Caractère ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.

Nom du rp Nom du rp Nom du rp

Wanted

My dear friend ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.

Code:: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"><style>.rs_hazel ::-webkit-scrollbar-thumb {background: #1f292e; border-radius: 0;} .rs_hazel ::-webkit-scrollbar {background: #d9d9d9; width: 5px;} .rs_hazel {position: relative; background: #fff; width: 500px; margin: auto; color: #1f292e; font-family: 'Heebo', sans-serif; font-size: 12px;} .rs_hazel header {position: relative; background: url(https://i.imgur.com/3XwfJ9K.png); height: 382px; width: 100%; overflow: hidden;} .h_titres {transition: .5s; background: url(https://i.imgur.com/06xwNIm.png) no-repeat center; width: 50%; padding: 24% 0 20%; margin: 3% 0 0 0; text-align: center; color: #e3e3e3; text-transform: uppercase;} .rs_hazel h2 {font-family: Arial, sans-serif; font-size: 36px; font-style: italic; font-weight: normal; margin: 0; letter-spacing: -6px; text-shadow: 1px 1px #fff;} .rs_hazel h3 {font-size: 10px; font-weight: normal;} .h_infos {transition: .5s margin-left; background: url(https://i.imgur.com/BdhZz6K.png) no-repeat; margin: -291px 0 0 -500px; height: 382px; color: #e3e3e3; padding: 8% 0 0 8%; box-sizing: border-box;} .rs_hazel:hover .h_infos {margin: 0; transition: .5s margin-left;} .rs_hazel:hover .h_titres {display: none; transition: .5s all;} .h_infos h4 .fa-quote-left, .rs_hazel_wanted h4 .fa-quote-left, .fa-star {color: #e3e3e3;} .rs_hazel h4 {font-family: Arial, sans-serif; font-size: 30px; text-transform: lowercase; font-style: italic; font-weight: normal; letter-spacing: -2px; margin: 3% 0;} .rs_hazel ul {margin: 0; text-transform: uppercase; font-size: 10px; padding: 0;} .rs_hazel ul li {list-style: none;} .rs_hazel_img img {width: 100px; height: 100px; border-radius: 100px; border: 4px solid #fff; object-fit: cover; position: absolute;} .rs_hazel_img {height: 100px; margin: -35% 0 0 0; position: relative; z-index: 2;} #img_1 {left: 5%;} #img_2 {left: 40%; top: 35%;} #img_3 {right: 10%; width: 60px; height: 60px; top: 85%;} .en_bref {background: url(https://i.imgur.com/eA6CpuC.jpg); padding: 10%; box-sizing: border-box; margin: 7% 0 0;} .en_bref h4 {color: #e3e3e3; margin: 0 0 0 10%;} .en_bref_content {background: #e3e3e3; padding: 8%; text-align: justify;} .en_bref p {margin: 0; width: 100%; height: 120px; overflow: hidden;} .en_bref p:hover {transition: .2s all; overflow: auto; padding: 0 5% 0 0; box-sizing: border-box;} .en_bref p span {font-weight: bold; text-transform: uppercase; font-family: Arial, sans-serif; font-size: 11px;} .rs_hazel_rp {width: 90%; margin: auto;} .rs_hazel_rp a {border: 2px solid !important; margin: 0 2%; padding: 1% 2%; min-width: 100px; display: inline-block; text-align: center; font-style: italic; transition: .5s all; color: #e3e3e3 !important;} .rs_hazel_rp a:hover {transition: .5s all; border: 2px solid #5DB36A !important; color: #5DB36A !important;} .rs_hazel_wanted {float: left; width: 60%;} .rs_hazel_wanted h4 {color: #e3e3e3; font-size: 35px; margin: 3% 0 0 10%;} .rs_hazel_wanted p {width: 60%; margin: 2% 2% 0 8%;} .wanted_content {width: 100%; margin: 0 0 0 7%;} .wanted_content p {width: 90%; height: 67px; overflow: auto; box-sizing: border-box; text-align: justify; padding: 0 5% 0 2%;} .wanted_content p span {font-weight: bold; text-transform: uppercase; font-family: Arial, sans-serif;} #wanted_img {border: 1px solid #e3e3e3; padding: 1%; float: right; margin: 10% 5% 0 0;} .rs_hazel footer {position: relative; display: block; content: ""; clear: both; background: url(https://i.imgur.com/gEd8b4c.png) no-repeat bottom; width: 100%; height: 140px;} a.credits {color: #e3e3e3; text-decoration: none; text-align: center; display: block; position: absolute; top: 60%; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; left: 45%;}</style> <div class="rs_hazel"><header><div class="h_titres"><h2>PRENOM NOM</h2><h3>Une citation qui envoie du pâté</h3></div><div class="h_infos"><h4><i class="fas fa-quote-left"></i> Détails</h4> <ul><li>★ Age</li><li>★ Nationalité </li><li>★ Orientation sexuelle</li><li>★ Occupation</li><li>★ Trois qualités </li><li>★ Trois défauts ; ★ Hobby</li></ul></div></header> <div class="rs_hazel_img"><img src="https://i.imgur.com/GGTQoPz.png" id="img_1" alt="" /> <img src="https://i.imgur.com/lfNO1KE.png" alt="" id="img_2" /> <img src="https://imgur.com/GMCkr68.gif" alt="" id="img_3" /></div> <div class="en_bref"><h4>en bref ...</h4><div class="en_bref_content"><p><span>Sale Caractère ; </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</p></div></div> <div class="rs_hazel_rp"><a href="#">Nom du rp</a> <a href="#">Nom du rp</a> <a href="#">Nom du rp</a></div> <div class="rs_hazel_wanted"><h4><i class="fas fa-quote-left"></i> Wanted</h4> <div class="wanted_content"><p><i class="fas fa-star"></i> <span>My dear friend ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</div> <div class="wanted_content"><p><i class="fas fa-star"></i> <span>My dear friend ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</p></div></div><img src="https://i.imgur.com/wetKlvi.png" alt="" id="wanted_img" /> <footer><a href="http://ls-halloween.fr/" class="credits">Halloween</a></footer></div>

Dernière édition par Le Monde le Lun 16 Sep - 2:21, édité 3 fois

Relations positives

Nom Prénom

Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.

Nom Prénom

Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.

Nom Prénom

Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.

Nom Prénom

Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.

Nom Prénom

Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.

Code:: <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"><style>.rs_hazel_2 ::-webkit-scrollbar-thumb {background: #1f292e; border-radius: 0;} .rs_hazel_2 ::-webkit-scrollbar {background: #d9d9d9; width: 5px;} .rs_hazel_2 {background: #fff; width: 500px; margin: auto; font-family: 'Heebo', sans-serif; color: #4d4d4d;} .rs_hazel_2 header {background: url(https://i.imgur.com/T6qgcup.png); height: 157px; position: relative;} .rs_hazel_2 header h2 {color: #e3e3e3; font-family: Arial, sans-serif; font-size: 30px; margin: 0; font-style: italic; letter-spacing: -2px; font-weight: normal; padding: 12% 0 0 10%;} #icon_hazel {top: 40%; position: absolute; border-radius: 100px; width: 100px; height: 100px; object-fit: cover; border: 4px solid #fff; right: 10%;} .rs_hazel_2 .content::after {content: ""; clear: both; display: block;} .rs_hazel_bloc {width: 40%; margin: 5%; float: left; position: relative; background: #f9f5f5;} .hazel_bloc_img {position: absolute; width: 80px; height: 80px; border-radius: 100px; padding: 1%; border: 1px solid #a7a7a7; top: -1%; left: -20%; object-fit: cover;} .gryffondor h2 {background: url(https://i.imgur.com/BVLdoDM.png) no-repeat top right; height: 48px;} .serpy h2 {background: url(https://i.imgur.com/U8WJlVA.png) no-repeat top right; height: 48px;} .poufsouffle h2 {background: url(https://i.imgur.com/WR0Opda.png) no-repeat top right; height: 48px;} .serdaigle h2 {background: url(https://i.imgur.com/k4CGFKm.png) no-repeat top right; height: 48px;} .personnel h2 {background: url(https://i.imgur.com/KXVlFn0.png) no-repeat top right; height: 48px;} .rs_hazel_bloc h2 {font-family: Arial, sans-serif; text-align: center; color: #fff; font-size: 14px; font-style: italic; padding: 9% 0 0; margin: 0;} .rs_hazel_bloc h3 {font-family: Arial, sans-serif; font-size: 10px; text-align: center; text-transform: uppercase; margin: 0; font-weight: normal; letter-spacing: 2px;} .rs_hazel_bloc p {font-size: 11px; width: 90%; margin: 0 auto; text-align: justify; line-height: 1; height: 100px; overflow: hidden; padding: 0 5% 0 0; box-sizing: border-box;} .rs_hazel_bloc.gryffondor {padding: 0 0 4% 0; border-bottom: 5px solid #cc1045;} .rs_hazel_bloc.serpy {padding: 0 0 4% 0; border-bottom: 5px solid #5db36a;} .rs_hazel_bloc.poufsouffle {padding: 0 0 4% 0; border-bottom: 5px solid #e6cb61;} .rs_hazel_bloc.serdaigle {padding: 0 0 4% 0; border-bottom: 5px solid #47b6de;} .rs_hazel_bloc.personnel {padding: 0 0 4% 0; border-bottom: 5px solid #b273c7;} .rs_hazel_bloc p:hover {overflow: auto;} .rs_hazel_2 footer {position: relative; display: block; content: ""; clear: both; background: url(https://i.imgur.com/gEd8b4c.png) no-repeat bottom; width: 100%; height: 140px;} a.credits {color: #e3e3e3; text-decoration: none; text-align: center; display: block; position: absolute; top: 60%; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; left: 45%;} .content {width: 95%; margin: 0 0 0 5%;}</style> <div class="rs_hazel_2"><header><h2>Relations positives</h2><img src="https://i.imgur.com/t0B1zLQ.png" alt="" id="icon_hazel" /></header> <div class="content"><div class="rs_hazel_bloc gryffondor"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc serpy"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc poufsouffle"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc serdaigle"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc personnel"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div></div><footer><a href="http://ls-halloween.fr/" class="credits">Halloween</a></footer></div>