Stella

<link href="https://fonts.googleapis.com/css?family=Anton|Roboto|Lobster&display=swap" rel="stylesheet"> <div class="Spuki"> <div class="Shibuya"></div> <div class="Stella" style="background: url(https://via.placeholder.com/100x100)"></div> <div class="Ra">TITULO GUAPO AQUÍ <div style="color: #9F60B8; line-height: 12px;">que se extiende así así. </div></div> <div class="jamon">Hora - Lugar - con XXXXX & XXXXX.</div> <div class="spooky">TEXTO TEXTO TEXTO </div><a class="Star" href="https://thewitchlies.tumblr.com/">— code by w</a></div><style>body{ background: #000; } .Spuki { width: 450px; height: auto; border: none; border-top: 55px solid #9F60B8; border-bottom: 55px solid #9F60B8; margin: 0 auto; padding: 20px; background: #fafafa; margin-top: 10px;  } .Shibuya { width: 100px; height: 100px; border-radius: 50%; border: 12px solid #fafafa; border-bottom: 10px dotted #9F60B8; border-right: 10px dotted #9F60B8; position: relative; top: 15px; animation: dottes 6s infinite linear; padding: 10px; } @keyframes dottes {0%{-webkit-transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);}} .Stella { width: 100px; height: 100px; border-radius: 50%; position: absolute; margin-top: -108px; margin-left: 20px; } .Ra { color: #fafafa; font-family: Anton; font-size: 35px; position: absolute; margin-top: -200px; margin-left: 100px; width: 350px; height: auto; text-align: right; text-transform: uppercase; line-height: 48px; } .jamon { width: 260px; height: auto; border: .7px solid #9F60B8; padding: 15px; font-size: 10px; text-align: center; font-family: Lato; letter-spacing: 1px; position: absolute; margin-top: -80px; margin-left: 159px; text-transform: uppercase; } .spooky { color: #0e0e0e; font-size: 10px; font-family: Lato; text-align: justify; position: relative; padding: 20px; top: 15px; } a.Star { color: #fafafa; font-family: Anton; font-size: 10px; position: relative; top: 55px;}</style>