Règlement

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