[ Expediente ] White little dots

VERSIÓN CLARA
<link href="https://fonts.googleapis.com/css?family=Play:400,700&display=swap" rel="stylesheet"> <div class="cuentamas"> <div class="dimeloya" style="background-image:url(https://tc-pximg01.techorus-cdn.com/img-master/img/2019/04/22/19/55/01/74329184_p6_master1200.jpg);"></div> <div class="espacio-datil"> <span class="titulospacial2">Nombre completo: Aquí cabe un nombre aunque sea muy corto o muy largo.</span> <span class="titulospacial2">Edad: 1500 años / 25 aparentes.</span> <span class="titulospacial2">Raza: Ser bello y mágico.</span> <span class="titulospacial2">Nacionalidad: Cyalanense.</span> <span class="titulospacial2">Oficio: Coder de cocoro.</span> <span class="titulospacial2">Puedes agregar más, siempre y cuando no topen de cabeza con la imagen.</span> <span class="titulospacial2">¿Ves?</span> <span class="titulospacial2">¿Ves?</span> </div> <div class="espacio-textil"> <span class="titulospacial">Lorem ipsum dolor sit</span>AQUÍ VA TU TEXTO SEÑORITO</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.cuentamas {background: #ddd; height: 600px; width: 600px; margin: auto; position: relative; background-image:url(http://www.script-tutorials.com/demos/360/images/stars.png); background-size: cover; border-left: 15px solid #eee; font-family: 'Play', sans-serif; } #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;} .dimeloya {height: 150px; width: 150px;  -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ transform: rotate(-45deg); position: absolute; top: 50px; left: 50px; border: rgba(255,255,255,0.6) solid 20px; background-size: cover;} .espacio-textil {width: 280px; position: absolute; right: 15px; top: 15px; bottom: 15px; overflow: auto; color: #666; padding-right: 15px; font-size: 12px; line-height: 17px; text-align: justify;} .espacio-textil::-webkit-scrollbar { width: 5px; } .espacio-textil::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .espacio-textil::-webkit-scrollbar-thumb { background: #aaa!important;} .titulospacial {color: #666; display: block; background: rgba(255,255,255,0.4); padding: 5px 10px; border-left: #f5f5f5 5px solid; margin-bottom: 5px;} .titulospacial2 {color: #666; display: block; background: rgba(255,255,255,0.4); padding: 5px 10px; border-left: #f5f5f5 5px solid; margin-bottom: 5px; font-size: 13px; line-height: 15px; text-align: left;} .espacio-datil {width: 255px; height: auto; position: absolute; bottom: 15px; left: 15px;}</style>

VERSIÓN OSCURA
<link href="https://fonts.googleapis.com/css?family=Play:400,700&display=swap" rel="stylesheet"> <div class="cuentamas"> <div class="dimeloya" style="background-image:url(https://tc-pximg01.techorus-cdn.com/img-master/img/2019/04/22/19/55/01/74329184_p6_master1200.jpg);"></div> <div class="espacio-datil"> <span class="titulospacial2">Nombre completo: Aquí cabe un nombre aunque sea muy corto o muy largo.</span> <span class="titulospacial2">Edad: 1500 años / 25 aparentes.</span> <span class="titulospacial2">Raza: Ser bello y mágico.</span> <span class="titulospacial2">Nacionalidad: Cyalanense.</span> <span class="titulospacial2">Oficio: Coder de cocoro.</span> <span class="titulospacial2">Puedes agregar más, siempre y cuando no topen de cabeza con la imagen.</span> <span class="titulospacial2">¿Ves?</span> <span class="titulospacial2">¿Ves?</span> </div> <div class="espacio-textil"> <span class="titulospacial">Lorem ipsum dolor sit</span> AQUÍ VA TU BELLÍSIMO TEXTO</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.cuentamas {background: #222; height: 600px; width: 600px; margin: auto; position: relative; background-image:url(http://www.script-tutorials.com/demos/360/images/stars.png); background-size: cover; border-left: 15px solid #111; font-family: 'Play', sans-serif; } #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;} .dimeloya {height: 150px; width: 150px;  -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ transform: rotate(-45deg); position: absolute; top: 50px; left: 50px; border: rgba(0,0,0,0.6) solid 20px; background-size: cover;} .espacio-textil {width: 280px; position: absolute; right: 15px; top: 15px; bottom: 15px; overflow: auto; color: #999; padding-right: 15px; font-size: 12px; line-height: 17px; text-align: justify;} .espacio-textil::-webkit-scrollbar { width: 5px; } .espacio-textil::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .espacio-textil::-webkit-scrollbar-thumb { background: #333;} .titulospacial {color: #ccc; display: block; background: rgba(0,0,0,0.2); padding: 5px 10px; border-left: #999 5px solid; margin-bottom: 5px;} .titulospacial2 {color: #aaa; display: block; background: rgba(0,0,0,0.2); padding: 5px 10px; border-left: #999 5px solid; margin-bottom: 5px; font-size: 13px; line-height: 15px; text-align: left;} .espacio-datil {width: 255px; height: auto; position: absolute; bottom: 15px; left: 15px;}</style>