Codes et prez

<link href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Quicksand&display=swap" rel="stylesheet"><style>.strct-cbrpnk{margin:auto;width:500px}.hdr-cbpnk{width:400px;height:150px;-moz-box-shadow:0 0 10px #D91AC0;-webkit-box-shadow:0 0 10px #D91AC0;box-shadow:0 0 15px #D91AC0}.ttl-cbrpnk{font-family:'Covered By Your Grace',cursive;color:#F0FE26;text-align:center;margin:50px;font-size:36px;text-shadow:0px 0px 8px #A3FDFD;line-height:30px}.bd-cbrpnk{text-align:justify;padding:30px;backdrop-filter:blur(3px);background-color:rgba(0, 0, 0, 0.4);color:white;font-size:13px;font-family:'Quicksand',sans-serif;-moz-box-shadow:0 0 10px #08BDA5;-webkit-box-shadow:0 0 10px #08BDA5;box-shadow:0 0 10px #08BDA5}.bckgrnd-cbpnk{padding:50px 50px 25px;background-image:url('https://i.servimg.com/u/f77/19/35/98/81/backgr10.jpg')} .dlg-cbpnk{margin: 20px 50px 0px; color:#F0FE26;} #crdts-cbpnk{text-align:center;margin:30px 0px 0px;color:#F0FE26;font-size:12px;font-variant:small-caps;text-shadow:0px 0px 4px #A3FDFD;font-family:'Quicksand',sans-serif}#NU-lnk-cbpnk{color:#F0FE26;text-decoration:none}</style><div class="strct-cbrpnk"><div class="bckgrnd-cbpnk"><img src="https://i.servimg.com/u/f77/19/35/98/81/sombra10.jpg" class="hdr-cbpnk"/><div class="ttl-cbrpnk">Cyberpunk</div><div class="bd-cbrpnk"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non faucibus nisl. Morbi suscipit viverra erat vel scelerisque. Ut ornare, est id egestas tempus, elit diam mollis magna, id malesuada turpis erat sed ex. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a libero ante. Vivamus a purus orci. Fusce vulputate nisi sit amet commodo convallis. Donec maximus mauris felis, quis cursus leo fringilla ac. Proin finibus lacus tortor, eu feugiat massa vulputate sit amet. Mauris varius velit tortor, quis vestibulum nisl lobortis sit amet. Nullam euismod ipsum sit amet mollis porttitor.
<div class="dlg-cbpnk">- Lorem ipsum dolor sit amet.</div>
Aliquam vel ipsum nulla. Mauris vestibulum risus a lacus sollicitudin molestie. Nullam leo sapien, tempus sit amet auctor consectetur, fermentum ultrices justo. Sed quam risus, gravida quis pretium consectetur, condimentum et metus. Pellentesque tempus diam in auctor sollicitudin. Cras condimentum augue id nulla sodales auctor. Quisque finibus mollis massa at feugiat. Fusce auctor tortor id sem scelerisque, quis dignissim nulla vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec in varius elit. Suspendisse potenti. Integer est odio, condimentum at erat sit amet, bibendum maximus purus. Fusce commodo mi nulla, sit amet congue nunc ultrices vitae. Fusce eros tortor, hendrerit id tortor eu, ullamcorper imperdiet lorem. Etiam erat mi, gravida ac massa eu, ultricies sollicitudin nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget porttitor nisl. Cras lacinia porta lectus, at elementum odio finibus sed. Nunc odio est, viverra fermentum arcu vitae, elementum finibus enim. Cras sed aliquet ligula, vitae laoreet leo. Proin dui tortor, vulputate in tellus sed, volutpat aliquam libero. Donec vehicula faucibus mauris in semper. Proin sodales nibh ac nibh posuere, ut pretium dui consequat. Praesent non nibh rutrum, condimentum mi eget, ultricies felis.

Cras auctor faucibus elit, ut placerat tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit ante nec ante sagittis lobortis. Vivamus sollicitudin vel orci dignissim vehicula. Curabitur posuere tellus a euismod accumsan. Curabitur vestibulum libero ac tortor gravida semper. Nulla maximus quis ante molestie aliquet. Morbi eget interdum diam, at fringilla elit.

Cras id leo commodo, ultrices velit sed, placerat ex. Nullam sit amet neque at dui rhoncus consectetur ut at dui. Mauris sed erat ut est rhoncus blandit. Etiam iaculis porta faucibus. Quisque augue sapien, ultrices nec congue ac, tristique et erat. Praesent vel consequat metus. Maecenas fermentum dui elit, non fringilla ex commodo sit amet.</div><div id="crdts-cbpnk">@elfyqchan - <a id="NU-lnk-cbpnk" href="https://www.never-utopia.com" target="_blank">Never Utopia</a></div></div></div>

<!-- AJOUT DES LIENS CSS --><link href="https://fonts.googleapis.com/css?family=Montserrat:300|Oswald:400,500&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/395753f97a.js"></script><!-- CSS --><style>.caspianpres {font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 300; color: #262628; width: 500px; position: relative; margin: auto; text-align: justify; background: #fff; overflow: hidden;} .caspianpres p {margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 10px;} .caspianpres h2 {color: #262628; font-family: Oswald, sans-serif; font-size: 24px; font-weight: 500; margin: 0 0 10%; position: relative; text-align: center; text-transform: uppercase; border: 0;} .caspianpres .c_caractere h2::before {top: 50%; left: 15%;} .c_histoire h2::before {left: 34%; top: 50%;} .caspianpres h2::before {position: absolute; width: 160px; height: 3px; background: var(--main-color); content: ""; z-index: 2;} .caspianpres header {height: 406px; font-family: 'Arial', sans-serif; color: #fff; text-transform: lowercase; letter-spacing: -2px; font-size: 24px; padding: 34.5% 0 0; text-align: center; box-sizing: border-box;} .caspianpres .c_name {font-family: 'Times new roman', sans-serif; font-size: 180px; color: #eeeeee; height: 200px; position: absolute; right: -75%; top: 450px; text-transform: uppercase; z-index: 2;} .c_infos {background: url(https://i.imgur.com/yp8tNGB.png); height: 468px; margin: 120px 0 0; z-index: 3; position: relative;} .c_tolerance {background: var(--main-color); color: #fff; width: 30%; position: absolute; top: -60px; left: 5%; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 60px; box-sizing: border-box; line-height: 1; font-weight: 400; padding: 10% 6%;} .c_infos p {color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1.1; padding: 55% 8% 0;} .c_caractere {position: relative; margin: 15% 0; display: flex;} .c_triangle {width: 0; height: 0; border: 0 solid transparent; border-bottom-width: 130px; border-top-width: 130px; border-left: 230px solid var(--main-color); position: absolute; z-index: 2; top: 10%;} .c_carac_txt {width: 46%; margin: 0 0 0 5%; height: 320px; overflow: hidden;} .c_carac_txt p {height: 280px; line-height: 1.8; overflow: auto; padding: 0 17px 0 0; width: 100%; box-sizing: initial;} .c_truefacts p span {font-weight: 400; font-family: 'Oswald', sans-serif; font-size: 15px; color: var(--main-color);} img.c_icon {width: 15px; float: left; margin: 0 2% 0 0;} .c_avatar {margin: 0 4%; position: relative; z-index: 3; width: 180px; height: 321px; object-fit: cover;} .c_details_txt {width: 276px; height: 275px; margin: 0 0 0 13%; padding: 5%; box-sizing: border-box; overflow: hidden; text-transform: uppercase;} .c_details {display: flex; align-items: center;} .c_details_txt p {font-family: 'Oswald', sans-serif; font-weight: 400; color: #fff; font-size: 14px;} .c_details_txt p span {color: var(--main-color);} .c_details_txt p {font-family: 'Oswald', sans-serif; font-weight: 400; color: #fff; font-size: 16px; width: 100%; height: 100%; overflow: auto; padding: 0 15% 0 0;} .c_adjfacts {margin: 10%; display: flex; position: relative;} .c_adjectifs {transform: rotate(-90deg); position: absolute; font-family: 'Oswald', sans-serif; text-transform: uppercase; top: 30%; line-height: 1.5; width: 288px; left: -25%;} .c_adjectifs h3 {font-size: 48px; font-weight: 400; margin: 0; padding: 0; text-align: right; font-family: 'Oswald', sans-serif; border: 0;} .c_adjectifs h4::before {background: var(--main-color); width: 60px; content: ""; height: 10px; display: inline-block; margin: 0 2% 0 0;} .c_adjectifs h4 {font-weight: 400; font-size: 18px;} .c_truefacts {width: 322px; background: url(https://i.imgur.com/TDrWGrt.png); height: 320px; margin: 0 0 0 20%; overflow: hidden;} .c_truefacts h5 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 500; margin: 15% 0 3% 20%;} .c_truefacts h5 span {color: var(--main-color);} .c_truefacts p {height: 220px; line-height: 1.5; margin: 0 0 0 20%; overflow: auto; padding: 0 23px 0 0; width: 250px; box-sizing: initial;} .header_histoire_img  {width: 100px; height: 100px; object-fit: cover; border-radius: 100px; border: 4px solid #fff; position: relative;} .header_histoire_img::after {content: ""; display: block; width: 50px; height: 50px; position: absolute; background: var(--main-color); bottom: 0; left: 0;} .header_histoire {background: url(https://i.imgur.com/DUwflDF.png); height: 183px; text-align: center; box-sizing: border-box; padding: 9% 0 0; margin: 0 0 2%;} .c_histoire h2 {margin: 0 0 5%;} .c_histoire_txt p {height: 100%; overflow: auto; padding: 0 17px 0 0; width: 100%; box-sizing: initial;} .c_histoire_txt {width: 70%; margin: auto; height: 300px; overflow: hidden;} .c_histoire_txt p {width: 100%; height: 100%; overflow: auto; padding: 0 5% 0 0;} .lettre_histoire {color: var(--main-color); font-style: normal; font-weight: 400; font-family: 'Oswald', sans-serif; font-size: 14px;} .c_footer {background: url(https://i.imgur.com/DUwflDF.png); box-sizing: border-box; height: 183px; margin: 16px 0 4%; padding: 6.5% 0 0;} .c_footer p {background: var(--main-color); color: #fff; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; padding: 4% 25%;} a#hallow_credits {font-family: Oswald, sans-serif; text-align: right; display: block; margin: 0 5% 2% 0; color: #e0e0e0; text-transform: lowercase; font-style: italic;}</style><!--

MODIFIER VOTRE COULEUR --><style>:root {--main-color : tomato;}</style><!--

FIN CSS


--><div class="caspianpres"><!--

HEADER --><header style="background: url(https://i.imgur.com/0QGynIO.png);">Prénom NOM</header><!--

CASPIAN --><div class="c_name">caspian</div><!--

INFORMATIONS --><div class="c_infos"><div class="c_tolerance">Adj
ect
if</div><p>Prénom Nom ⥋ Age ⥋ Sexualité ⥋ Race ou sang ⥋ Origine ⥋ Année ⥋ Etudes ⥋ Autre information ⥋ Autre information ⥋ Autre information ⥋ Autre information ⥋ Origine de l'avatar</p></div><!--

CARACTERE --><div class="c_caractere"><div class="c_triangle"></div><img src="https://imgur.com/nIWKrJM.png" class="c_avatar" alt="" /><div class="c_carac_txt"><h2>Truefacts</h2><p>Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬</p></div></div><!--

DETAILS --><div class="c_details"><div class="c_details_txt" style="background: url(https://i.imgur.com/wgUjxBx.png);"><p><span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse</p></div><img src="https://i.imgur.com/fWnpQMw.png" class="c_blaireau" alt="" /></div><!--

FUNFACTS --><div class="c_adjfacts"><div class="c_adjectifs"><h3>Gentillesse</h3><h4>Patience</h4></div><div class="c_truefacts"><h5>Carac<span>tère</span></h5><p><span>Trait ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<span>Trait</span> ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<span>Trait</span> ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<span>Trait</span> ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<span>Trait</span> ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<img src="https://i.imgur.com/qqEuZIZ.png" alt="" class="c_icon" /> Ce qu'il aime

<img src="https://i.imgur.com/yZEdtGL.png" alt="" class="c_icon" /> Ce qu'il déteste

<img src="https://i.imgur.com/pIjjIkJ.png" alt="" class="c_icon" /> Ses craintes

<span class="c_adj_resume">Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé </span></p></div></div><!--

HISTOIRE --><div class="c_histoire"><div class="header_histoire"><img src="https://imgur.com/OcJbkeo.png" alt="" class="header_histoire_img" /></div><h2>Histoire</h2><div class="c_histoire_txt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis. Mauris in tempor elit. Proin tristique bibendum elit, eget cursus lorem scelerisque id. Nulla fringilla condimentum erat. Pellentesque sed placerat ligula.

In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum iaculis nunc a tempus. Proin viverra sit amet lacus volutpat cursus. Duis congue convallis mauris vitae dictum. Aliquam eu augue sed leo accumsan porta vitae sed magna. Praesent faucibus elit at felis suscipit posuere. Nunc pretium est erat, a fringilla odio aliquet dignissim.

Integer tincidunt lacinia felis, ac facilisis augue porttitor commodo. Donec commodo ultrices ex viverra scelerisque. Morbi risus nibh, blandit et tempor id, vehicula vitae justo. Nullam quis fermentum dolor, in efficitur diam. Suspendisse bibendum posuere lobortis. Donec pulvinar vel lectus mollis eleifend. Fusce a pharetra ex, sit amet consequat lectus. Fusce eleifend libero id sem rutrum, et rhoncus nisi hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu viverra nisl, suscipit viverra erat. Fusce in consequat purus. Aliquam ac eleifend purus, et rhoncus mi. Aenean nisl tellus, vestibulum ac fringilla vitae, porttitor non nulla.

Donec eget mi nec orci mattis ullamcorper. Mauris quis velit consequat augue hendrerit fringilla. Nam vitae justo eu metus condimentum varius. Integer sagittis tellus ut sollicitudin suscipit. Ut a quam consectetur, volutpat lacus quis, tincidunt ex. Suspendisse egestas urna sodales vulputate condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque aliquet lacinia erat in pharetra. Quisque ac nisl et est euismod iaculis. Donec nec nisi non massa semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis lobortis neque. Suspendisse potenti. Cras vehicula maximus tempor. In varius nisi eu lectus facilisis iaculis. Quisque quis mattis nunc, tempus tincidunt est. Donec facilisis bibendum ipsum et porta. Nam auctor ac metus ut ultrices. Praesent tincidunt neque vel mi luctus, at malesuada massa fringilla. Duis at luctus ex. Pellentesque dignissim posuere vestibulum.</p></div></div><!--

FOOTER --><div class="c_footer"><p>Ici les informations habituelles : pseudo, age, dispo, pourquoi un corbeau ressemble à un bureau etc..</p></div><!--


--><a href="http://ls-halloween.fr/" target="_blank" id="hallow_credits">Halloween</a></div>

<link href="https://fonts.googleapis.com/css?family=Montserrat|Stoke&display=swap" rel="stylesheet"><div class="sherlyvalid01_background"><div class="sherlyvalid01_titre">Validation</div><div class="sherlyvalid01_background2"><div class="sherlyvalid01_texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia libero rutrum maximus vestibulum. Suspendisse et lacus ac mi sodales blandit nec ut arcu. Vivamus ac posuere enim. Duis vestibulum pretium consequat. Quisque nunc felis, posuere non tortor vel, rhoncus tempus nulla. Fusce accumsan fermentum leo sed tristique. Pellentesque vel iaculis sem. Duis interdum, nisl vel scelerisque porta, ligula tellus dictum lacus, nec placerat eros tellus ullamcorper purus. Aliquam quis tellus nisi. Nam vel nibh ex. Nulla imperdiet risus lacus, ac porttitor nisl malesuada sit amet. Mauris malesuada sapien sit amet dignissim tincidunt. Nulla facilisi. Pellentesque congue augue non ante feugiat, at rhoncus mauris vulputate.</div></div><div class="sherlyvalid01_triangle"></div><div class="sherlyvalid01_avatar"><img src="https://via.placeholder.com/100"></div></div><div class="sherlyvalid01_credit">:copyright: Sherlock (<a target="_blank" href="http://www.epicode-entraide.com/">www.</a>)</div>

<style>.sherlyvalid01_titre{font:30px Stoke,cursive;color:#ddd;margin:0 0 0 80px;letter-spacing:10px;}.sherlyvalid01_titre:before{content:"";width:300px;height:1px;background:#b6cede;position:absolute;margin:35px 0 0 0;}.sherlyvalid01_background{background-color:#222;width:380px;height:255px;margin:0 auto;}.sherlyvalid01_background2{background-color:#333;width:280px;height:180px;margin-top:20px;}.sherlyvalid01_triangle{position:relative;height:0;width:0;border-left:50px solid transparent;border-bottom:50px solid rgba(11,108,176,.8);transform:rotate(-45deg);float:right;margin:-120px 75px 0 0;}.sherlyvalid01_avatar img{position:relative;float:right;margin:-150px -50px 0 0;width:100px;height:100px;border-radius:50%;border:1px rgba(11,108,176,.8) solid;padding:2px;}.sherlyvalid01_texte{font: 12px Montserrat;color: #fff;padding: 20px;height: 160px; overflow: auto;margin-left: 5px;text-align:justify;}.sherlyvalid01_texte::-webkit-scrollbar{display:none;}.sherlyvalid01_credit{font: 12px 'Montserrat', sans-serif;text-align:center;}</style>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&family=Rubik:wght@700&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/95e3248573.js" crossorigin="anonymous"></script> <style> .rs-appolinaire-cont{ margin:auto; margin-top:20px; width:460px; height:460px; background: #e8d9cf; padding:20px; } .rs-appolinaire-cont2{ width:400px; height:400px; padding:15px; margin:auto; margin-top:15px; border:1px solid #fff; } .rs-appolinaire-moodboard-cont{ width:130px; height:130px; background-color:rgba(255,255,255,0.3); border:1px solid #fff; padding:3px; } .rs-appolinaire-moodboard-cont img{ margin:1px; } .rs-appolinaire-sommaire{ width:120px; height:auto; margin-top:5px; padding:10px; padding-top:10px; } .rs-appolinaire-sommaire a{ text-decoration:none;} .rs-appolinaire-sommaire-titre{ height:25px; text-align:left; font-family: Montserrat; font-size:12px; color:#fff; width:120px; font-weight:400; letter-spacing:1; font-size:10px;font-weight:600;; text-transform: uppercase; } .rs-appolinaire-sommaire-sep{ height:1px; background-color:#fff; width:120px; margin-bottom:15px; } #rs-appolinaire-sommaire-icon{ color:#fff; width:16px; margin-top:-2px; } .rs-appolinaire-cont3{ width:233px; margin-left:10px; height:380px; position:relative; overflow-y:auto; overflow-x:hidden; text-align:auto; color:#fff; font-size:11px; line-height:14px; font-family: Montserrat; font-weight:300; text-align:justify; padding-right:7px; scroll-behavior: smooth; } .rs-appolinaire-cont3 a{ text-decoration:none; opacity:0.7; transition-duration: 0.8s; color:#fff; } .rs-appolinaire-cont3 a:hover{ text-decoration:underline; opacity:1; text-transform: uppercase; font-size:10px; } .rs-appolinaire-cont3::-webkit-scrollbar { width: 1px; } .rs-appolinaire-cont3::-webkit-scrollbar-track { background:none; margin-top:10px; margin-bottom:10px; } .rs-appolinaire-cont3::-webkit-scrollbar-thumb { background: #fff; } .rs-appolinaire-cont3::-webkit-scrollbar-thumb:hover { background: none; } .appolinaire-rs-fl-cont{ width:39px; height:39px; padding:3px; margin-top:5px; float:left; margin-right:9px; margin-bottom:3px; border:1px solid #fff; text-align:center; } .appolinaire-rs-fl{ margin-top:0px; font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; margin-top:1px; margin-left:1px; font-size:37px; line-height:39px; color:#fff; height:37px; width:37px; } .appolinaire-titre-cont{ width:213px; height:28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-bottom:7px; background-color: rgba(255, 255, 255, 0.3); border:1px solid #deccbf; padding:3px 10px 0px 10px; } .appolinaire-titre{ color:#fff; text-shadow:0px 1px 2px #deccbf,1px 0px 2px #deccbf,-1px 0px 2px #deccbf,0px -1px 2px #deccbf; font-weight: 700; font-size:20px ; font-family: 'Rubik', sans-serif; text-transform:uppercase; margin-top:5px; } #appolinaire-titre-icon{ width:32px; margin-top:-40px!important; position:relative; } #appolinaire-infobbl{ font-size:9px; text-transform:uppercase; background-color:rgba(255, 255, 255, 0.7); display:none; color: #dec6bf; position:absolute; border:1px solid #dec6bf; margin-top:-7px; margin-left:2px; margin-right:-10px; font-family: Montserrat; padding:3px; z-index:4; float:left; } #appolinaire-discord:hover ~ #appolinaire-infobbl{ display:block; position:absolute; } .appolinaire-credit{ margin:auto; text-align:center; font-size:8px; margin-top:10px; font-family: 'Open Sans', sans-serif; color:#aaa; text-align:center; text-transform:uppercase; margin-bottom:20px; } .appolinaire-credit a{ font-size:8px; font-family: 'Open Sans', sans-serif; color:#aaa; text-decoration: none; } https://i.imgur.com/jFVZdrz.png </style> <div class="rs-appolinaire-cont"> <div class="rs-appolinaire-cont2"> <table> <tr> <td><div class="rs-appolinaire-sidebar"> <div class="rs-appolinaire-prenom"></div><div class="rs-appolinaire-moodboard-cont"> <table> <tr> <td><img src="http://via.placeholder.com/58" width="58px"> </td> <td><img src="http://via.placeholder.com/58" width="58px"> </td> </tr> <tr> <td><img src="http://via.placeholder.com/58" width="58px"> </td> <td><img src="http://via.placeholder.com/58" width="58px"> </td> </tr></table></div> <div class="rs-appolinaire-sommaire"> <a href="#introduction"><div class="rs-appolinaire-sommaire-titre" style="text-align:left;"> Introduction. <img src="https://i.imgur.com/bjkjJQp.png" id="rs-appolinaire-sommaire-icon" style="float:right;"> </div></a> <div class="rs-appolinaire-sommaire-sep"> </div> <a href="#recherches"> <div class="rs-appolinaire-sommaire-titre" style="text-align:right;"> <img src="https://i.imgur.com/6BkyUQP.png" id="rs-appolinaire-sommaire-icon" style="float:left;"> recherches. </div></a> <div class="rs-appolinaire-sommaire-sep"> </div> <a href="#chronologie"><div class="rs-appolinaire-sommaire-titre" style="text-align:left;"> chronologie. <img src="https://i.imgur.com/uKDxgZc.png" id="rs-appolinaire-sommaire-icon" style="float:right;"> </div></a> <div class="rs-appolinaire-sommaire-sep"> </div> <a href="#etcetera"><div class="rs-appolinaire-sommaire-titre" style="text-align:right;"><img src="https://i.imgur.com/CAEPhUK.png" id="rs-appolinaire-sommaire-icon" style="float:left;">etcétéra.</div></a> <div class="rs-appolinaire-sommaire-sep"> </div> <a target="_blank" rel="noopener noreferrer" href="URL DE VOTRE PRÉSENTATION"><div class="rs-appolinaire-sommaire-titre" style="text-align:left;"> Présentation. <img src="https://i.imgur.com/SYvJr02.png" id="rs-appolinaire-sommaire-icon" style="float:right;"> </div></a><div class="rs-appolinaire-sommaire-sep"> </div> <div id="appolinaire-discord" class="rs-appolinaire-sommaire-titre" style="text-align:right;"><img src="https://i.imgur.com/raLc4Q2.png" id="rs-appolinaire-sommaire-icon" style="float:left;">discord. </div><div id="appolinaire-infobbl">Votre pseudo Discord</div> </div> </div> </td> <td style="vertical-align: top;"> <div class="rs-appolinaire-cont3"> <div id="introduction"><br><div class="appolinaire-titre-cont"><div class="appolinaire-titre" style="text-align:right;">Introduction.</div></div><img src="https://i.imgur.com/bjkjJQp.png" id="appolinaire-titre-icon" style="float:left;"></div> <div class="appolinaire-rs-fl-cont"> <div class="appolinaire-rs-fl">L</div> </div>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. <br><br><div class="appolinaire-rs-fl-cont" style="float:right;margin-left:9px;margin-bottom:3px;"> <div class="appolinaire-rs-fl">A</div></div>enean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. <br> <div id="recherches"><br><div class="appolinaire-titre-cont"><div class="appolinaire-titre" style="text-align:left;">Recherches.</div></div><img src="https://i.imgur.com/6BkyUQP.png" id="appolinaire-titre-icon" style="float:right;"></div> <div class="appolinaire-rs-fl-cont"> <div class="appolinaire-rs-fl">N</div> </div>am eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.<br><br><div class="appolinaire-rs-fl-cont" style="float:right;margin-left:9px;margin-bottom:3px;"> <div class="appolinaire-rs-fl">D</div></div>onec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. <div id="chronologie"><br><div class="appolinaire-titre-cont"><div class="appolinaire-titre" style="text-align:right;">Chronologie.</div></div><img src="https://i.imgur.com/uKDxgZc.png" id="appolinaire-titre-icon" style="float:left;"></div> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /><br> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /><br> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /><br> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br /> × <i>titre</i> — ft. <b>Prénom Nom</b> — <a>www</a><br> <div id="etcetera"><br><div class="appolinaire-titre-cont"><div class="appolinaire-titre" style="text-align:left;">Etcétéra.</div></div><img src="https://i.imgur.com/CAEPhUK.png" id="appolinaire-titre-icon" style="float:right;"></div> <div class="appolinaire-rs-fl-cont"> <div class="appolinaire-rs-fl">L</div> </div>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.<br><br></div></td></tr></table></div></div><div class="appolinaire-credit"><a href="http://www.epicode-entraide.com/u8368">KAERU</a> – EPICODE</div>

<style>.containerfiche_epicode {width: 500px; box-sizing: border-box; position: relative; background-color: #ffffff; border-top: 10px solid #a3d39c; padding: 190px 4px 20px 10px; text-align: center; margin: auto; color: #5f6061; font-family: 'Times New Roman';} .en_tete_block{position: absolute; top: 0; left: 0; width:500px; height:180px;} .en_tete_block div{position:absolute; top: 0;width:500px; height: 180px; background-color: rgba(170, 192, 214, 0.8); opacity:0; visibility: hidden; transition: 1s;} .pseudonyme_block_ct {display: block; position: absolute; top: 60px; left: 80px; width: 200px; height: 80px; color: #ffffff; border: 1px solid white; padding-top: 5px; text-transform: uppercase; font-size: 30px;} .quote_fiche {display: block; font-size: 13px; margin-top: -2px; text-transform: none; line-height: 12px;} .en_tete_block:hover div {opacity: 1; visibility: visible; width: 250px; background-color: rgba(170, 192, 214, 0.8);} .containerfiche_epicode ul {padding: 0; margin: 0; margin-bottom: 5px; display: flex; list-style-type: none;} .containerfiche_epicode li {width: 90px; height: 18px; padding-top: 2px; border: 1px solid #aac0d6; margin-right: 5px; margin-bottom: 5px; text-transform: uppercase; font-size: 11px;} .infos_chara , .infos_chara2 { width: 230px; display: inline-block; margin-right: 13px;} .infos_chara span , .infos_chara2 span {display: inline-block; width: 217px; height: 15px; background-color: #aac0d6; margin-bottom: 5px; padding: 7px 10px; text-transform: uppercase; font-size: 12px; color: white;} .infos_chara span {text-align: left;} .infos_chara2 span {text-align: right; margin-right: none;} .title_p {position: relative; width: 450px; height: 11px; border-bottom: 1px solid #a8a8a8; margin: auto; text-align: center; margin-top: -5px;} .title_p div {width: 160px; height: 25px; position: absolute; top: 0; left: 140px; background-color: white; font-size: 20px; text-transform: uppercase;} .content_infos_txt {margin-right: 13px; width: 460px; text-align: justify; font-size: 12px; margin-top: 20px; border: 1px solid #aac0d6; padding: 10px;} .copyright_epicode_a {position: absolute; bottom: 0; right: 0; font-family: 'Arial'; font-size: 11px; text-transform: lowercase; color: #adadad;}</style>

<div class="containerfiche_epicode"><div class="en_tete_block"><img src="https://zupimages.net/up/18/02/dksp.png"/><div><span class="pseudonyme_block_ct">Pseudo</br><span class="quote_fiche">Citation</span></span></div></div><ul><li>Qualité</li><li>Qualité</li><li>Qualité</li><li>Qualité</li><li>Qualité</li></ul><ul><li>Défaut</li><li>Défaut</li><li>Défaut</li><li>Défaut</li><li>Défaut</li></ul><div class="infos_chara"><span>Âge</span><span>Origine</span><span>Métier</span></div><div class="infos_chara2"><span>Groupe</span><span>Situation Maritale</span><span>Orientation sexuelle</span></div>
 <div class="title_p"><div>Histoire</div></div><div class="content_infos_txt">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
 <div class="title_p"><div>Informations</div></div><div class="content_infos_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
  <span class="copyright_epicode_a">Batty & Artemis | <a href="http://epicode.variousforum.com/">www</a></div>

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet"> <div class="moon-base"> <div class="goth-mun" style="background-image:url(https://i.imgur.com/GM6VXDP.png);"></div> <div class="border-star"></div> <div class="border-star b-s-2"></div> <div class="border-star b-s-3"></div> <div class="mun-tit"><span class="mun-sangria"></span>+ Moon of candy.</div> <div class="mun-iceberg"> <div class="mun-ice-text">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>.moon-base {position: relative; width: 350px; height: 600px; background: linear-gradient(#eee, #F9D5D3); margin: 20px auto; padding-top: 1px; overflow: hidden; font-family: 'Play', sans-serif;} .goth-mun {height: 100px; width: 100px; background-size: cover; margin: 70px auto;} .border-star {height: 350px; width: 350px; transform: rotate(45deg); outline: 3px solid #fff; position: absolute; top: -180px; left: 0px;} .b-s-2 {top: 30px; outline: 3px solid #fff; height: 220px; width: 220px; left: 50%; margin-left: -110px;} .b-s-3 {top: 225px; left: 50%; outline: 3px solid #fff; height: 90px; width: 90px; margin-left: -45px;} .mun-iceberg {background: rgba(255,255,255,0.3); height: 500px; width: 500px; transform: rotate(45deg); position: absolute; top: 300px; right: -150px;} .mun-ice-text {height: 200px; width: 200px; transform: rotate(-45deg); position: absolute; top: 115px; left: 75px; padding-right: 10px; font-size: 10px; overflow: auto; color: #888; text-align: justify; line-height: 140%;} .mun-ice-text::-webkit-scrollbar { width: 4px; } .mun-ice-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .mun-ice-text::-webkit-scrollbar-thumb { background: #ECA4A6;} .mun-tit {font-family: Montserrat; font-weight: 800; font-size: 50px; position: absolute; right: 20px; background: ; height: 100px; width: 250px; z-index: 1; line-height: 100%; color: #ECA4A6; text-transform: lowercase; top: 265px; font-style: italic;} .mun-sangria {margin: 20px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet"> <div class="moon-base-o"> <div class="goth-mun-o" style="background-image:url(https://i.imgur.com/NbEulI3.png);"></div> <div class="border-star-o"></div> <div class="border-star-o b-s-2-o"></div> <div class="border-star-o b-s-3-o"></div> <div class="mun-tit-o"><span class="mun-sangria"></span>+ Moon of blood.</div> <div class="mun-iceberg-o"> <div class="mun-ice-text-o">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>.moon-base-o {position: relative; width: 350px; height: 600px; background: linear-gradient(#111, #501622); margin: 20px auto; padding-top: 1px; overflow: hidden; font-family: 'Play', sans-serif;} .goth-mun-o {height: 100px; width: 100px; background-size: cover; margin: 70px auto;} .border-star-o {height: 350px; width: 350px; transform: rotate(45deg); outline: 3px solid #000; position: absolute; top: -180px; left: 0px;} .b-s-2-o {top: 30px; outline: 3px solid #000; height: 220px; width: 220px; left: 50%; margin-left: -110px;} .b-s-3-o {top: 225px; left: 50%; outline: 3px solid #000; height: 90px; width: 90px; margin-left: -45px;} .mun-iceberg-o {background: rgba(0,0,0,0.3); height: 500px; width: 500px; transform: rotate(45deg); position: absolute; top: 300px; right: -150px;} .mun-ice-text-o {height: 200px; width: 200px; transform: rotate(-45deg); position: absolute; top: 115px; left: 75px; padding-right: 10px; font-size: 10px; overflow: auto; color: #bbb; text-align: justify; line-height: 140%;} .mun-ice-text-o::-webkit-scrollbar { width: 4px; } .mun-ice-text-o::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .mun-ice-text-o::-webkit-scrollbar-thumb { background: #501622;} .mun-tit-o {font-family: Montserrat; font-weight: 800; font-size: 50px; position: absolute; right: 20px; background: ; height: 100px; width: 250px; z-index: 1; line-height: 100%; color: #501622; text-transform: lowercase; top: 265px; font-style: italic;} .mun-sangria {margin: 20px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="fichi-chini"> <div class="negrito-chinito"> <div class="chinimagen" style="background-image:url(https://i.imgur.com/a6jMbFX.png);"></div> </div> <div class="chini-titlehere">Título Aquí</div> <div class="chiniorners-base"> <div class="chino-mero-mole"> <span class="subti">Historia.</span> Texto
 
<span class="subti">Personalidad.</span> Texto.</div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>.fichi-chini {background: #eee; height: 300px; width: 600px; margin: 50px auto; position: relative; font-family: 'Playfair Display', serif;} .chinimagen {height: 280px; width: 200px; background-size: cover; filter: grayscale(100%); margin: 9px 10px;} .negrito-chinito {background: #222; height: 299px; padding-top: 1px; width: 320px; float: left;} .chiniorners-base {background: #ddd; height: 240px; width: 430px;float: left; position: absolute; top: 43px; left: 153px; border: 1px solid #ccc;} .chino-mero-mole {margin: 20px; background: ; height: 200px; text-align: justify; font-size: 9.5px; column-count: 2; column-gap: 15px; column-rule: 1px solid #ddd; overflow: auto; padding-bottom: 5px; line-height: 130%; color: #111;} .chino-mero-mole::-webkit-scrollbar {height: 4px;} .chino-mero-mole::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .chino-mero-mole::-webkit-scrollbar-thumb { background: #222;} .subti {background: #bbb; padding: 0 3px; font-style: italic; font-weight: 700;} .chini-titlehere {font-size: 20px; font-style: italic; text-transform: lowercase; height: 43px; width: 265px; position: absolute; right: 15px; display: flex; align-items: center; justify-content: flex-end; color: #333;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="c-postrol"> <div class="c-imguno" style="background-image:url(https://i.imgur.com/2SVEenD.png);"></div> <div class="c-imgdos" style="background-image:url(https://i.imgur.com/6HSXhUT.png);"></div> <div class="c-alphabet">Xanny</div> <div class="whatis">What is it about them? I must be missing something.</div> <div class="to-intox">They just keep doing nothing, too intoxicated to be scared.</div> <div class="c-rolensi"> <div class="c-roltitu">Please don't kiss me on the sidewalk</div> <div class="c-subti">I can't afford to love someone who isn't dying by mistake...</div> Lorem ipsum dolor sit amet consectetur adipiscing elit risus eu hac, nec duis congue primis ante rutrum natoque enim nisl, leo fringilla sapien purus orci imperdiet eget auctor egestas. Ultrices morbi feugiat vel sociis euismod natoque hac taciti, at donec et ornare cras phasellus porttitor quis, sagittis malesuada vestibulum fames class ullamcorper placerat. Fringilla ullamcorper platea bibendum ut tristique nascetur curabitur risus, nisl penatibus libero dui duis vel lacus maecenas primis, cursus tincidunt neque tempor nulla luctus ornare. Libero netus pulvinar hac varius pretium mattis odio torquent vehicula, montes dictum at diam velit ornare mollis posuere, aptent scelerisque ac bibendum potenti congue purus duis. <br><br> Curabitur pulvinar a risus ultrices molestie, orci varius eleifend hac magna natoque, at habitant accumsan ac. Pulvinar at eleifend vulputate mi velit enim venenatis vehicula himenaeos, inceptos ultrices penatibus pellentesque arcu lacus a dapibus, rutrum nullam mattis pretium fames dignissim per lacinia. Eu quam dui viverra sem venenatis netus gravida lectus pharetra, mauris sociosqu porta aenean nunc vestibulum placerat metus, mollis lacus curae magna praesent enim himenaeos libero. Magnis eros semper rhoncus condimentum aenean lobortis quisque primis nullam conubia orci, molestie pellentesque suscipit maecenas ultricies purus eleifend donec habitasse posuere.</div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.c-postrol {background: #eee; height: auto; width: 300px; margin: 50px auto; position: relative; font-family: 'Playfair Display', serif; padding-bottom: 50px; border-bottom: 10px solid #333;} .c-imguno {height: 150px; width: 150px; background: #ccc; position: absolute; left: 40px; top:40px; background-size: cover; filter: grayscale(100%); outline: 1px solid #fff; outline-offset: 10px;} .c-imgdos {height: 150px; width: 150px; background: #ccc; position: absolute; left: 110px; top:110px; background-size: cover; filter: grayscale(100%); outline: 1px solid #fff; outline-offset: 10px;} .c-alphabet {font-size: 40px; position: absolute; color: #222; font-weight: 700; width: 300px; height: 130px; line-height: 100%; display: flex; justify-content: center; align-items: center; top: 75px; text-transform: uppercase; letter-spacing: 5px; font-style: italic;} .whatis {font-size:7px; background: ; width: 70px; top: 30px; left: 210px; position: absolute; font-style: italic; line-height: 120%; text-align: left; color: #999; background: ; height: 61px; display: flex; align-items: flex-end;} .to-intox {font-size:7px; background: ; width: 70px; top: 210px; left: 20px; position: absolute; font-style: italic; line-height: 120%; text-align: right; color: #999; height: 61px;} .c-rolensi {width: 260px; height: auto; padding: 300px 20px 0 20px; color: #555; font-size: 10px; text-align: justify; line-height: 140%;} .c-roltitu {color: #222; font-size: 11px; font-weight: 700;} .c-subti {color: #888; font-size: 9px; font-style: italic; padding-bottom: 10px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} </style>

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="c-postrol2"> <div class="c-imguno2" style="background-image:url(https://i.imgur.com/2SVEenD.png);"></div> <div class="c-imgdos2" style="background-image:url(https://i.imgur.com/6HSXhUT.png);"></div> <div class="c-alphabet2">Xanny</div> <div class="whatis2">What is it about them? I must be missing something.</div> <div class="to-intox2">They just keep doing nothing, too intoxicated to be scared.</div> <div class="c-rolensi2"> <div class="c-roltitu2">Please don't kiss me on the sidewalk</div> <div class="c-subti2">I can't afford to love someone who isn't dying by mistake...</div> Lorem ipsum dolor sit amet consectetur adipiscing elit risus eu hac, nec duis congue primis ante rutrum natoque enim nisl, leo fringilla sapien purus orci imperdiet eget auctor egestas. Ultrices morbi feugiat vel sociis euismod natoque hac taciti, at donec et ornare cras phasellus porttitor quis, sagittis malesuada vestibulum fames class ullamcorper placerat. Fringilla ullamcorper platea bibendum ut tristique nascetur curabitur risus, nisl penatibus libero dui duis vel lacus maecenas primis, cursus tincidunt neque tempor nulla luctus ornare. Libero netus pulvinar hac varius pretium mattis odio torquent vehicula, montes dictum at diam velit ornare mollis posuere, aptent scelerisque ac bibendum potenti congue purus duis. <br><br> Curabitur pulvinar a risus ultrices molestie, orci varius eleifend hac magna natoque, at habitant accumsan ac. Pulvinar at eleifend vulputate mi velit enim venenatis vehicula himenaeos, inceptos ultrices penatibus pellentesque arcu lacus a dapibus, rutrum nullam mattis pretium fames dignissim per lacinia. Eu quam dui viverra sem venenatis netus gravida lectus pharetra, mauris sociosqu porta aenean nunc vestibulum placerat metus, mollis lacus curae magna praesent enim himenaeos libero. Magnis eros semper rhoncus condimentum aenean lobortis quisque primis nullam conubia orci, molestie pellentesque suscipit maecenas ultricies purus eleifend donec habitasse posuere.</div> </div> <center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center><link rel="preconnect" href="https://fonts.gstatic.com">

<style>.c-postrol2 {background: #333; height: auto; width: 300px; margin: 50px auto; position: relative; font-family: 'Playfair Display', serif; padding-bottom: 50px; border-bottom: 10px solid #ccc;} .c-imguno2 {height: 150px; width: 150px; background: #ccc; position: absolute; left: 40px; top:40px; background-size: cover; filter: grayscale(100%); outline: 1px solid #000; outline-offset: 10px;} .c-imgdos2 {height: 150px; width: 150px; background: #ccc; position: absolute; left: 110px; top:110px; background-size: cover; filter: grayscale(100%); outline: 1px solid #000; outline-offset: 10px;} .c-alphabet2 {font-size: 40px; position: absolute; color: #222; font-weight: 700; width: 300px; height: 130px; line-height: 100%; display: flex; justify-content: center; align-items: center; top: 75px; text-transform: uppercase; letter-spacing: 5px; font-style: italic;} .whatis2 {font-size:7px; background: ; width: 70px; top: 30px; left: 210px; position: absolute; font-style: italic; line-height: 120%; text-align: left; color: #aaa; background: ; height: 61px; display: flex; align-items: flex-end;} .to-intox2 {font-size:7px; background: ; width: 70px; top: 210px; left: 20px; position: absolute; font-style: italic; line-height: 120%; text-align: right; color: #aaa; height: 61px;} .c-rolensi2 {width: 260px; height: auto; padding: 300px 20px 0 20px; color: #aaa; font-size: 10px; text-align: justify; line-height: 140%;} .c-roltitu2 {color: #ccc; font-size: 11px; font-weight: 700;} .c-subti2 {color: #666; font-size: 9px; font-style: italic; padding-bottom: 10px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class='magicwater waves'> <div class="wamagen"></div> <div class="water" style="opacity: 1;"></div> <div class="water"></div> <div class="water"></div> <div class="wame">Daphne Lilliane Norton Valcarce</div> <div class="hovo"> <div class="atention"> <div class="dot"></div> </div> <div class="datahovo"> Raza: Lillie. Edad: 19 años. Ocupación: Tal. Nacionalidad: Tal. Orientación Sexual: Homosexual. </div> </div> <div class="notaenelmar"> <div class="martulo"> <span class="labema">i.</span> Personalidad</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">ii.</span> Historia</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">iii.</span> Habilidades y debilidades</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">iv.</span> Extras</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>@keyframes wave { 0%   { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .magicwater { font-family: Playfair Display; width: 300px; height: 640px; margin: 50px auto; background: #eee; overflow: hidden; position: relative; border-radius: 5px; border-bottom: 10px solid #3B77AF;} .wamagen { position: absolute; background-image: url(https://cdn.discordapp.com/attachments/727940152550490224/772999088819798066/Griffith.png); background-size: cover; z-index: 1; opacity: 0.6; height: 300px; width: 300px; } .wamagen:after { height: 100px; content: ''; top: 200px; position: absolute; width: 100%; z-index: 1; background: linear-gradient(rgba(59, 119, 175, 0), #3B77AF); } .water { position: absolute; height: 720px; width: 750px; opacity: 0.6; left: 0; top: 0; margin-left: -70%; margin-top: -130%; background: radial-gradient(#3B77AF, #3B77AF); } .water:nth-child(2), .water:nth-child(3) { top: 20px; } .waves .water { border-radius: 40%; animation: wave 3000ms infinite linear; } .water { border-radius: 40%; animation: wave 55s infinite linear; } .waves .water:nth-child(2) { animation-duration: 4000ms; } .waves:nth-child(2) { animation-duration: 50s; } .waves .water:nth-child(3) { animation-duration: 5000ms; } .water:nth-child(3) { animation-duration: 45s; } .magicwater .wame {position: absolute; z-index: 2; color: #eee; font-size: 12px; font-style: italic; border-left: 5px solid #eee; padding: 5px 0px 5px 10px; line-height: 100%; top: 270px;} .magicwater .atention {height: 16px; width: 16px; overflow: hidden; border-radius: 100%; border: 2px solid #eee; animation: attention 3s infinite; position: absolute;} .magicwater .atention .dot {background: #eee; height: 10px; width: 10px; border-radius: 100%; position: absolute; top: 3px; left: 3px;} @keyframes attention { 0% {opacity: 0.7;} 50% {opacity: 0;} 100% {opacity: 0.7;} } .hovo {height: 30px; width: 20px; position: absolute; z-index: 2; top: 10px; left: 10px; cursor: crosshair;} .datahovo {height: 210px; width: 250px; position: absolute; top: 30px; transition: all 1s ease-in-out; opacity:0; font-size: 11px; font-style: italic; color: #fff; overflow: auto; text-align: left; line-height: 140%;} .hovo:hover .datahovo {transition: all 1s ease-in-out; opacity: 1;} .notaenelmar {width: 270px; height: 215px; margin: 410px 15px 15px 15px; font-size: 11px; color: #666; line-height: 140%; text-align: left; overflow: auto; padding-right: 5px;} .labema {color: #58B1BA; text-transform: lowercase!important;} .martulo {font-style: italic; font-size: 15px; color: #999; text-transform: Capitalize; margin: 10px 0;} .notaenelmar::-webkit-scrollbar { width: 2px; } .notaenelmar::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .notaenelmar::-webkit-scrollbar-thumb { background: #3B77AF;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="firentire"> <div class="fire"> <div class="first"> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> <div class="yellow"></div> </div> <div class="second"> <div class="orange"></div> <div class="orange"></div> <div class="orange"></div> <div class="orange"></div> <div class="orange"></div> </div> <div class="third"> <div class="tangerine"></div> <div class="tangerine"></div> <div class="tangerine"></div> <div class="tangerine"></div> <div class="tangerine"></div> <div class="tangerine"></div> <div class="tangerine"></div> </div> <div class="forth"> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> </div> <div class="rebaje"></div> </div> <div class='magicfire'> <div class="fimagen"> <div class="filtro"></div> </div> <div class="wame">Daphne Lilliane Norton Valcarce</div> <div class="hovo"> <div class="atention"> <div class="dot"></div> </div> <div class="datahovo"> Raza: Lillie. Edad: 19 años. Ocupación: Tal. Nacionalidad: Tal. Orientación Sexual: Homosexual. </div> </div> <div class="notaenelmar"> <div class="martulo"> <span class="labema">i.</span> Personalidad</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">ii.</span> Historia</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">iii.</span> Habilidades y debilidades</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. <div class="martulo"> <span class="labema">iv.</span> Extras</div> Lorem ipsum dolor sit amet consectetur adipiscing elit penatibus dictumst nullam ut, scelerisque hendrerit tempus senectus natoque ullamcorper dis cras pulvinar. Penatibus turpis non sem odio vehicula litora dictum egestas, in cum congue purus semper quisque dis nostra, nam montes condimentum rhoncus faucibus lobortis massa. Nibh porta primis congue id mattis interdum, feugiat magna vel donec et parturient, urna hendrerit sed pretium. </div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.firentire {position: relative; margin: 30px auto; height: 820px; width: 300px;} .magicfire { font-family: Playfair Display; width: 300px; height: 540px; background: #eee; position: relative; overflow: hidden; border-radius: 5px; border-bottom: 10px solid #D5544B;} .filtro {height: 300px; width: 300px; position: absolute; top:0; left: 0; background: linear-gradient(rgba(253, 227, 123, 0.3),rgba(253, 227, 123, 0));} .fimagen { position: absolute; background-image: url(https://static.zerochan.net/Griffith.%28BERSERK%29.full.2175652.jpg); background-size: cover; z-index: 5; opacity: 0.6; height: 300px; width: 300px; } .fimagen:after { height: 100px; content: ''; top: 0px; position: absolute; width: 100%; z-index: 5; background: linear-gradient(rgba(253, 227, 123, 1),rgba(253, 227, 123, 0)); } .magicfire .wame {position: absolute; z-index: 6; color: #333; font-size: 12px; font-style: italic; border-left: 5px solid #333; padding: 5px 0px 5px 10px; line-height: 100%; top: 10px;} .magicfire .atention {height: 16px; width: 16px; overflow: hidden; border-radius: 100%; border: 2px solid #333; animation: attention 3s infinite; position: absolute;} .magicfire .atention .dot {background: #333; height: 10px; width: 10px; border-radius: 100%; position: absolute; top: 3px; left: 3px;} @keyframes attention { 0% {opacity: 0.9;} 50% {opacity: 0.1;} 100% {opacity: 0.9;} } .hovo {height: 30px; width: 20px; position: absolute; z-index: 6; top: 40px; left: 10px; cursor: crosshair;} .datahovo {line-height: 140%; height: 210px; width: 250px; position: absolute; top: 30px; transition: all 1s ease-in-out; opacity:0; font-size: 11px; font-style: italic; color: #000; overflow: auto; text-align: left;} .hovo:hover .datahovo {transition: all 1s ease-in-out; opacity: 1;} .notaenelmar {width: 270px; height: 215px; margin: 310px 15px 15px 15px; font-size: 11px; color: #666; line-height: 140%; text-align: left; overflow: auto; padding-right: 5px;} .labema {color: #F89D70; text-transform: lowercase!important;} .martulo {font-style: italic; font-size: 15px; color: #999; text-transform: Capitalize; margin: 10px 0;} .notaenelmar::-webkit-scrollbar { width: 2px; } .notaenelmar::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .notaenelmar::-webkit-scrollbar-thumb { background: #D5544B;} .fire {height: 275px; width: 300px; position: relative; 0px;} .firentire .fire .first {width: 300px; height: 160px; position: absolute; bottom: 0; z-index: 4;} .firentire .fire .yellow {height: 160px; width: 40px; background: rgba(255, 243, 219, 0.8); float: left; position: absolute; border-radius: 20px 20px 0 0; bottom: 0;} .firentire .fire .yellow:nth-child(1) {width: 30px; left: 20px; animation: yelfire1 3s infinite;} .firentire .fire .yellow:nth-child(2) {width: 30px; left: 45px; animation: yelfire2 4s infinite;} .firentire .fire .yellow:nth-child(3) {left: 90px; animation: yelfire3 3s infinite;} .firentire .fire .yellow:nth-child(4) {left: 130px; animation: yelfire4 3.5s infinite;} .firentire .fire .yellow:nth-child(5) {left: 170px; animation: yelfire5 3.5s infinite;} .firentire .fire .yellow:nth-child(6) {left: 210px; width: 30px; animation: yelfire6 3s infinite;} .firentire .fire .yellow:nth-child(7) {left: 235px; width: 30px; animation: yelfire7 3.5s infinite;} @keyframes yelfire1 { 0% {height: 45px;} 9% {height: 70px;} 18% {height: 50px;} 27% {height: 70px;} 36% {height: 55px;} 45% {height: 70px;} 54% {height: 50px;} 63% {height: 65px;} 72% {height: 50px;} 81% {height: 75px;} 90% {height: 70px;} 100% {height: 45px;} } @keyframes yelfire2 { 0% {height: 50px;} 9% {height: 90px;} 18% {height: 45px;} 27% {height: 90px;} 36% {height: 45px;} 45% {height: 90px;} 54% {height: 40px;} 63% {height: 65px;} 72% {height: 50px;} 81% {height: 95px;} 90% {height: 90px;} 100% {height: 50px;} } @keyframes yelfire3 { 0% {height: 60px;} 9% {height: 122px;} 18% {height: 65px;} 27% {height: 122px;} 36% {height: 65px;} 45% {height: 122px;} 54% {height: 60px;} 63% {height: 100px;} 72% {height: 60px;} 81% {height: 128px;} 90% {height: 110px;} 100% {height: 60px;} } @keyframes yelfire4 { 0% {height: 95px;} 9% {height: 160px;} 18% {height: 95px;} 27% {height: 160px;} 36% {height: 95px;} 45% {height: 160px;} 54% {height: 95px;} 63% {height: 120px;} 72% {height: 95px;} 81% {height: 165px;} 90% {height: 145px;} 100% {height: 95px;} } @keyframes yelfire5 { 0% {height: 60px;} 9% {height: 122px;} 18% {height: 65px;} 27% {height: 122px;} 36% {height: 65px;} 45% {height: 122px;} 54% {height: 60px;} 63% {height: 100px;} 72% {height: 60px;} 81% {height: 128px;} 90% {height: 110px;} 100% {height: 60px;} } @keyframes yelfire6 { 0% {height: 50px;} 9% {height: 90px;} 18% {height: 45px;} 27% {height: 90px;} 36% {height: 45px;} 45% {height: 90px;} 54% {height: 40px;} 63% {height: 65px;} 72% {height: 50px;} 81% {height: 95px;} 90% {height: 90px;} 100% {height: 50px;} } @keyframes yelfire7 { 0% {height: 45px;} 9% {height: 70px;} 18% {height: 50px;} 27% {height: 70px;} 36% {height: 55px;} 45% {height: 70px;} 54% {height: 50px;} 63% {height: 65px;} 72% {height: 50px;} 81% {height: 75px;} 90% {height: 70px;} 100% {height: 45px;} } .firentire .fire .second {width: 300px; height: 182px; position: absolute; bottom: 0; z-index: 3;} .firentire .fire .orange {height: 182px; width: 40px; background: rgba(253, 227, 123, 0.8); float: left; position: absolute; border-radius: 20px 20px 0 0; bottom: 0;} .firentire .fire .second .orange:nth-child(1) {left: 50px; animation: orfire1 3s infinite;} .firentire .fire .second .orange:nth-child(2) {left: 90px; animation: orfire2 3.1s infinite;} .firentire .fire .second .orange:nth-child(3) {left: 130px; animation: orfire3 3s infinite;} .firentire .fire .second .orange:nth-child(4) {left: 170px; animation: orfire4 2.8s infinite;} .firentire .fire .second .orange:nth-child(5) {left: 210px; animation: orfire5 2.9s infinite;} @keyframes orfire1 { 0% {height: 50px;} 9% {height: 100px;} 18% {height: 55px;} 27% {height: 100px;} 36% {height: 55px;} 45% {height: 100px;} 54% {height: 55px;} 63% {height: 75px;} 72% {height: 70px;} 81% {height: 105px;} 90% {height: 100px;} 100% {height: 50px;} } @keyframes orfire2 { 0% {height: 105px;} 9% {height: 140px;} 18% {height: 105px;} 27% {height: 140px;} 36% {height: 105px;} 45% {height: 140px;} 54% {height: 105px;} 63% {height: 115px;} 72% {height: 70px;} 81% {height: 145px;} 90% {height: 140px;} 100% {height: 105px;} } @keyframes orfire3 { 0% {height: 110px;} 9% {height: 178px;} 18% {height: 110px;} 27% {height: 178px;} 36% {height: 110px;} 45% {height: 178px;} 54% {height: 110px;} 63% {height: 155px;} 72% {height: 110px;} 81% {height: 182px;} 90% {height: 170px;} 100% {height: 110px;} } @keyframes orfire4 { 0% {height: 105px;} 9% {height: 140px;} 18% {height: 105px;} 27% {height: 140px;} 36% {height: 105px;} 45% {height: 140px;} 54% {height: 105px;} 63% {height: 115px;} 72% {height: 70px;} 81% {height: 145px;} 90% {height: 140px;} 100% {height: 105px;} } @keyframes orfire5 { 0% {height: 50px;} 9% {height: 100px;} 18% {height: 55px;} 27% {height: 100px;} 36% {height: 55px;} 45% {height: 100px;} 54% {height: 55px;} 63% {height: 75px;} 72% {height: 70px;} 81% {height: 105px;} 90% {height: 100px;} 100% {height: 50px;} } .firentire .fire .third {width: 300px; height: 225px; position: absolute; bottom: 0; z-index: 2;} .firentire .fire .tangerine {height: 225px; width: 40px; background: rgba(253, 152, 15, 0.8); float: left; position: absolute; border-radius: 20px 20px 0 0; bottom: 0;} .firentire .fire .third .tangerine:nth-child(1) {left: 10px; animation: tanfire1 3s infinite;} .firentire .fire .third .tangerine:nth-child(2) {left: 50px; animation: tanfire2 3s infinite;} .firentire .fire .third .tangerine:nth-child(3) {left: 90px; animation: tanfire3 2.9s infinite;} .firentire .fire .third .tangerine:nth-child(4) {left: 130px; animation: tanfire4 3s infinite;} .firentire .fire .third .tangerine:nth-child(5) {left: 170px; animation: tanfire5 3.2s infinite;} .firentire .fire .third .tangerine:nth-child(6) {left: 210px; animation: tanfire6 3.1s infinite;} .firentire .fire .third .tangerine:nth-child(7) {left: 250px; animation: tanfire7 3s infinite;} @keyframes tanfire1 { 0% {height: 70px;} 9% {height: 100px;} 18% {height: 75px;} 27% {height: 100px;} 36% {height: 75px;} 45% {height: 100px;} 54% {height: 75px;} 63% {height: 100px;} 72% {height: 75px;} 81% {height: 110px;} 90% {height: 100px;} 100% {height: 70px;} } @keyframes tanfire2 { 0% {height: 100px;} 9% {height: 150px;} 18% {height: 100px;} 27% {height: 150px;} 36% {height: 100px;} 45% {height: 150px;} 54% {height: 100px;} 63% {height: 120px;} 72% {height: 100px;} 81% {height: 150px;} 90% {height: 140px;} 100% {height: 100px;} } @keyframes tanfire3 { 0% {height: 125px;} 9% {height: 180px;} 18% {height: 125px;} 27% {height: 180px;} 36% {height: 125px;} 45% {height: 180px;} 54% {height: 125px;} 63% {height: 150px;} 72% {height: 125px;} 81% {height: 188px;} 90% {height: 180px;} 100% {height: 125px;} } @keyframes tanfire4 { 0% {height: 200px;} 9% {height: 220px;} 18% {height: 200px;} 27% {height: 220px;} 36% {height: 200px;} 45% {height: 220px;} 54% {height: 200px;} 63% {height: 210px;} 72% {height: 200px;} 81% {height: 225px;} 90% {height: 220px;} 100% {height: 200px;} } @keyframes tanfire5 { 0% {height: 125px;} 9% {height: 180px;} 18% {height: 125px;} 27% {height: 180px;} 36% {height: 125px;} 45% {height: 180px;} 54% {height: 125px;} 63% {height: 150px;} 72% {height: 125px;} 81% {height: 188px;} 90% {height: 180px;} 100% {height: 125px;} } @keyframes tanfire6 { 0% {height: 100px;} 9% {height: 150px;} 18% {height: 100px;} 27% {height: 150px;} 36% {height: 100px;} 45% {height: 150px;} 54% {height: 100px;} 63% {height: 120px;} 72% {height: 100px;} 81% {height: 150px;} 90% {height: 140px;} 100% {height: 100px;} } @keyframes tanfire7 { 0% {height: 70px;} 9% {height: 100px;} 18% {height: 75px;} 27% {height: 100px;} 36% {height: 75px;} 45% {height: 100px;} 54% {height: 75px;} 63% {height: 100px;} 72% {height: 75px;} 81% {height: 110px;} 90% {height: 100px;} 100% {height: 70px;} } .firentire .fire .forth {width: 300px; height: 275px; position: absolute; bottom: 0; z-index: 1;} .firentire .fire .red {height: 225px; width: 40px; background: rgba(206, 30, 4, 1); float: left; position: absolute; border-radius: 20px 20px 0 0; bottom: 0;} .firentire .fire .forth .red:nth-child(1) {left: 10px; animation: redfire1 4s infinite;} .firentire .fire .forth .red:nth-child(2) {left: 50px; animation: redfire2 4s infinite;} .firentire .fire .forth .red:nth-child(3) {left: 90px; animation: redfire3 4s infinite;} .firentire .fire .forth .red:nth-child(4) {left: 130px; animation: redfire4 4s infinite;} .firentire .fire .forth .red:nth-child(5) {left: 170px; animation: redfire5 3.9s infinite;} .firentire .fire .forth .red:nth-child(6) {left: 210px; animation: redfire6 4s infinite;} .firentire .fire .forth .red:nth-child(7) {left: 250px; animation: redfire7 4s infinite;} @keyframes redfire1 { 0% {height: 95px;} 9% {height: 125px;} 18% {height: 95px;} 27% {height: 125px;} 36% {height: 95px;} 45% {height: 125px;} 54% {height: 95px;} 63% {height: 125px;} 72% {height: 95px;} 81% {height: 130px;} 90% {height: 125px;} 100% {height: 95px;} } @keyframes redfire2 { 0% {height: 100px;} 9% {height: 175px;} 18% {height: 100px;} 27% {height: 175px;} 36% {height: 100px;} 45% {height: 175px;} 54% {height: 100px;} 63% {height: 150px;} 72% {height: 100px;} 81% {height: 180px;} 90% {height: 175px;} 100% {height: 100px;} } @keyframes redfire3 { 0% {height: 195px;} 9% {height: 220px;} 18% {height: 195px;} 27% {height: 220px;} 36% {height: 195px;} 45% {height: 220px;} 54% {height: 195px;} 63% {height: 210px;} 72% {height: 195px;} 81% {height: 225px;} 90% {height: 220px;} 100% {height: 195px;} } @keyframes redfire4 { 0% {height: 210px;} 9% {height: 270px;} 18% {height: 210px;} 27% {height: 270px;} 36% {height: 210px;} 45% {height: 270px;} 54% {height: 210px;} 63% {height: 250px;} 72% {height: 210px;} 81% {height: 275px;} 90% {height: 270px;} 100% {height: 210px;} } @keyframes redfire5 { 0% {height: 195px;} 9% {height: 250px;} 18% {height: 195px;} 27% {height: 250px;} 36% {height: 195px;} 45% {height: 250px;} 54% {height: 195px;} 63% {height: 230px;} 72% {height: 195px;} 81% {height: 260px;} 90% {height: 250px;} 100% {height: 195px;} } @keyframes redfire6 { 0% {height: 100px;} 9% {height: 175px;} 18% {height: 100px;} 27% {height: 175px;} 36% {height: 100px;} 45% {height: 175px;} 54% {height: 100px;} 63% {height: 150px;} 72% {height: 100px;} 81% {height: 180px;} 90% {height: 175px;} 100% {height: 100px;} } @keyframes redfire7 { 0% {height: 95px;} 9% {height: 125px;} 18% {height: 95px;} 27% {height: 125px;} 36% {height: 95px;} 45% {height: 125px;} 54% {height: 95px;} 63% {height: 125px;} 72% {height: 95px;} 81% {height: 130px;} 90% {height: 125px;} 100% {height: 95px;} } .rebaje {background: linear-gradient(rgba(253, 227, 123, 0.9),rgba(253, 227, 123, 0)); height: 10px; width: 300px; position: absolute; z-index: 6; bottom: -10px; border-radius: 10px 10px 0 0;}#cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<div class="altar"> <div class="foto" style="background-image:url(https://pbs.twimg.com/media/EH-v2UWU0AEukas?format=png);"> <div class="light"></div> </div> <div class="mesa"></div> <div class="delantal del1"></div> <div class="delantal del2"></div> <div class="delantal del3"></div> <div class="delantal del4"></div> <div class="delantal del5"></div> <div class="flawas"> <div class="letterto"> <div class="triangu2"> <div class="paper"> <div class="card"></div> </div> </div> <div class="triangu"> </div> </div> <div class="skull" style="background-image:url(https://i.imgur.com/gQ3c87q.png);"></div> <div class="flaw flaw1" style="background-image:url(https://i.imgur.com/DtBImmT.png);"></div> <div class="flaw flaw2" style="background-image:url(https://i.imgur.com/HkSrSk0.png);"></div> <div class="flaw flaw3" style="background-image:url(https://i.imgur.com/k2tPo6x.png);"></div> <div class="flaw flaw4" style="background-image:url(https://i.imgur.com/1ArK7yQ.png);"></div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.altar {height: 630px; width: 500px; margin: auto; position: relative;} .altar .foto {background: tomato; width: 330px; height: 400px; position: absolute; top: 25px; left: 50%; margin-left: -172px; background-size: cover; border: 7px solid #55453D; outline: 25px solid #7A6255; overflow: hidden; z-index: 1;} .altar .light {background: rgba(255,255,255,0.3); height: 330px; width: 330px; clip-path: polygon(0 75%, 0 100%, 100% 25%, 100% 0); animation: reflection 10s infinite; position: absolute;} @keyframes reflection { 0% {top: -400px;} 15% {top: 400px;} 100% {top: 400px;} } .altar .mesa {clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); height: 100px; width: 500px; background: #EA6D56; top: 425px; position: absolute;} .altar .delantal {width: 100px; height: 100px; background: #e76148; position: absolute; top: 525px; border-radius: 0 0 50px 50px;} .altar .del1 {left: 0;} .altar .del2 {left: 100px;} .altar .del3 {left: 200px;} .altar .del4 {left: 300px;} .altar .del5 {left: 400px;} .flawas {height: 170px; width: 500px; position: absolute; z-index: 2; top: 400px;} .skull {background-size: cover; position: absolute; height: 150px; width: 150px; left: 50%; margin-left: -75px; top: -35px;} .flaw {background-size: cover; position: absolute;} .flaw1 {height: 70px; width: 70px; top: 20px; left: 25px;} .flaw2 {height: 85px; width: 85px; top: 50px; left: 65px;} .flaw3 {height: 55px; width: 55px; top: 65px; left: 30px;} .flaw4 {height: 80px; width: 80px; top: 25px; left: 120px;} .letterto {background: #eee; height: 80px; width: 140px; position: absolute; right: 20px; top: 20px;} .letterto .triangu {background: #ddd; width: 140px; height: 50px; clip-path: polygon(0 0, 50% 100%, 100% 0); top: 0; position: absolute; transition: all 0.5s ease-in-out;} .letterto .triangu2 {background: #cfcfcf; width: 140px; height: 50px; clip-path: polygon(0 0, 50% 100%, 100% 0); top: 0; position: absolute; transition: all 0.5s ease-in-out;} .letterto:hover .triangu {clip-path: polygon(0 100%, 50% 0, 100% 100%); top: -50px; transition: all 0.5s ease-in-out;} .letterto .triangu2 .paper {background: #fff; height: 50px; width: 100px; margin-left: 20px; margin-top: 10px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="total-postitW"> <div class="nombroW">morem Ipsum</div> <div class="nombro2W">Lorem ipsum dolor sit amet</div> <div class="particiW">Nombre de uno y Nombre de dos</div> <div class="loremyaW">Lorem ipsum dolor sit amet consectetur adipiscing elit nam sed fringilla, praesent dictum augue eu massa sapien tempor curabitur quisque magna, facilisis cum ornare sagittis ullamcorper pellentesque suspendisse duis ultrices. Quis platea sociosqu viverra mollis aptent varius nunc nascetur nostra commodo eu suscipit, donec feugiat venenatis imperdiet orci neque massa duis metus ac. Congue praesent felis odio lectus conubia morbi torquent non, nec convallis mauris cum vehicula habitasse accumsan neque ridiculus, vivamus eleifend orci semper feugiat viverra integer. Pretium velit malesuada vitae porta laoreet dictumst dis, sagittis sodales nulla orci nisl. A aptent eu ultricies habitasse lacus nibh vivamus, bibendum phasellus porttitor ridiculus vitae taciti cras, magna mi hac inceptos etiam consequat. Inceptos mauris suspendisse dictumst cum pharetra primis augue ad, torquent tellus curae et nibh nunc ante, himenaeos ac ligula senectus quis sociis enim.</div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>@font-face {font-family:'Amoret Script';src:url(https://dl.dropbox.com/s/04jjsnpjyfokk7r/AmoretScript-Regular.ttf) format('truetype');} .total-postitW {height:auto; width: 450px; margin: auto; position: relative; padding-top: 1px; background: #eee; border: 20px solid #eee} .nombroW {color: #999; font-size: 100px; font-family: 'Amoret Script'; text-transform: lowercase; line-height: 100%; position: absolute; top: 0; width: 450px; height: 75px; display: flex; justify-content: center; align-items:center; z-index: 1;} .nombro2W {color: #000; font-size: 10px; font-family: Montserrat; text-transform: lowercase; line-height: 100%; position: absolute; top: 0; border-bottom:2px solid #ddd; width: 450px; height: 75px; display: flex; justify-content: center; align-items:center; letter-spacing: 5px;} .particiW {position: absolute; top: 85px; right: 0px; max-width: 445px; font-family: montserrat; text-transform: uppercase; text-align: right; font-size: 10px; line-height: 100%; height: 20px; display: flex; align-items: center; color: #555; background: #ddd; justify-content: flex-end; padding-right: 5px; padding-left: 5px;} .loremyaW {background: #e5e5e5; margin-top: 120px!important; padding: 20px; height: auto; color: #444; font-family: playfair Display; font-size: 12px; line-height: 150%;}#cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="total-postit"> <div class="nombro">morem Ipsum</div> <div class="nombro2">Lorem ipsum dolor sit amet</div> <div class="partici">Nombre de uno y Nombre de dos</div> <div class="loremya">Lorem ipsum dolor sit amet consectetur adipiscing elit nam sed fringilla, praesent dictum augue eu massa sapien tempor curabitur quisque magna, facilisis cum ornare sagittis ullamcorper pellentesque suspendisse duis ultrices. Quis platea sociosqu viverra mollis aptent varius nunc nascetur nostra commodo eu suscipit, donec feugiat venenatis imperdiet orci neque massa duis metus ac. Congue praesent felis odio lectus conubia morbi torquent non, nec convallis mauris cum vehicula habitasse accumsan neque ridiculus, vivamus eleifend orci semper feugiat viverra integer. Pretium velit malesuada vitae porta laoreet dictumst dis, sagittis sodales nulla orci nisl. A aptent eu ultricies habitasse lacus nibh vivamus, bibendum phasellus porttitor ridiculus vitae taciti cras, magna mi hac inceptos etiam consequat. Inceptos mauris suspendisse dictumst cum pharetra primis augue ad, torquent tellus curae et nibh nunc ante, himenaeos ac ligula senectus quis sociis enim.</div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>@font-face {font-family:'Amoret Script';src:url(https://dl.dropbox.com/s/04jjsnpjyfokk7r/AmoretScript-Regular.ttf) format('truetype');} .total-postit {height:auto; width: 450px; margin: auto; position: relative; padding-top: 1px; background: #000; border: 20px solid #000} .nombro {color: #999; font-size: 100px; font-family: 'Amoret Script'; text-transform: lowercase; line-height: 100%; position: absolute; top: 0; width: 450px; height: 75px; display: flex; justify-content: center; align-items:center; z-index: 1;} .nombro2 {color: #fff; font-size: 10px; font-family: Montserrat; text-transform: lowercase; line-height: 100%; position: absolute; top: 0; border-bottom:2px solid #050505; width: 450px; height: 75px; display: flex; justify-content: center; align-items:center; letter-spacing: 5px;} .partici {position: absolute; top: 85px; right: 0px; max-width: 445px; font-family: montserrat; text-transform: uppercase; text-align: right; font-size: 10px; line-height: 100%; height: 20px; display: flex; align-items: center; color: #999; background: #151515; justify-content: flex-end; padding-right: 5px; padding-left: 5px;} .loremya {background: #0a0a0a; margin-top: 120px!important; padding: 20px; height: auto; color: #999; font-family: playfair Display; font-size: 12px; line-height: 150%;}#cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet"> <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <div class="tkn"> <div class="tkn-hide"> <div class="tkn-mag-barras"> <div class="tkn-mb-lstats">Estadísticas <div class="coloco"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar-base"> </div> </div> </div> <div class="tkn-mb-conti"> <div class="tatisti"> <div class="stats-name">Locura</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-locura); background:var(--color-todo)"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Excentricidad</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy"  style="width: var(--cuanta-excentricidad); background:var(--color-todo)"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Confianza</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-confianza); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Coquetería</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-coqueto); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Calentura</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-calentura); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Torpeza </div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-torpeza); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Inteligencia</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-inteligencia); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Celos</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-celos); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Glotonería</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-glotoneria); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Curiosidad</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-curiosidad); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Independencia</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-independencia); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Responsabilidad</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-responsabilidad); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Irritabilidad</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-irritable); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Ambición</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-ambicioso); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Ingenuidad</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-ingenuidad); background: var(--color-todo);"></div> </div> </div> </div> <div class="tatisti"> <div class="stats-name">Superstición</div> <div class="more-crazyness"> <div class="crazyness"> <div class="mini-crazy" style="width: var(--cuanta-supersticion); background: var(--color-todo);"></div> </div> </div> </div> </div> </div> <div class="tkn-negro"><span class="th th-star"></span> </div> <div class="tkn-magen" style="background-image:url(https://i.imgur.com/Ifxe6Dy.png);"> </div> <span class="th th-right-arrow"></span> <span class="th th-left-arrow"></span> <div class="tkn-real-space"> <span class="th th-planet-1"></span> <div class="tkn-nombra">Laurél de Lovecraft y de Wang</div> <div class="tkn-over"> <div class="tkn-campo"> <div class="tkn-c-titulo">Historia</div> <div class="tkn-c-contenido">Lorem ipsum dolor sit amet consectetur adipiscing elit dictumst nunc mattis senectus mi sociis consequat, metus risus bibendum magna molestie nibh vel neque at netus arcu suspendisse curae odio, habitant dignissim tempor purus taciti massa primis non nascetur inceptos phasellus leo litora. Platea dignissim tempus hendrerit nibh cursus consequat nam phasellus, netus mus porta varius eu semper. Habitasse lacus mattis arcu urna magna lectus, ut posuere lacinia sociis inceptos, ullamcorper suspendisse congue cras semper.</div> </div> <div class="tkn-campo"> <div class="tkn-c-titulo">Personalidad</div> <div class="tkn-c-contenido">Lorem ipsum dolor sit amet consectetur adipiscing elit dictumst nunc mattis senectus mi sociis consequat, metus risus bibendum magna molestie nibh vel neque at netus arcu suspendisse curae odio, habitant dignissim tempor purus taciti massa primis non nascetur inceptos phasellus leo litora. Platea dignissim tempus hendrerit nibh cursus consequat nam phasellus, netus mus porta varius eu semper. Habitasse lacus mattis arcu urna magna lectus, ut posuere lacinia sociis inceptos, ullamcorper suspendisse congue cras semper.</div> </div> <div class="tkn-campo"> <div class="tkn-c-titulo">Habilidades</div> <div class="tkn-c-contenido">Lorem ipsum dolor sit amet consectetur adipiscing elit dictumst nunc mattis senectus mi sociis consequat, metus risus bibendum magna molestie nibh vel neque at netus arcu suspendisse curae odio, habitant dignissim tempor purus taciti massa primis non nascetur inceptos phasellus leo litora. Platea dignissim tempus hendrerit nibh cursus consequat nam phasellus, netus mus porta varius eu semper. Habitasse lacus mattis arcu urna magna lectus, ut posuere lacinia sociis inceptos, ullamcorper suspendisse congue cras semper.</div> </div> <div class="tkn-campo"> <div class="tkn-c-titulo">Extras</div> <div class="tkn-c-contenido">Lorem ipsum dolor sit amet consectetur adipiscing elit dictumst nunc mattis senectus mi sociis consequat, metus risus bibendum magna molestie nibh vel neque at netus arcu suspendisse curae odio, habitant dignissim tempor purus taciti massa primis non nascetur inceptos phasellus leo litora. Platea dignissim tempus hendrerit nibh cursus consequat nam phasellus, netus mus porta varius eu semper. Habitasse lacus mattis arcu urna magna lectus, ut posuere lacinia sociis inceptos, ullamcorper suspendisse congue cras semper.</div> </div> </div> </div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>:root { --color-todo: #b7c5a1;/*COLOR DE TODOS LOS DETALLES VERDES. Si lo cambias, todos los detalles cambiarás al color que elijas.*/ --cuanta-locura: 40%; --cuanta-excentricidad: 60%; --cuanta-confianza: 85%; --cuanta-coqueto: 100%; --cuanta-calentura: 81%; --cuanta-torpeza: 60%; --cuanta-inteligencia: 65%; --cuanta-celos: 20%; --cuanta-glotoneria: 100%; --cuanta-curiosidad: 19%; --cuanta-independencia: 79%; --cuanta-responsabilidad: 49%; --cuanta-irritable: 89%; --cuanta-ambicioso: 49%; --cuanta-ingenuidad: 39%; --cuanta-supersticion: 10%;} .tkn {height: 600px; width: 600px; margin: auto; position: relative; color: #222;} .tkn-magen {background-size: cover; position: absolute; top: 0; left: 0 50%; height: 600px; width: 300px; z-index: 2; transition: all 0.5s ease-in-out;} .tkn-hide {background: #eee; height: 600px; width: 333px; position: absolute; z-index:1;clip-path: polygon(0 0, 0 100%, 90% 100%, 90% 11%, 100% 11%, 100% 5%, 90% 5%, 90% 0); transition: all 0.5s ease-in-out; left: 150px;} .tkn-hide:hover {width: 632px; transition: all 0.5s ease-in-out; left: 0; clip-path: polygon(0 0, 0 100%, 95% 100%, 95% 11%, 100% 11%, 100% 5%, 95% 5%, 95% 0);} .tkn-hide:hover .tkn-magen {left: 0px; transition: all 0.5s ease-in-out;} .tkn-negro {background: rgba(0,0,0,0.3); height: 600px; width: 300px; position: absolute; z-index: 3; transition: all 0.5s ease-in-out;left: 0; top: 0;} .tkn-hide:hover .tkn-negro {background: rgba(0,0,0,0.7); transition: all 0.5s ease-in-out;} .tkn-hide .th-right-arrow {position: absolute; z-index: 4; color: red; right: 0px; font-size: 15px; height: 34px; width: 34px; top: 30px; display: flex; justify-content: center; align-items: center; color: var(--color-todo); opacity:1; transition: all 0.5s ease-in-out;} .tkn-hide .th-left-arrow {position: absolute; z-index: 4; color: red; right: 0px; font-size: 15px; height: 34px; width: 34px; top: 30px; display: flex; justify-content: center; align-items: center; color: var(--color-todo); opacity: 0; transition: all 0.5s ease-in-out;} .tkn-hide:hover .th-right-arrow  {opacity: 0; transition: all 0.5s ease-in-out;} .tkn-hide:hover .th-left-arrow  {opacity: 1; transition: all 0.5s ease-in-out;} .tkn-mag-barras {height: 600px; width: 300px; position: absolute; z-index: 5; left: 0; top: 0; font-family: 'Quicksand', sans-serif; background: ; opacity:0; transition: all 0.5s ease-in-out;} .tkn-hide:hover .tkn-mag-barras  {opacity: 1; transition: all 0.5s ease-in-out;} .tkn-mb-lstats {text-transform: uppercase; font-weight: 700; font-size: 15px; text-align: center; color: #fff; letter-spacing: 5px; padding: 10px; position: absolute; left: 20px; top: 50px; right: 20px; line-height: 100%; border-bottom: 1px solid #fff;} .coloco {position: relative; height: 30px; width: 30px; margin: auto; position: absolute; left: 50%; margin-left: -15px; top: -30px;} .bar-base {height: 3px; width: 30px; background: #fff; bottom: 0px; position: absolute; left: 50%; margin-left: -15px;} .bar1 {background: #fff; width: 8px; bottom: 5px; position: absolute; left: 1px; animation: example1 2s infinite; } @keyframes example1 { 0% {height: 10px;} 50% {height: 20px;} 100% {height: 10px;} } .bar2 {background: #fff; width: 8px; bottom: 5px; position: absolute; left: 11px; animation: example2 2s infinite; } @keyframes example2 { 0% {height: 15px;} 50% {height: 26px;} 100% {height: 15px;} } .bar3 {background: #fff; width: 8px; bottom: 5px; position: absolute; left: 21px; animation: example3 2s infinite; } @keyframes example3 { 0% {height: 26px;} 50% {height: 20px;} 75% {height: 2px;} 100% {height: 26px;} } .tkn-mb-conti {height: 500px; width:300px; position: absolute; left: 0; top: 100px;} .more-crazyness {height: 16px; width: 110px; border: 4px solid #fff; border-radius: 20px; display: flex; justify-content:center; align-items: center;} .crazyness {height: 10px; width: 104px; background: rgba(255,255,255,0.2); border-radius: 15px;} .mini-crazy {height: 10px; border-radius: 15px; background: red;} .tatisti {background: ; float: left; width: 119px; margin: 0 0 18px 21px;} .stats-name {background: ; width: 120px; display: flex; justify-content: center; align-items: center; color: #fff; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 1px; height: 20px;} .tkn-hide .tkn-negro .th {color: #fff; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; right: 0; font-size: 20px; opacity: 1; transition: all 0.5s ease-in-out; animation: rututu 6s infinite;} .tkn-hide:hover .tkn-negro .th  {opacity: 0; transition: all 0.5s ease-in-out;} @keyframes rututu { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .tkn-real-space {background: #eee; height: 600px; width: 300px; position: absolute; right: 33px; overflow: hidden;} .tkn-nombra {font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 12px; background: #e5e5e5; height: 40px; width:280px; display: flex; align-items: center; border-left: 10px solid var(--color-todo); font-style: italic; text-align: left; padding-left: 10px; position: absolute; bottom: 0; right: 0;} .tkn-over {height: 530px; width: 270px; position: absolute; right: 15px; top: 15px; overflow: auto;} .tkn-real-space .th {color: #e8e8e8; font-size: 200px; position: absolute; left: -50px; top: 30px;} .tkn-campo {height: auto; width: 260px; margin-bottom: 15px;} .tkn-c-titulo {font-family: 'Quicksand', sans-serif; font-weight: 700; text-transform: lowercase; font-style: italic; font-size: 25px; color: var(--color-todo); line-height: 100%;} .tkn-c-contenido {font-family: 'Quicksand', sans-serif; font-size: 12px; line-height: 130%; margin-top: 5px; font-weight: 500; border-left: 1px solid #d9d9d9; padding: 5px 0px 0px 10px; margin-left: 2px;} .tkn-over::-webkit-scrollbar { width: 4px; } .tkn-over::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .tkn-over::-webkit-scrollbar-thumb { background: var(--color-todo);} .tkn-c-contenido::selection,.tkn-c-titulo::selection {background: var(--color-todo)!important;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"> <div class="ventana-base" style="background-image:url(https://i.imgur.com/aMLi3Gx.jpg);"> <div class="ventana-nombre">Golden Window</div> <div class="ventana" style="background-image:url(https://i.imgur.com/YGisIXy.png);"></div> <div class="ventana-subti">Una ventana a un lugar mágico</div> <div class="ventana-contenido"> <div class="ventana-nombrete">Datos básicos</div> <div class="ventana-mensaje">Lorem ipsum dolor sit amet consectetur adipiscing elit turpis conubia ut accumsan urna tellus, nostra facilisis dignissim curabitur augue felis imperdiet feugiat metus risus sociis. Torquent placerat nec aenean lacus nullam turpis litora dui a, diam lacinia cursus at dictum sed rhoncus eu consequat ut, parturient metus id ligula duis phasellus vestibulum odio. Ridiculus arcu justo ullamcorper eleifend aliquam volutpat urna aliquet, nullam vulputate lacus vestibulum commodo bibendum parturient, dignissim viverra lectus et.</div> <div class="ventana-nombrete">Historia</div> <div class="ventana-mensaje">Lorem ipsum dolor sit amet consectetur adipiscing elit turpis conubia ut accumsan urna tellus, nostra facilisis dignissim curabitur augue felis imperdiet feugiat metus risus sociis. Torquent placerat nec aenean lacus nullam turpis litora dui a, diam lacinia cursus at dictum sed rhoncus eu consequat ut, parturient metus id ligula duis phasellus vestibulum odio. Ridiculus arcu justo ullamcorper eleifend aliquam volutpat urna aliquet, nullam vulputate lacus vestibulum commodo bibendum parturient, dignissim viverra lectus et.</div> <div class="ventana-nombrete">Personalidad</div> <div class="ventana-mensaje">Lorem ipsum dolor sit amet consectetur adipiscing elit turpis conubia ut accumsan urna tellus, nostra facilisis dignissim curabitur augue felis imperdiet feugiat metus risus sociis. Torquent placerat nec aenean lacus nullam turpis litora dui a, diam lacinia cursus at dictum sed rhoncus eu consequat ut, parturient metus id ligula duis phasellus vestibulum odio. Ridiculus arcu justo ullamcorper eleifend aliquam volutpat urna aliquet, nullam vulputate lacus vestibulum commodo bibendum parturient, dignissim viverra lectus et.</div> <div class="ventana-nombrete">Extras</div> <div class="ventana-mensaje">Lorem ipsum dolor sit amet consectetur adipiscing elit turpis conubia ut accumsan urna tellus, nostra facilisis dignissim curabitur augue felis imperdiet feugiat metus risus sociis. Torquent placerat nec aenean lacus nullam turpis litora dui a, diam lacinia cursus at dictum sed rhoncus eu consequat ut, parturient metus id ligula duis phasellus vestibulum odio. Ridiculus arcu justo ullamcorper eleifend aliquam volutpat urna aliquet, nullam vulputate lacus vestibulum commodo bibendum parturient, dignissim viverra lectus et.</div> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.ventana-base {background: #e5e5e5; height: 700px; width: 500px; margin: auto; position: relative; margin-top: 10px; background-size: cover;} .ventana-nombre {font-family: 'Abril Fatface', cursive; text-transform: uppercase; letter-spacing: 5px; font-size:30px; position: absolute; background: ; width: 100%; text-align: center; color: #fff; border-bottom: 1px solid #fff; padding: 40px 0; line-height: 100%; background:rgba(255,255,255,0.1);} .ventana {height: 50px; width: 50px; border-radius: 100%; background-size: cover; border: #fff solid 5px; top: 80px; position: absolute; left: 20px;} .ventana-subti {color: #fff; font-family: Playfair Display; font-size: 10px; text-transform: lowercase; font-style: italic; line-height: 100%; position: absolute; top: 114px; left: 83px; font-weight: 600; letter-spacing: 1px;} .ventana-contenido {background: #eee; height: 480px; width: 400px; position: absolute; left: 50%; margin-left: -200px; top: 170px; overflow: auto; color: #222;} .ventana-nombrete {font-family: 'Abril Fatface', cursive; text-transform: uppercase; line-height: 100%; padding: 15px 10px; font-size: 20px; letter-spacing: 1px;} .ventana-nombrete::first-letter {color: #e0ad52;} .ventana-mensaje {padding: 10px 20px 10px 20px; font-size: 12px; font-family: Playfair Display; line-height: 140%; text-align: left; border-left: 10px solid #e0ad52; background: #e8e8e8;} .ventana-contenido::-webkit-scrollbar { width: 5px; } .ventana-contenido::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .ventana-contenido::-webkit-scrollbar-thumb { background: #e0ad52;} .ventana-nombrete::selection,.ventana-mensaje::selection {background: #e0ad52;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <div class="blanquicy" style="background: #eee; height: 300px; width: 500px; margin: auto; background-size: cover; background-image:url(https://i.imgur.com/jg86Jhk.jpg); border-bottom: 15px solid #72e5db;"> <div style="height: 300px; width: 200px; background: rgba(255,255,255,0.5); margin-left: 20px; position: relative;"><span class="th th-leaf-1" style="color: #fff; width: 200px; text-align: center; padding: 20px 0; font-size: 20px; border-bottom: 1px solid #fff;"></span> <a href="#">Expediente</a> <a href="#">Búsqueda</a> <a href="#">Cronología</a> </div> </div><center><a href="https://magicalcore.tumblr.com/" style="font-size: 6px;">C Y A</a></center>

<style>.blanquicy a {display: block; font-family: Arial; font-size: 10px; text-transform: uppercase; margin-top: 48px; text-align: center; text-decoration: none; color: #555!important;}</style>

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Play|Rozha+One&display=swap" rel="stylesheet"> <div class="love-triangle"> <div class="trianmage" style="background-image:url(https://66.media.tumblr.com/308dedc159b945c1e8594a559ea96baa/tumblr_oddo0bp3uf1r3thx5o1_r1_1280.png);"></div> <div class="circle-face"> i </div> <div class="tritulo">Básicos</div> <div class="tooltip beestar"> <span class="fas fa-star"></span> <div class="idontdream"><span class="dontname">Nombre</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beeheart"> <span class="fas fa-heart"></span> <div class="idontdream"><span class="dontname">Profesión</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beefeather"> <span class="fas fa-feather"></span> <div class="idontdream"><span class="dontname">Raza</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beemap"> <span class="fas fa-map-marked"></span> <div class="idontdream"><span class="dontname">Nacionalidad</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="extra-basic">Lorem ipsum dolor sit amet consectetur adipiscing elit, cursus curae vivamus curabitur vulputate ad. Tellus suspendisse sollicitudin suscipit ut facilisi risus litora ridiculus vel per hendrerit pharetra, bibendum netus turpis himenaeos lacinia facilisis rhoncus faucibus sem viverra eleifend.</div> <div class="tristoria"><span class="triscolor">ii.</span> Historia <hr class="trinea"></div> <div class="extra-basic2">Lorem ipsum dolor sit amet consectetur adipiscing elit natoque ultricies habitant fringilla dis, ornare parturient ad netus quam bibendum dapibus mi donec egestas justo. Quam et cursus purus cubilia facilisis auctor semper rhoncus libero, sociosqu imperdiet eros pharetra posuere curabitur himenaeos tempus ac, at pellentesque nisi nisl dui cum suscipit condimentum. Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus.</div> <div class="tristoria"><span class="triscolor">iii.</span> Psique <hr class="trinea"></div> <div class="extra-basic2">Lorem ipsum dolor sit amet consectetur adipiscing elit natoque ultricies habitant fringilla dis, ornare parturient ad netus quam bibendum dapibus mi donec egestas justo. Quam et cursus purus cubilia facilisis auctor semper rhoncus libero, sociosqu imperdiet eros pharetra posuere curabitur himenaeos tempus ac, at pellentesque nisi nisl dui cum suscipit condimentum. Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus. <div class="subtriangulo">iii.i. Gustos y disgustos</div> Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus. </div> <div class="tristoria"><span class="triscolor">iv.</span> Habilidades <hr class="trinea"></div> <div class="extra-basic2">Lorem ipsum dolor sit amet consectetur adipiscing elit natoque ultricies habitant fringilla dis, ornare parturient ad netus quam bibendum dapibus mi donec egestas justo. Quam et cursus purus cubilia facilisis auctor semper rhoncus libero, sociosqu imperdiet eros pharetra posuere curabitur himenaeos tempus ac, at pellentesque nisi nisl dui cum suscipit condimentum. Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus.</div> <div class="tristoria"><span class="triscolor">v.</span> Extras <hr class="trinea"></div> <div class="extra-basic2">Lorem ipsum dolor sit amet consectetur adipiscing elit natoque ultricies habitant fringilla dis, ornare parturient ad netus quam bibendum dapibus mi donec egestas justo. Quam et cursus purus cubilia facilisis auctor semper rhoncus libero, sociosqu imperdiet eros pharetra posuere curabitur himenaeos tempus ac, at pellentesque nisi nisl dui cum suscipit condimentum. Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus.</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.love-triangle {background: #eee; height: auto; width: 500px; margin: auto; position: relative; padding-top: 1px; padding-bottom: 25px; color: #000;} .trianmage {height: 500px; width: 500px; clip-path: polygon(100% 0, 0 0, 0 100%); background-size: cover; filter: grayscale(100%); position: absolute; left:0; top:-1px;} .circle-face {background: #333; height: 200px; width: 200px; border-radius: 100%; position: absolute; left: 50%; margin-left: -130px; top: 100px; border: 30px solid #eee; background-size:cover; display: flex; justify-content:center; align-items: center; font-size: 100px; color: #eee; font-family: 'Rozha One', serif;} .tooltip {position: absolute; color: #fff; background: #DCC48E; border-radius: 100%; font-size: 15px; height: 40px; width: 40px; display: flex; justify-content:center; align-items: center; cursor: help;} .beestar {right: 10px; top: 170px;} .beeheart {right: 10px; top: 230px;} .beefeather {right: 10px; top: 290px;} .beemap {right: 10px; top: 350px;} .tritulo { font-family: 'Rozha One', serif; position: absolute; top: 450px; font-size: 50px; text-transform: uppercase; letter-spacing: 5px; right: 20px; border-bottom: 5px solid #DCC48E; width: 300px; text-align: right; padding-bottom: 20px; } .idontdream {position: absolute; background: #c5c5c5; right: 50px; top: 0px; min-width: 300px; visibility: hidden; padding: 5px; padding-left: 10px; border-radius: 0 25px 25px 0px;color: #111;} .tooltip:hover .idontdream { opacity: 1; visibility: visible;} .dontname {font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Rozha One', serif; line-height: 15px; display: block;} .namesay {display: block; font-family: 'Play', sans-serif; font-size: 10px; height: 13px; line-height: 11px;} .extra-basic {background: #f5f5f5; width: 430px; height: auto; margin-left: 25px; padding: 10px; font-size: 11px; text-align: justify; line-height: 17px; font-family: 'Play', sans-serif; margin-top: 520px;} .extra-basic::selection,.extra-basic br::selection,.dontname::selection,.namesay::selection {background: #DCC48E;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .tristoria {font-family: 'Rozha One', serif; text-transform: uppercase; padding: 20px 30px; font-size: 30px;} .triscolor {color: #DCC48E;} .trinea {display: inline-block; background: #DCC48E; height: 1px; width: 150px; border:0; margin: 8px;} .extra-basic2 {background: #f5f5f5; width: 430px; height: auto; margin-left: 25px; padding: 10px; font-size: 11px; text-align: justify; line-height: 17px; font-family: 'Play', sans-serif;} .subtriangulo {color: #9e7b2b; padding: 15px; font-size: 15px;}</style>

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Play|Rozha+One&display=swap" rel="stylesheet"> <div class="love-triangle"> <div class="tooltip beestar"> <span class="fas fa-star"></span> <div class="idontdream"><span class="dontname">Participantes</span> <div class="namesay">Jefersons Gutierritos y Alvin Jacky Tori</div></div> </div> <div class="tristoria"><span class="triscolor">i.</span> Loving Triangles <hr class="trinea"></div> <div class="extra-basic2">TEXTO DEL POST VA AQUÍ</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.love-triangle {background: #eee; height: auto; width: 500px; margin: auto; position: relative; padding-top: 1px; padding-bottom: 25px; color: #000; margin-top: 50px;} .tooltip {position: absolute; color: #fff; background: #DCC48E; border-radius: 100%; font-size: 15px; height: 40px; width: 40px; display: flex; justify-content:center; align-items: center; cursor: help;} .beestar {right: 10px; top: -20px;} .idontdream {position: absolute; background: #c5c5c5; right: 50px; top: 0px; min-width: 300px; visibility: hidden; padding: 5px; padding-left: 10px; border-radius: 0 25px 25px 0px;color: #111;} .tooltip:hover .idontdream { opacity: 1; visibility: visible;} .dontname {font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Rozha One', serif; line-height: 15px; display: block;} .namesay {display: block; font-family: 'Play', sans-serif; font-size: 10px; height: 12px; line-height: 10px;} .extra-basic2::selection,.extra-basic2 br::selection,.dontname::selection,.namesay::selection {background: #DCC48E;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .tristoria {font-family: 'Rozha One', serif; text-transform: uppercase; padding: 20px 30px; font-size: 30px;} .triscolor {color: #DCC48E;} .trinea {display: inline-block; background: #DCC48E; height: 1px; width: 100px; border:0; margin: 8px;} .extra-basic2 {background: #f5f5f5; width: 430px; height: auto; margin-left: 25px; padding: 10px; font-size: 11px; text-align: justify; line-height: 17px; font-family: 'Play', sans-serif;}</style>

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Play|Rozha+One&display=swap" rel="stylesheet"> <div class="love-triangle"> <div class="trianmage" style="background-image:url(https://66.media.tumblr.com/308dedc159b945c1e8594a559ea96baa/tumblr_oddo0bp3uf1r3thx5o1_r1_1280.png);"></div> <div class="circle-face"> i </div> <div class="tritulo">Palabra</div> <div class="tooltip beestar"> <span class="fas fa-star"></span> <div class="idontdream"><span class="dontname">Nombre</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beeheart"> <span class="fas fa-heart"></span> <div class="idontdream"><span class="dontname">Profesión</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beefeather"> <span class="fas fa-feather"></span> <div class="idontdream"><span class="dontname">Raza</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="tooltip beemap"> <span class="fas fa-map-marked"></span> <div class="idontdream"><span class="dontname">Nacionalidad</span> <div class="namesay">Lorem ipsum name</div></div> </div> <div class="extra-basic">Escribes aquí lo que ofreces y los requisitos que pides.</div> <div class="tristoria"><span class="triscolor">ii.</span> Puestos <hr class="trinea"></div> <div class="extra-basic2">Lorem ipsum dolor sit amet consectetur adipiscing elit natoque ultricies habitant fringilla dis, ornare parturient ad netus quam bibendum dapibus mi donec egestas justo. Quam et cursus purus cubilia facilisis auctor semper rhoncus libero, sociosqu imperdiet eros pharetra posuere curabitur himenaeos tempus ac, at pellentesque nisi nisl dui cum suscipit condimentum. Vitae donec fermentum at nam sagittis nunc duis nulla, facilisis mauris erat lobortis gravida fusce nullam per, mollis neque curabitur magna risus arcu metus.</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.love-triangle {background: #eee; height: auto; width: 500px; margin: auto; position: relative; padding-top: 1px; padding-bottom: 25px; color: #000;} .trianmage {height: 500px; width: 500px; clip-path: polygon(100% 0, 0 0, 0 100%); background-size: cover; filter: grayscale(100%); position: absolute; left:0; top:-1px;} .circle-face {background: #333; height: 200px; width: 200px; border-radius: 100%; position: absolute; left: 50%; margin-left: -130px; top: 100px; border: 30px solid #eee; background-size:cover; display: flex; justify-content:center; align-items: center; font-size: 100px; color: #eee; font-family: 'Rozha One', serif;} .tooltip {position: absolute; color: #fff; background: #DCC48E; border-radius: 100%; font-size: 15px; height: 40px; width: 40px; display: flex; justify-content:center; align-items: center; cursor: help;} .beestar {right: 10px; top: 170px;} .beeheart {right: 10px; top: 230px;} .beefeather {right: 10px; top: 290px;} .beemap {right: 10px; top: 350px;} .tritulo { font-family: 'Rozha One', serif; position: absolute; top: 450px; font-size: 50px; text-transform: uppercase; letter-spacing: 5px; right: 20px; border-bottom: 5px solid #DCC48E; width: 300px; text-align: right; padding-bottom: 20px; } .idontdream {position: absolute; background: #c5c5c5; right: 50px; top: 0px; min-width: 300px; visibility: hidden; padding: 5px; padding-left: 10px; border-radius: 0 25px 25px 0px;color: #111;} .tooltip:hover .idontdream { opacity: 1; visibility: visible;} .dontname {font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Rozha One', serif; line-height: 15px; display: block;} .namesay {display: block; font-family: 'Play', sans-serif; font-size: 10px; height: 13px; line-height: 11px;} .extra-basic {background: #f5f5f5; width: 430px; height: auto; margin-left: 25px; padding: 10px; font-size: 11px; text-align: justify; line-height: 17px; font-family: 'Play', sans-serif; margin-top: 520px;} .extra-basic::selection,.extra-basic br::selection,.dontname::selection,.namesay::selection {background: #DCC48E;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .tristoria {font-family: 'Rozha One', serif; text-transform: uppercase; padding: 20px 30px; font-size: 30px;} .triscolor {color: #DCC48E;} .trinea {display: inline-block; background: #DCC48E; height: 1px; width: 150px; border:0; margin: 8px;} .extra-basic2 {background: #f5f5f5; width: 430px; height: auto; margin-left: 25px; padding: 10px; font-size: 11px; text-align: justify; line-height: 17px; font-family: 'Play', sans-serif;} .subtriangulo {color: #9e7b2b; padding: 15px; font-size: 15px;}</style>

<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre&display=swap" rel="stylesheet"> <div class="lovingthis"> <div class="loving-notes">Nombre 1 y Nombre 2 | Librería</div> <hr class="lovelines"/> <div class="lovecircles" style="background-image:url(https://i.imgur.com/KYfcAsc.png);"></div> <div class="lovelydestiny">TEXTO AQUÍ</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.lovingthis {background: #eee; height: auto; width: 500px; margin: auto; position: relative; padding-top: 1px; padding-bottom: 25px; border-bottom: 15px solid #6cc0c6; margin-top: 50px; font-family: 'Abhaya Libre', serif;} .lovelines {height: 1px; width: 400px; border:0; background: #aaa; top: 58px; position: absolute; left: 50px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .lovecircles {height: 100px; width: 100px; background: peru; border-radius: 100%; position: absolute; left: 50%; margin-left: -60px; border: 10px solid #eee; background-size: cover; top: 5px;} .lovelydestiny {background: #f3f3f3; margin-top: 140px; width: 420px; margin-left: 25px; padding: 15px; font-size: 13px; text-align: justify; line-height: 18px;} .loving-notes {position: absolute; font-size: 10px; background: #eee; padding: 5px 10px; top: -30px; height: 15px; display: flex; justify-content:center; align-items: center;}</style>

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet"> <div class="profile-tin"> <div class="ava-prof" style="background-image: url(https://i.imgur.com/BUkNAtf.png);"></div> <div class="porta-prof" style="background-image:url(https://i.imgur.com/fo7tkSF.png);"></div> <div class="profdates"> <div class="profname">Lilliane Shea Volkov</div> <div class="profname" style="background:#842976;"><span class="fas fa-heart"></span> Follow</div> <div class="datesss"><span class="fas fa-map-marker-alt"></span> Neptune</div> <div class="datesss" style="padding-top: 5px;">Lorem ipsum dolor sit amet consectetur adipiscing elit erat dis, maecenas rhoncus ante ultrices ornare curabitur. Maecenas rhoncus ante ultrices ornare. <span class="hashpro">#curabitur</span></div> </div> <div class="gallprof">Gallery</div> <div class="gallcarrete"> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/ar1L77y.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/IvO5Vig.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/1bAof2j.png);"></div> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/swpelzp.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/igIsSd7.png);"></div> <div class="gallshow" style="background-image:url(https://66.media.tumblr.com/c9bdd55c8f8f3ea6bc556e71804d4b75/tumblr_owtfbdhORS1r3thx5o1_1280.png);"></div> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/l3RvFgu.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/3Ytd0Ms.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/BHEIRZU.png);"></div> <div style="clear:both;"></div> </div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>.profile-tin {background: #eee; height: auto; width: 400px; margin: auto; padding-top: 1px; position: relative; font-family: 'Noto Sans', sans-serif; padding-bottom: 15px; border-bottom: 15px solid #842976;} .ava-prof {height: 200px; width: 200px; border-radius: 100%; left: 50%;  top: 40px; background-size: cover; position: absolute; margin-left: -110px; z-index: 1; border: 10px solid #eee;} .porta-prof {height: 150px; width: 380px; left: 10px;  top: 10px; background-size: cover; position: absolute;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .profdates {height: auto; position: absolute; top: 280px; right: 15px; left: 15px;} .profname {background: #2b266c; color: #d6daec; padding: 5px 15px; display: inline; border-radius: 20px; font-size: 14px; margin-right: 5px;} .datesss {color: #777; padding: 15px 0 0 5px; font-size: 13px;} .datesss .fa-map-marker-alt {font-size: 12px;} .gallprof {position: absolute; top: 400px; padding: 10px 20px; font-size: 12px; text-transform:uppercase; font-weight: 700; letter-spacing: 0.5px; color: #999;} .gallcarrete {height: auto; width: 370px; margin-top: 435px; margin-left: 15px;} .gallshow {height: 120px; width: 120px; float: left; margin-left: 5px; margin-top: 5px; background-size: cover;} .hashpro {color: #842976; font-style: italic; font-weight: 700;}</style>

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet"> <div class="profile-tin"> <div class="ava-prof" style="background-image: url(https://i.imgur.com/W337E1g.png);"></div> <div class="porta-prof" style="background-image:url(https://i.imgur.com/w2N9zf9.png);"></div> <div class="profdates"> <div class="profname">Jeamy Laika Stevens</div> <div class="profname" style="background:#b23d58;"><span class="fas fa-heart"></span> Follow</div> <div class="datesss"><span class="fas fa-map-marker-alt"></span> Mars</div> <div class="datesss" style="padding-top: 5px;">Lorem ipsum dolor sit amet consectetur adipiscing elit erat dis, maecenas rhoncus ante ultrices ornare curabitur. Maecenas rhoncus ante ultrices ornare. <span class="hashpro">#curabitur</span></div> </div> <div class="gallprof">Gallery</div> <div class="gallcarrete"> <div class="gallshow" style="margin-left:0; background-image:url(https://i.imgur.com/MisdSxY.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/maQQQsC.png);"></div> <div class="gallshow" style="background-image:url(https://i.imgur.com/szAoJsU.png);"></div> <div style="clear:both;"></div> </div> </div> <center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
 
<style>.profile-tin {background: #111; height: auto; width: 400px; margin: auto; padding-top: 1px; position: relative; font-family: 'Noto Sans', sans-serif; padding-bottom: 15px; border-bottom: 15px solid #b23d58;} .ava-prof {height: 200px; width: 200px; border-radius: 100%; left: 50%;  top: 40px; background-size: cover; position: absolute; margin-left: -110px; z-index: 1; border: 10px solid #111;} .porta-prof {height: 150px; width: 380px; left: 10px;  top: 10px; background-size: cover; position: absolute;} .profdates {height: auto; position: absolute; top: 280px; right: 15px; left: 15px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .profname {background: #3c1a30; color: #e6c0c1; padding: 5px 15px; display: inline; border-radius: 20px; font-size: 14px; margin-right: 5px;} .datesss {color: #777; padding: 15px 0 0 5px; font-size: 13px;} .datesss .fa-map-marker-alt {font-size: 12px;} .gallprof {position: absolute; top: 400px; padding: 10px 20px; font-size: 12px; text-transform:uppercase; font-weight: 700; letter-spacing: 0.5px; color: #999;} .gallcarrete {height: auto; width: 370px; margin-top: 435px; margin-left: 15px;} .gallshow {height: 120px; width: 120px; float: left; margin-left: 5px; margin-top: 5px; background-size: cover;} .hashpro {color: #b23d58; font-style: italic; font-weight: 700;}</style>

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Abhaya+Libre:400,600,800&display=swap" rel="stylesheet"> <div class="text-spiral"> <div class="spiral-say">Aquí va un bello texto que puede ser tan largo o corto como se desee.</div> <div class="circle-say" style="background-image:url(https://i.imgur.com/gNx5BUE.png);"></div> <div class="toolsolute1"> <div class="tooltip"> <span class="sf sf-clock-3"></span> <div class="tooltiptext">Fecha o Estación</div> </div> </div> <div class="toolsolute2"> <div class="tooltip"> <span class="sf sf-location"></span> <div class="tooltiptext">Localización</div> </div> </div> <div class="toolsolute3"> <div class="tooltip"> <span class="sf sf-diamond"></span> <div class="tooltiptext">Participantes</div> </div> </div> <div style="clear:both;"></div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.text-spiral {background: #eee; height: auto; width: 500px; margin: auto; padding-top: 1px; padding-bottom: 25px; position: relative; border-right: 10px solid #cfb786; color: #333;} .spiral-say { background: #f3f3f3; width: 370px; margin: 24px 25px 0 25px; font-family: 'Abhaya Libre', serif; padding: 15px; font-size: 13px; text-align: justify; font-weight: 400; line-height: 17px; float: left; min-height: 255px; } .circle-say {height: 120px; width: 120px; position: absolute; border-radius: 100%; background-size:cover; border: 10px solid #cfb786; right: -75px; top: 30px;} .toolsolute1 {top: 180px; position: absolute; right: -25px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .toolsolute2 {top: 230px; position: absolute; right: -25px;} .toolsolute3 {top: 280px; position: absolute; right: -25px;} .text-spiral .sf {background: #eee; color: #000; height: 30px; width: 30px; display: block; border-radius: 100%; display: flex; justify-content:center; align-items: center; border: 5px solid #cfb786; color: #333;} .tooltiptext { background-color: #92afb2; color: #fff; font-family: Lato; font-size: 9px; left: 50%; margin-left: -75px; letter-spacing: 1px; padding: 5px; position: absolute; text-align: center; text-transform: uppercase; top: 11px; visibility: hidden; width: 150px; height: 10px; line-height: 10.5px; border-radius: 10px; } .tooltip:hover .tooltiptext { opacity: 1; visibility: visible; }</style>

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,600|Playfair+Display:400,500&display=swap" rel="stylesheet"> <div class="stars"> <div class="star-montain"></div> <div class="starlight"> <div class="starlight-see"> <div class="starshadows"> </div> </div> </div> <div class="star-signal"></div> <div class="star-signal2"></div> <div class="basic-star"> <div class="basic-label">Basicos</div> <div class="basic-light"><span class="basic-name">Nombre:</span><span class="basic-say">Lorem ipsum dolor sit amet consectetur adipiscing elit, imperdiet dictumst quis nisl ornare magnis, integer bibendum mauris ac donec luctus.</span></div> <div class="basic-light"><span class="basic-name">Edad:</span><span class="basic-say">999 años. / 25 aparentes.</span></div> <div class="basic-light"><span class="basic-name">Nacionalidad:</span><span class="basic-say">Lorem ipsum no sé qué más debo poner aquí.</span></div> <div class="basic-light"><span class="basic-name">Profesión:</span><span class="basic-say">Lorem ipsum no sé qué más debo poner aquí.</span></div> <div class="basic-light"><span class="basic-name">Raza:</span><span class="basic-say">Lorem ipsum no sé qué más debo poner aquí.</span></div> </div> <div class="star-montain2"></div> </div> <div class="stars" style="height: auto; margin-top: 200px;"> <div class="star-montain"></div> <div class="black-cube"></div> <div class="basic-star2"> <div class="basic-label">Historia</div> <div class="basic-light2"> Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur, nisl eros parturient aenean non senectus laoreet, consequat facilisis aliquet curae condimentum donec proin. Ridiculus metus felis conubia pretium consequat auctor nunc, eleifend pharetra cras luctus porta interdum tempor purus, eros montes dignissim platea aptent dictum. Leo volutpat class conubia faucibus potenti non pellentesque risus, eros tellus pulvinar eu gravida quis quisque hendrerit egestas, vel ridiculus metus accumsan interdum taciti parturient. <br><br> Fusce justo nibh aliquet arcu vulputate tortor at aenean quisque, ornare ultricies praesent egestas rhoncus pulvinar molestie pellentesque tempor ad, turpis tempus fames purus posuere himenaeos inceptos laoreet. Porta aliquam aptent ligula torquent suspendisse nunc venenatis tristique, auctor fames sociis turpis dapibus purus class velit, primis at quam phasellus cursus aliquet eros. Ligula vivamus curae quisque a nec penatibus ad morbi est massa erat ullamcorper, pharetra arcu vestibulum feugiat blandit ultrices urna.<br> Fusce justo nibh aliquet arcu vulputate tortor at aenean quisque, ornare ultricies praesent egestas rhoncus pulvinar molestie pellentesque tempor ad, turpis tempus fames purus posuere himenaeos inceptos laoreet. Porta aliquam aptent ligula torquent suspendisse nunc venenatis tristique, auctor fames sociis turpis dapibus purus class velit, primis at quam phasellus cursus aliquet eros. Ligula vivamus curae quisque a nec penatibus ad morbi est massa erat ullamcorper, pharetra arcu vestibulum feugiat blandit ultrices urna. </div> </div> <div class="basic-star2"> <div class="basic-label">Personalidad</div> <div class="basic-light2"> Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur, nisl eros parturient aenean non senectus laoreet, consequat facilisis aliquet curae condimentum donec proin. Ridiculus metus felis conubia pretium consequat auctor nunc, eleifend pharetra cras luctus porta interdum tempor purus, eros montes dignissim platea aptent dictum. Leo volutpat class conubia faucibus potenti non pellentesque risus, eros tellus pulvinar eu gravida quis quisque hendrerit egestas, vel ridiculus metus accumsan interdum taciti parturient. </div> </div> <div class="basic-star2"> <div class="basic-label">Habilidades y debilidades</div> <div class="basic-light2"> Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur, nisl eros parturient aenean non senectus laoreet, consequat facilisis aliquet curae condimentum donec proin. Ridiculus metus felis conubia pretium consequat auctor nunc, eleifend pharetra cras luctus porta interdum tempor purus, eros montes dignissim platea aptent dictum. Leo volutpat class conubia faucibus potenti non pellentesque risus, eros tellus pulvinar eu gravida quis quisque hendrerit egestas, vel ridiculus metus accumsan interdum taciti parturient. </div> </div> <div class="basic-star2"> <div class="basic-label">Extras</div> <div class="basic-light2"> Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur, nisl eros parturient aenean non senectus laoreet, consequat facilisis aliquet curae condimentum donec proin. Ridiculus metus felis conubia pretium consequat auctor nunc, eleifend pharetra cras luctus porta interdum tempor purus, eros montes dignissim platea aptent dictum. Leo volutpat class conubia faucibus potenti non pellentesque risus, eros tellus pulvinar eu gravida quis quisque hendrerit egestas, vel ridiculus metus accumsan interdum taciti parturient. </div> </div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.stars {width: 400px; height: 565px; background: #111; margin: auto; padding-top: 1px; position: relative; margin-top: 250px;} .starlight {background: #444; height: 200px; width: 200px; transform: rotate(45deg); margin: auto; margin-top: -90px; background-size: cover; background-image:url(https://i.pinimg.com/564x/c2/4c/f8/c24cf86663e4ec4d11ff959b0523e580.jpg); outline: 5px solid #151515; outline-offset: 10px;} .starshadows {background: rgba(0,0,0,0.6); height: 200px; width: 200px; transition: all 0.5s ease-in-out;} .starshadows:hover {background: rgba(0,0,0,0.4); transition: all 0.5s ease-in-out;} .star-signal {background: #222; height: 200px; width: 200px; clip-path: polygon(50% 100%, 100% 52%, 100% 50%, 50% 98%, 0 50%, 0 52%); position: absolute; top: 10px; left: 50%; margin-left: -100px;} .star-signal2 {background: #222; height: 100px; width: 100px; clip-path: polygon(50% 100%, 100% 54%, 100% 50%, 50% 96%, 0 50%, 0 54%); position: absolute; top: 130px; left: 50%; margin-left: -50px;} .star-montain {clip-path: polygon(50% 0%, 0 100%, 100% 100%); height: 200px; width: 400px; position: absolute; background: #111; top: -200px;} .star-montain2 {clip-path: polygon(50% 100%, 0% 0%, 100% 0%); height: 200px; width: 400px; position: absolute; background: #111; bottom: -200px;} .basic-star {background: #; position: absolute; top: 250px; width: 370px; height: auto; left: 15px;} .basic-label {line-height: 45px; font-family: 'Oswald', sans-serif; color: #252525; font-size: 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; text-align: right;} .basic-light {font-family: Playfair Display,serif; color: #444; font-size: 13px; font-weight: 400; border-left: 5px solid #050505; padding: 3px 10px;} .basic-name {display: block; color: #666;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .basic-say {line-height: 20px;} .black-cube {background: #0f0f0f; height: 140px; width: 140px; transform: rotate(45deg); margin: auto; margin-top: -170px;} .basic-star2 {width: 370px; height: auto; margin-left: 15px; margin-top: 30px; padding-bottom: 15px;} .basic-light2 {font-family: Playfair Display,serif; color: #444; font-size: 12px; font-weight: 400; padding: 15px; background: #0f0f0f; line-height: 19px; text-align: justify; height: auto;}</style>

<link href="https://fonts.googleapis.com/css?family=Almarai:400,700,800|Playfair+Display&display=swap" rel="stylesheet"> <div class="relative-triangu"> <div class="code-triangu" style="background-image:url(https://66.media.tumblr.com/2f3f612e7f08d8e3a75ffa72bad42102/tumblr_pvuw6997AK1r3thx5o2_r1_500.png);"> <div class="abso-triangu"></div> <div class="datos-basicos-tri">Datos básicos</div> </div> <div class="gray-right"> <div class="amor-fugaz"><span style="color: #D58C25;">Nombre completo:</span> Aquí va un nombre completo, aunque sea muy largo, o aunque sea muy corto. <span style="color: #D58C25;">Nacionalidad:</span> Provengo de un lugar muy lejano, mágico y congelado. <span style="color: #D58C25;">Edad:</span> Ya estoy muy viejo. <span style="color: #D58C25;">Raza:</span> Provengo del dolor más profundo y la rabia más intensa, mezclados en un apretado amasijo de impotencia, hasta que un día ese amasijo explotó y nací, como la única lágrima de ese ser gélido.</div> </div> <div class="left-transparency"> <!--Aquí empieza la HISTORIA--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Historia</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. Orci ultrices primis accumsan penatibus platea nisl faucibus nullam, praesent nam condimentum curae bibendum diam ligula sed class, iaculis imperdiet a congue erat molestie nulla. <br><br>Tellus eget senectus pharetra consequat ullamcorper id nullam, tincidunt porta rutrum duis morbi primis phasellus, hac venenatis platea porttitor quam eu. </div> <!--Aquí termina la HISTORIA--> <!--Aquí empieza la PERSONALIDAD--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Personalidad</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la PERSONALIDAD--> <!--Aquí empieza la GUSTOS--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Gustos y disgustos</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la GUSTOS--> <!--Aquí empieza la EXTRAS--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Extras</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la EXTRAS--> </div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.relative-triangu {background: #eee; height: 700px; width: 500px; margin: auto; position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 65% 85%, 50% 100%, 35% 85%, 0% 85%); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 20% 90%, 10% 100%, 0% 100%); border-bottom: 15px solid #D58C25;} .code-triangu {-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 65% 85%, 50% 100%, 35% 85%, 0% 85%); clip-path: polygon(0 0, 100% 0, 100% 73%, 95% 73%, 85% 100%, 75% 73%, 0% 73%); height: 300px; width: 500px; background: red; background-size: cover; z-index: 1; position: absolute; top: 0;} .abso-triangu {background: #D58C25; height: 100px; width: 100px; position: absolute;right: 25px; top: 170px;clip-path: polygon(0 20%, 50% 100%, 50% 70%, 30% 35%, 70% 35%, 50% 70%, 50% 70%, 50% 70%, 50% 100%, 100% 20%);} .gray-right {background: #ddd; height:485px; width: 150px; position: absolute; right: 0; bottom: 0;} .amor-fugaz {margin: 100px 15px 15px 15px; font-family: 'Almarai', sans-serif; font-size: 10px; text-align: left; line-height: 20px; height: 370px; overflow: auto; padding-right: 5px; color: #555;} .datos-basicos-tri {color: #fff; font-family: 'Almarai', sans-serif; font-size: 10px; text-transform: uppercase; position: absolute; letter-spacing: 1px; font-weight: 700; right: 25px; top: 165px; text-shadow: 0px 0px 10px #000;} .left-transparency {height: 376px; width: 325px; position: absolute; bottom: 80px; left: 0px; float: left; overflow:auto; padding-right: 15px;} .transpa-title {position: relative; height: 50px; margin-left: 25px;} .left-titulo {color: #2A2B6f; font-size: 20px; font-family: 'Almarai', sans-serif; letter-spacing: 1px; position: absolute; left: 5px; top: 23px; line-height: 0; font-weight: 800; text-transform: uppercase; z-index:1;} .titi-tri {height: 25px; width: 25px; background: #D58C25;clip-path: polygon(0 0, 0% 100%, 75% 50%); position: absolute; left:-25px; top: 25px;} .left-subtitulo {color: #000; font-size: 10px; font-family:Playfair Display,serif; position: absolute; left: 0; bottom: 0; background: #ddd; display: block; width: 290px; PADDING: 5px;} .dimealgo-porfavor {font-family: Playfair Display; font-size: 11px; padding: 10px 0 10px 20px; border-left: 1px solid #ddd; color: #222; margin-left: 25px; line-height: 16px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 2px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .left-transparency::-webkit-scrollbar { width: 4px; } .left-transparency::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .left-transparency::-webkit-scrollbar-thumb { background: #D58C25;} .amor-fugaz::-webkit-scrollbar { width: 4px; } .amor-fugaz::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .amor-fugaz::-webkit-scrollbar-thumb { background: #D58C25;}</style>

<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre|Meddon&display=swap" rel="stylesheet"> <div class="bonfire"> <div class="bonfire-title">Bonfire</div> <hr class="bon"/> <div class="imagen-bon" style="background-image:url(https://i.imgur.com/alezITV.jpg);"></div> <div class="violent-life">fire is violent life</div> <div class="fire-text">i. Lorem ipsum. Lorem ipsum dolor sit amet consectetur adipiscing elit, consequat sem leo egestas quisque habitasse felis mus, a montes praesent viverra neque ridiculus. Massa habitasse dignissim proin habitant turpis penatibus vestibulum, sapien conubia malesuada porttitor hac vel. Porta potenti cubilia aliquam dui torquent condimentum dis ut, platea suspendisse vitae nulla penatibus pellentesque. <br> Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum dictumst placerat.Lorem ipsum dolor sit amet consectetur adipiscing elit, consequat sem leo egestas quisque habitasse felis mus, a montes praesent viverra neque ridiculus. Massa habitasse dignissim proin habitant turpis penatibus vestibulum, sapien conubia malesuada porttitor hac vel. Porta potenti cubilia aliquam dui torquent condimentum dis ut, platea suspendisse vitae nulla penatibus pellentesque. Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum dictumst placerat. <br><br> Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum.</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.bonfire {background: #e9e9e9; height: 600px; width: 500px; margin: auto; position: relative; border-bottom: 15px solid #ffc222;} .bonfire-title {top: 20px; color: #AB393C; font-size: 60px; position: absolute; padding: 10px 20px; font-style:italic; font-family: 'Abhaya Libre', serif; font-weight: 800; text-shadow: 4px 4px 0px #ccc; z-index: 1;} .bon {position: absolute; width: 250px; right: 50px; top: 40px; border:0; background: #ccc; height: 1px;} .imagen-bon {height:60px; width: 60px; background: #ccc; border-radius: 100%; position: absolute; right: 10px; top: 10px; border: 5px solid #fff; background-size: cover;} .violent-life {font-family: 'Meddon', cursive; font-size: 25px; position: absolute; top: 48px; left: 80px; z-index:1; color: #fff;} .fire-text {color: #666; background: #eee; height: 445px; width: 420px; margin: auto; position: absolute; top: 100px; left: 25px; font-family: 'Abhaya Libre', serif; font-size: 12px; padding: 15px; text-align: justify; line-height: 17px; overflow: auto;} .fire-text::-webkit-scrollbar { width: 4px; } .fire-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .fire-text::-webkit-scrollbar-thumb { background: #ffc222!important;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 2px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>