<link href="https://fonts.googleapis.com/css?family=Bilbo|Allura" rel="stylesheet"> <style type="text/css">.paper_links { width: 500px; min-height: 300px; height: auto; margin: auto; background-image: url(https://i.goopics.net/AdEvw.jpg); border: 1px solid #d86764; } .paper_links .paper_links_head { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 90px; background-color: rgba(0, 0, 0, 0.6); font-family: Allura; font-size: 50px; color: #d86764; text-shadow: 0px 0px 8px grey; text-align: center; } .paper_links .family_box { position: relative; top: 10px; width: 500px; height: 360px; text-align: center; color: white; } .paper_links .family_box .title_family { position: relative; font-family: Allura; font-size: 35px; color: #E69B99; text-shadow: 0px 0px 16px white; } .paper_links .family_box .family { position: relative; top: 3px; height: 265px; margin: auto 15px; padding: 3px; color: white; z-index: 1; background-color: rgba(0, 0, 0, 0.46); } .paper_links .family_box .family .links_family { position: relative; top: 210px; width: 100%; height: 50px; margin: auto; color: white; z-index: 2; border-top: 1px solid white; } .paper_links .family_box .family .links_others { position: relative; top: 190px; width: 100%; margin: auto; color: white; z-index: 3; border-top: 1px solid white; } .paper_links .family_box > .family .links_family div { display: inline-block; width: 50px; height: 50px; margin: auto 5px; background-size: cover; background-repeat: no-repeat; color: black; border: 3px solid #d86764; border-radius: 50px; transition: border-radius 0.8s linear, border 0.8s linear, box-shadow 0.8s linear; } .paper_links .family_box > .family .links_others div { display: inline-block; width: 30px; height: 30px; margin: auto 5px; background-size: cover; background-repeat: no-repeat; color: black; border: 3px solid #d86764; border-radius: 50px; transition: border-radius 0.8s linear, border 0.8s linear, box-shadow 0.8s linear; } .paper_links .family_box .family .links_family div:hover, .paper_links .family_box .family .links_others div:hover { border: 2px solid white; box-shadow: 0px 0px 14px white; border-radius: 10px; transition: border-radius 0.8s linear, border 0.8s linear, box-shadow 0.8s linear; } .family .menu_family { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px dashed #d86764; } .family .menu_family .bloc_cache { display: none; } .family .menu_family .bloc_cache > div { position: absolute; height: 210px; margin: 0; z-index: 3; } .family .menu_family .bloc_cache > div > div { top: 25px; margin: 20px; margin-right: 5px; padding-right: 20px; overflow: auto; height: 155px; } .family .menu_family .bloc_cache > div > div::-webkit-scrollbar { width: 4px; height: 4px; margin-left: -20px; } .family .menu_family .bloc_cache > div > div::-webkit-scrollbar-track { border-radius: 8px; } .family .menu_family .bloc_cache > div > div::-webkit-scrollbar-thumb { border-radius: 21px; background: white; } .family .menu_family .bloc_cache > .text { left: 0; width: 315px; text-align: justify; font-family: 'Bilbo'; font-size: 20px; } .family .menu_family .bloc_cache > .text .member { text-align: center; color: #d86764; font-size: 24px; padding-bottom: 20px; } .family .menu_family .bloc_cache > .text .member .relation { text-align: center; } .family .menu_family .bloc_cache > .vava { top: 15px; left: 322px; width: 130px; height: 160px; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid white; z-index: 2; } .family .menu_family input { display: none; } .family .menu_family input#id0000:checked ~ div.id0000info, .family .menu_family input#id0001:checked ~ div.id0001info, .family .menu_family input#id0002:checked ~ div.id0002info, .family .menu_family input#id0003:checked ~ div.id0003info, .family .menu_family input#id0004:checked ~ div.id0004info, .family .menu_family input#id0005:checked ~ div.id0005info, .family .menu_family input#id0006:checked ~ div.id0006info, .family .menu_family input#id0007:checked ~ div.id0007info, .family .menu_family input#id0008:checked ~ div.id0008info, .family .menu_family input#id0009:checked ~ div.id0009info, .family .menu_family input#id0010:checked ~ div.id0010info, .family .menu_family input#id0011:checked ~ div.id0011info, .family .menu_family input#id0012:checked ~ div.id0012info, .family .menu_family input#id0013:checked ~ div.id0013info, .family .menu_family input#id0014:checked ~ div.id0014info, .family .menu_family input#id0015:checked ~ div.id0015info, .family .menu_family input#id0016:checked ~ div.id0016info, .family .menu_family input#id0017:checked ~ div.id0017info, .family .menu_family input#id0018:checked ~ div.id0018info { display: inline; } /* avatars miniatures - liens familiaux */ .paper_links .family_box .family .tree { background-image: url('http://img110.xooimage.com/files/6/4/7/dim1j4-dd9e4f66-9...856fd5a5-55f8a55.jpg'); } .paper_links .family_box .family .links_family .mother { background-image: url('https://pictures.betaseries.com/personnages/25693.jpg'); } .paper_links .family_box .family .links_family .father { background-image: url('https://pictures.betaseries.com/personnages/25692.jpg'); } .paper_links .family_box .family .links_family .brother { background-image: url('https://pictures.betaseries.com/personnages/25690.jpg'); } .paper_links .family_box .family .links_family .sister { background-image: url('https://pictures.betaseries.com/personnages/25691.jpg'); } .paper_links .family_box .family .links_family .sister2 { background-image: url('https://pictures.betaseries.com/personnages/338731.jpg'); } /* avatars miniatures - autres liens */ .paper_links .family_box .family .links_others .member1 { background-image: url('https://pictures.betaseries.com/personnages/291067.jpg'); } .paper_links .family_box .family .links_others .member2 { background-image: url('https://pictures.betaseries.com/personnages/2242.jpg'); } .paper_links .family_box .family .links_others .member3 { background-image: url('https://pictures.betaseries.com/personnages/78488.jpg'); } .paper_links .family_box .family .links_others .member4 { background-image: url('https://pictures.betaseries.com/personnages/2243.jpg'); } .paper_links .family_box .family .links_others .member5 { background-image: url('https://pictures.betaseries.com/personnages/291069.jpg'); } .paper_links .family_box .family .links_others .member6 { background-image: url('https://pictures.betaseries.com/personnages/326611.jpg'); } .paper_links .family_box .family .links_others .member7 { background-image: url('https://pictures.betaseries.com/personnages/335058.jpg'); } .paper_links .family_box .family .links_others .member8 { background-image: url('https://pictures.betaseries.com/personnages/291071.jpg'); } .paper_links .family_box .family .links_others .member9 { background-image: url('https://pictures.betaseries.com/personnages/326613.jpg'); } .paper_links .family_box .family .links_others .member10 { background-image: url('https://pictures.betaseries.com/personnages/361253.jpg'); } .paper_links .family_box .family .links_others .member11 { background-image: url('https://pictures.betaseries.com/personnages/386781.jpg'); } .paper_links .family_box .family .links_others .member12 { background-image: url('https://pictures.betaseries.com/personnages/335083.jpg'); } /* images taille reelle - liens familiaux */ .family .menu_family .id0001info .vava { background-image: url('http://img110.xooimage.com/files/5/4/8/photo-1064874121-55f83da.jpg'); } .family .menu_family .id0002info .vava { background-image: url('https://i0.wp.com/nohalo.org/wp-content/uploads/2018/11/83e7078f11094064b20363c683df57e4-1.jpg'); } .family .menu_family .id0003info .vava { background-image: url('https://i.pinimg.com/originals/78/ec/b6/78ecb6d8e3968b4befeefcbf8dae6181.jpg'); } .family .menu_family .id0004info .vava { background-image: url('http://img110.xooimage.com/files/6/e/c/photo-1064874122-55f8946.jpg'); } .family .menu_family .id0005info .vava { background-image: url('https://iv1.lisimg.com/image/1769581/359full-ally-walker.jpg'); } /* images taille reelle - autres liens */ .family .menu_family .id0007info .vava { background-image: url('https://vignette.wikia.nocookie.net/sons-of-anarchy-a-murder-of-crows/images/c/c1/Av-73.png/revision/latest?cb=20141023062202'); } .family .menu_family .id0008info .vava { background-image: url('https://pbs.twimg.com/profile_images/1584953156/image_t6.jpg'); } .family .menu_family .id0009info .vava { background-image: url('https://render.fineartamerica.com/images/rendered/default/print/6.625/8.000/break/images/artworkimages/medium/1/mark-boone-jr-as-bobby-munson-rick-fortson.jpg'); } .family .menu_family .id0010info .vava { background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/disp/185b5c28096057.5636f8d209b89.jpg'); } .family .menu_family .id0011info .vava { background-image: url('https://pbs.twimg.com/profile_images/532652840721063937/lkRh5V_k_400x400.jpeg'); } .family .menu_family .id0012info .vava { background-image: url('https://i.ytimg.com/vi/R244NxUkwHA/hqdefault.jpg'); } .family .menu_family .id0013info .vava { background-image: url('https://66.media.tumblr.com/776f61ae51b622a23ce86d1a00cededa/tumblr_inline_ot57ovj6mU1r5w89h_500.gif'); } .family .menu_family .id0014info .vava { background-image: url('http://www1.pictures.zimbio.com/mp/HNUjZPfsWsml.jpg'); } .family .menu_family .id0015info .vava { background-image: url('http://cdn3.whatculture.com/images/2018/07/b864d4e865760474-600x338.jpg'); } .family .menu_family .id0016info .vava { background-image: url('https://www.trashtalktv.com/wp-content/uploads/2014/10/stalesugarcookie.jpg'); } .family .menu_family .id0017info .vava { background-image: url('https://pixel.nymag.com/imgs/daily/vulture/2017/10/26/26-Eleven.w1200.h630.png'); } .family .menu_family .id0018info .vava { background-image: url('http://4.bp.blogspot.com/-1kPb1cJuY3I/UpcrHG_mmrI/AAAAAAAABzY/dSR5hoKJahk/s1600/30472.jpg'); } .family .menu_family .teaser { left: 25px; right: 25px; text-align: justify; font-family: 'Bilbo'; font-size: 20px; color: white; z-index: 2; }</style> <div class="paper_links"> <div class="paper_links_head">Les relations se construisent</div> <div class="family_box"> <div class="title_family">Liens familiaux</div> <div class="family"> <div class="links_family"> <label for="id0000" id="item_nav"><div class="tree"></div></label> <label for="id0001" id="item_nav"><div class="mother"></div></label> <label for="id0002" id="item_nav"><div class="father"></div></label> <label for="id0003" id="item_nav"><div class="brother"></div></label> <label for="id0004" id="item_nav"><div class="sister"></div></label> <label for="id0005" id="item_nav"><div class="sister2"></div></label> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0000" checked> <div class="id0000info bloc_cache"> <div class="teaser">Paragraphe rapide d'introduction sur la famille. Les quelques membres importants ? Phrase philosophique ou autres ? Qu'en sais-je ?</div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0001"> <div class="id0001info bloc_cache"> <div class="text"><div> <div class="member">My Mother</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0002"> <div class="id0002info bloc_cache"> <div class="text"><div> <div class="member">My Father</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0003"> <div class="id0003info bloc_cache"> <div class="text"><div> <div class="member">My Brother</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0004"> <div class="id0004info bloc_cache"> <div class="text"><div> <div class="member">My Sister</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav" id="id0005"> <div class="id0005info bloc_cache"> <div class="text"><div> <div class="member">My Sister 2</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> </div> </div> <div class="family_box"> <div class="title_family">Autres liens</div> <div class="family"> <div class="links_others"> <label for="id0006" id="item_nav2"><div class="tree"></div></label> <label for="id0007" id="item_nav2"><div class="member1"></div></label> <label for="id0008" id="item_nav2"><div class="member2"></div></label> <label for="id0009" id="item_nav2"><div class="member3"></div></label> <label for="id0010" id="item_nav2"><div class="member4"></div></label> <label for="id0011" id="item_nav2"><div class="member5"></div></label> <label for="id0012" id="item_nav2"><div class="member6"></div></label><br/> <label for="id0013" id="item_nav2"><div class="member7"></div></label> <label for="id0014" id="item_nav2"><div class="member8"></div></label> <label for="id0015" id="item_nav2"><div class="member9"></div></label> <label for="id0016" id="item_nav2"><div class="member10"></div></label> <label for="id0017" id="item_nav2"><div class="member11"></div></label> <label for="id0018" id="item_nav2"><div class="member12"></div></label> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0006" checked> <div class="id0006info bloc_cache"> <div class="teaser">Paragraphe rapide d'introduction sur les autres liens construits. Les quelques membres importants ? Phrase philosophique ou autres ? Qu'en sais-je ?</div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0007"> <div class="id0007info bloc_cache"> <div class="text"><div> <div class="member">Member Number 1</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0008"> <div class="id0008info bloc_cache"> <div class="text"><div> <div class="member">Member Number 2</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0009"> <div class="id0009info bloc_cache"> <div class="text"><div> <div class="member">Member Number 3</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0010"> <div class="id0010info bloc_cache"> <div class="text"><div> <div class="member">Member Number 4</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0011"> <div class="id0011info bloc_cache"> <div class="text"><div> <div class="member">Member Number 5</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0012"> <div class="id0012info bloc_cache"> <div class="text"><div> <div class="member">Member Number 6</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0013"> <div class="id0013info bloc_cache"> <div class="text"><div> <div class="member">Member Number 7</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0014"> <div class="id0014info bloc_cache"> <div class="text"><div> <div class="member">Member Number 8</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0015"> <div class="id0015info bloc_cache"> <div class="text"><div> <div class="member">Member Number 9</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0016"> <div class="id0016info bloc_cache"> <div class="text"><div> <div class="member">Member Number 10</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0017"> <div class="id0017info bloc_cache"> <div class="text"><div> <div class="member">Member Number « Eleven »</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> <div class="menu_family"> <input type="radio" name="item_nav2" id="id0018"> <div class="id0018info bloc_cache"> <div class="text"><div> <div class="member">Member Number 12</div> Partie dédiée à la description physique et/ou morale du membre. Relation entretenue avec Lorelaï. Cet espace peut être découpé en plusieurs paragraphes.<br/><br/> Une scrollbar automatique devrait apparaître si le texte dépasse la longueur autorisée du cadre dédié à cette description. </div></div> <div class="vava"></div> </div> </div> </div> </div> </div>