Nom & Prénom
Sous-titre
Prénom :Texte
Age : Texte
Espèce : Texte
Orientation sexuelle : Texte
Métier : Texte
Quartier: Texte
EN COURS
PSEUDO MEMBRE ▲ Titre du rp
PSEUDO MEMBRE ▲ Titre du rp
PSEUDO MEMBRE ▲ Titre du rp
TERMINES
PSEUDO MEMBRE ▲ Titre du rp
PSEUDO MEMBRE ▲ Titre du rp
PSEUDO MEMBRE ▲ Titre du rp
(M/F) TITRE LIEN ▲ Description du lien recherché
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.
- Code:
<style>.liens{background:linear-gradient(90deg,#a53507, #e68f6c);font-size:12px;margin:auto;position:relative;text-align:justify;width:500px;padding:0 0 2%;height:fit-content}.blocs_liens ::-webkit-scrollbar,.liens ::-webkit-scrollbar{width:5px}.blocs_liens ::-webkit-scrollbar-thumb,.liens ::-webkit-scrollbar-thumb{background:#eb433d;border-radius:100px}.blocs_liens ::-webkit-scrollbar-track,.liens ::-webkit-scrollbar-track{background:#d9d9d9}.liens .header{padding:6.5%;background:linear-gradient(90deg,#a53507, #e68f6c)!important}.liens h2{color:#fff;font-family:Times New Roman;font-size:30px;margin:0;text-align:center;border:0;font-weight:700;font-style:italic;border-bottom:1px solid #fff;padding:0 0 4% 0}.liens h3{font-size:12px;letter-spacing:2px;margin:2% 0 0;text-transform:uppercase;font-family:Economica,sans-serif;font-weight:400;text-align:center;color:#fff;letter-spacing:3px}.liens_hover{width:480px;height:430px;overflow:hidden;margin:2% auto;border:1px solid #fff;position:relative}.liens_hover_image{z-index:1;transition:.5s all;position:relative}.liens_hover:hover .liens_hover_image{margin-top:430px;transition:.5s all}.liens_hover_contenu{position:absolute;top:0;background:linear-gradient(90deg,#a53507, #e68f6c);width:480px;height:430px;padding:2%;box-sizing:border-box;color:#fff}.liens a{color:#fff}.bloc_gauche{float:left;width:48.5%;height:220px;overflow:auto;margin:0 2% 2% 0}.bloc_droite{border:0;float:right;height:220px;margin:0 0 2%;overflow:auto;width:48.5%}.bloc_droite:nth-child(2),.bloc_gauche:nth-child(0n+1){height:150px}.liens span{font-family:Economica,sans-serif;letter-spacing:1px;font-size:16px}.bloc_gauche:nth-child(1n+2){border-right:1px solid #fff}.liens .separation{display:block;content:"";background:#fff;width:100%;height:1px;margin:2% auto 5%}.clear{clear:both}.blocs_liens{margin:auto;width:500px}.blocs_liens .hrp{width:400px;height:100px;float:left;background:url(https://zupimages.net/up/21/26/121a.png);padding:2%;box-sizing:border-box;color:#fff;text-align:justify}.blocs_liens .hrp p{margin:0;padding:2%;border:1px solid;height:65px;overflow:auto}img.blocs_liens_img{float:left;width:100px;height:100px;object-fit:cover}.liens .credits{border-bottom:1px solid #white;color:#fff;display:block;font-size:8px;margin:auto;text-align:center;text-transform:uppercase;width:30px}</style>
<link href="https://fonts.googleapis.com/css?family=Economica" rel="stylesheet">
<div class="liens"><div class="header"><h2>Nom & Prénom</h2><h3>Sous-titre</h3></div><div class="liens_hover"><div class="liens_hover_image"><img src="https://zupimages.net/up/20/43/0jqm.png" alt="" /></div><div class="liens_hover_contenu"><div class="bloc_gauche"><span>Nom :</span> Texte
<span>Prénom :</span>Texte
<span>Age :</span> Texte
<span>Espèce :</span> Texte
<span>Orientation sexuelle :</span> Texte
<span>Métier :</span> Texte
<span>Quartier:</span> Texte </div><div class="bloc_droite"><span>Info random :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non arcu gravida, aliquam diam at, cursus sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis egestas maximus sapien et suscipit. Vivamus eu ex justo. Quisque tempus lectus sed ligula sollicitudin, euismod lacinia felis volutpat. Pellentesque pretium, massa ac mollis maximus, felis nulla vulputate erat, id posuere orci sapien vitae velit. Donec eu cursus justo. Curabitur sit amet dolor cursus, sollicitudin nisi sed, convallis elit.</div><div class="clear"></div><div class="separation"></div><div class="bloc_gauche"><span>Listing RP's</span>
EN COURS
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a>
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a>
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a>
TERMINES
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a>
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a>
PSEUDO MEMBRE ▲ <a href="#">Titre du rp</a></div><div class="bloc_droite"><span>Liens recherchés</span>
(M/F) TITRE LIEN ▲ Description du lien recherché</div><div class="clear"></div></div></div><a href="http://ls-halloween.fr/" target="_blank" class="credits">Halloween</a></div>
<div class="blocs_liens"><div class="hrp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.</p></div><img src="https://zupimages.net/up/20/43/ow0c.png" alt="" class="hrp_img" /><div class="clear"></div>
<div class="hrp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.</p></div><img src="https://zupimages.net/up/20/43/ow0c.png" alt="" class="hrp_img" /><div class="clear"></div>
<div class="hrp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eget risus eu rutrum. Nam sed maximus sapien. Vestibulum lacus nulla, laoreet non elit vitae, sagittis finibus urna. Nulla iaculis placerat ornare. Quisque consectetur maximus bibendum. Fusce eget condimentum ipsum. Nullam nec velit hendrerit, tristique ex eu, suscipit libero. Vivamus pretium metus ut libero semper dignissim.</p></div><img src="https://zupimages.net/up/20/43/ow0c.png" alt="" class="hrp_img" /><div class="clear"></div></div>
|
|