Welcome

Halloween Relations

Hazel

Up Halloween LS Codage Forumactif

Halloween, LS codage Forumactif Fiches & Messages Relations Relations Hazel

Toutes versions

Optimisé Au survol du header (fond avec le texte "Hazel Avery") un nouveau bloc apparait pour afficher les informations de base. L'image de fond (la fille avec le filtre vert) est en 500*382px. L'image à droite du "Wanted" est en 131*154px.

Codage relations Hazel Halloween Forumactif

Codage relations Hazel hover Halloween Forumactif

Codage relations Hazel 2 Halloween Forumactif

HTML post 1

<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>Hazel Avery</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>★ Vingt ans</li><li>★ Sang-pur</li><li>★ Bisexuelle</li><li>★ Irlando-Canadienne</li><li>★ Dixième année</li><li>★ Défense magique & occultisme ;
★ Etude des créatures magiques</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>

HTML post 2

<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>

#hazel #relations #forumactif #codage #libreservice