HASHTAG

<div class="hashtag" style="background: url('IMAGEN AQUÍ')"> <center> <div class="moon3"><div class="night3"><i class="fas fa-hashtag"></i>NOMBRE PJ<div class="Ijust">Frase bonita no muy larga</div></div><div class="heaven3"> <a href=""> <i class="far fa-star"></i> FICHA</a><a href=""><i class="far fa-heart"></i> PERFIL</a></div></center></div><div class="gogo3">
<span>1.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare lectus vitae felis interdum, a fermentum turpis lacinia. Suspendisse risus erat, suscipit in dictum ac, dignissim feugiat urna. Suspendisse sed dapibus velit. Donec vel egestas ipsum. Quisque nulla nunc, gravida eu tincidunt ac, hendrerit vitae nisl. Phasellus nunc nunc, laoreet ullamcorper diam quis, suscipit maximus justo. Maecenas a tellus vel libero facilisis congue. Mauris laoreet ac eros tristique egestas. Etiam libero erat, sagittis non placerat vel, porttitor vel odio. Integer congue ex enim, et lobortis nunc ultricies sed.</div><div class="credits"><a href="https://therocketgirl-codes.tumblr.com/">- LILITH</a></div>


<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<style>.hashtag{width: 400px; height: 200px; background: #DFE7F1; border-left: 30px solid #D84C35; outline: 1px solid #fff; outline-offset: -8px;} .moon3{top: 80px; position: relative;} .night3{height: 50px; width: 260px; color: #fff; overflow: hidden; padding: 5px; font-size: 35px; font-family: Oswald; letter-spacing: 3px;} .night3 .fas{color: #D84C35;}.credits{font-size: 10px; text-align: right; width: 400px; font-family: Oswald; text-transform: lowercase; letter-spacing: 3px;} .credits a {color: #fff;} .Ijust{ letter-spacing: 1px; transition: 0.5s; font-size: 18px; margin-top: 30px; font-family: Anton; color: #D84C35; text-shadow: 0 0 4px #fff;} .hashtag:hover .night3{font-size: 25px; transition: 0.5s; outline: 1px solid #fff; text-transform: uppercase;} .hashtag:hover .Ijust{ transition: all 0.5s ease-in-out; margin-top: 0;}.heaven3{height: 20px; width: 230px; margin-top: 10px;} .heaven3 a{background: rgba(223, 231, 241,0.3); padding: 5px; margin-right: 5px; text-align: left; font-family: Oswald; color: #fff; letter-spacing: 3px;} .heaven3 .far{font-size: 15px; color: #D84C35; margin-left: 5px;} .heaven3 a:hover{background: #D84C35; color: #fff; transition: 0.5s;} .heaven3 a:hover .far{color: #fff; transition: 0.5s;} .gogo3{background: #fff; height: 300px; border-left: 30px solid #D84C35; width: 300px; padding: 0px 50px 40px 50px; text-align: justify; font-size: 11px; overflow: auto;} .gogo3 span{font-size: 20px; font-family: Anton; color: #D84C35}</style>