[ Expediente ] Lemonade

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <div class="lemonade"> <div class="tringui"></div> <div class="red"> <div class="datagico"> <div class="datoto">Nombre: Puede ser un nombre que sea muy largo o muy corto.</div> <div class="datoto">Raza: Estrella</div> <div class="datoto">Nacionalidad: Yenovia</div> <div class="datoto">Oficio: Conceder deseos</div> <div class="datoto">Edad: 2000 años</div> <div class="datoto">Orientación sexual: Una muy mágica</div> <div class="datoto">Cualquier dato que desees.</div> <div class="imatoto" style="background-image:url(https://i.imgur.com/vhUTYIo.png);"></div> </div> <div class="texti-con"> <div class="textinifero"> <div class="toria"><span class="colormagi">H</span>istoria</div> <div class="tititi">Lorem ipsum dolor sit amet consectetur adipiscing, elit luctus non vel felis consequat urna, mi ultrices faucibus quisque quam. Ac ornare vehicula varius cursus fusce primis, tristique venenatis cubilia nullam suspendisse ultricies, purus pharetra aenean facilisis habitant. Luctus sodales ridiculus a orci pharetra felis augue, ut dictumst litora nibh nec feugiat arcu vel, vivamus mauris quam hac malesuada non. <br><br> Aptent hendrerit fermentum ullamcorper gravida habitant, inceptos donec aenean euismod senectus ornare, pulvinar penatibus massa dui. Molestie turpis varius mauris ultricies fames vulputate sociosqu, mus nam senectus commodo inceptos ad aliquam, torquent eros vehicula egestas nunc quis.</div> </div> <div class="textinifero"> <div class="toria"><span class="colormagi">P</span>ersonalidad</div> <div class="tititi">Lorem ipsum dolor sit amet consectetur adipiscing, elit luctus non vel felis consequat urna, mi ultrices faucibus quisque quam. Ac ornare vehicula varius cursus fusce primis, tristique venenatis cubilia nullam suspendisse ultricies, purus pharetra aenean facilisis habitant. Luctus sodales ridiculus a orci pharetra felis augue, ut dictumst litora nibh nec feugiat arcu vel, vivamus mauris quam hac malesuada non.</div> </div> <div class="textinifero"> <div class="toria"><span class="colormagi">G</span>ustos y disgustos</div> <div class="tititi">Lorem ipsum dolor sit amet consectetur adipiscing, elit luctus non vel felis consequat urna, mi ultrices faucibus quisque quam. Ac ornare vehicula varius cursus fusce primis, tristique venenatis cubilia nullam suspendisse ultricies, purus pharetra aenean facilisis habitant. Luctus sodales ridiculus a orci pharetra felis augue, ut dictumst litora nibh nec feugiat arcu vel, vivamus mauris quam hac malesuada non.</div> </div> <div class="textinifero"> <div class="toria"><span class="colormagi">H</span>abilidades</div> <div class="tititi">Lorem ipsum dolor sit amet consectetur adipiscing, elit luctus non vel felis consequat urna, mi ultrices faucibus quisque quam. Ac ornare vehicula varius cursus fusce primis, tristique venenatis cubilia nullam suspendisse ultricies, purus pharetra aenean facilisis habitant. Luctus sodales ridiculus a orci pharetra felis augue, ut dictumst litora nibh nec feugiat arcu vel, vivamus mauris quam hac malesuada non.</div> </div> <div class="textinifero" style="margin:0;"> <div class="toria"><span class="colormagi">E</span>xtras</div> <div class="tititi">Lorem ipsum dolor sit amet consectetur adipiscing, elit luctus non vel felis consequat urna, mi ultrices faucibus quisque quam. Ac ornare vehicula varius cursus fusce primis, tristique venenatis cubilia nullam suspendisse ultricies, purus pharetra aenean facilisis habitant. Luctus sodales ridiculus a orci pharetra felis augue, ut dictumst litora nibh nec feugiat arcu vel, vivamus mauris quam hac malesuada non.</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 {--cya-color: #E2CC6C;} .lemonade {color: #222; background: transparent; height: 700px; width: 500px; margin: 25px auto; position: relative;} .red {background: var(--cya-color); height: 700px; width: 500px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 14%, 20% 0); position: absolute; top: 0px; left: 0;} .tringui {height:70px; width: 70px; background: var(--cya-color); position: absolute; top: 0px; left: 0; clip-path: polygon(0 0, 0% 100%, 100% 0);} .colormagi {color: var(--cya-color);} .texti-con {width: 280px; position: absolute; right: 25px; top: 25px; bottom: 25px; overflow: auto; padding-right: 10px;} .textinifero {background: #eee; width: 280px; height: auto; margin-bottom: 10px;} .toria {font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 100%; font-size: 20px; padding: 10px;} .tititi {font-size: 12px; font-family: 'Playfair Display', serif; line-height: 140%; padding: 0 15px 15px 15px; text-align: left;} .texti-con::-webkit-scrollbar {width: 5px;} .texti-con::-webkit-scrollbar-track {background: rgba(0,0,0,0.0);} .texti-con::-webkit-scrollbar-thumb {background: #eee;}#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;} .datagico {min-height: 50px; max-height: 550px; width: 150px; position: absolute; bottom: 25px; left: 25px;} .datoto {text-align: left;background: #eee; padding: 5px; font-family: Montserrat; font-weight: 500; font-size: 11px; margin-top: 5px; line-height: 135%;} .imatoto {height: 280px; width: 150px; background: peru; margin-top: 5px; background-size: cover;} ::selection{background: var(--cya-color);}</style>