<div class="logo"><b>S<span>h</span>owG<span>i</span>rls</b></div>
<a href="https://x.com/nodws" id="btn-twtr" target="_b">Follow me on X</a>
@import url(//fonts.googleapis.com/css?family=Vibur);
html,body{
height:100%
}
body {
background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) center no-repeat;
background-size:cover;
margin:0
}
.logo {
text-align: center;
width: 65%;
height: 250px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
user-select: none;
}
.logo b{
font: 400 19vh "Vibur";
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
.logo b span{
animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
animation: blink linear infinite 3s;
}
@keyframes blink {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}
/* follow me @nodws */
#btn-twtr{
clear:both;
color:#fff;
border:2px solid;
border-radius:3px;
text-align:center;
text-decoration:none;
display:block;
font-family:sans-serif;
font-size:14px;
width:13em;
padding:5px 10px;
font-weight:600;
position:absolute;
bottom:20px;
left:0;
right:0;
margin:0 auto;
background:rgba(0,0,0,0.2);
box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
opacity:0.4
}#btn-twtr:hover{color:#fff;opacity:1}
// https://dribbble.com/shots/2955075-Neon-Sign-in-CSS
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.