[ Expediente ] Black stars

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