<div id="container">
<a href="https://en.wikipedia.org/wiki/Red">
RED
</a>
<a href="https://en.wikipedia.org/wiki/Blue">
BLUE
</a>
<a href="https://en.wikipedia.org/wiki/Yellow">
Yellow
</a>
<a href="https://en.wikipedia.org/wiki/Green">
GREEN
</a>
<a href="https://en.wikipedia.org/wiki/Orange_(colour)">
ORANGE
</a>
<a href="https://en.wikipedia.org/wiki/Violet_(color)">
VIOLET
</a>
</div>
<div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:60px;padding:5px"><a href="http://www.f-rilling.com/projects/" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">My Site</a></div>
body {
background-color: #222222;
background: repeating-linear-gradient(
45deg,
#2b2b2b 0%,
#2b2b2b 10%,
#222222 0%,
#222222 50%
)
0 / 15px 15px;
}
#container {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 4rem;
}
/*Neon*/
a {
text-align: center;
font-size: 7em;
margin-bottom: 0;
margin-top: 0;
line-height: 1;
text-decoration: none;
color: #fff;
}
a:nth-child(1) {
font-family: Monoton;
animation: neon1 1.5s ease-in-out infinite alternate;
}
a:nth-child(2) {
font-family: Iceland;
animation: neon2 1.5s ease-in-out infinite alternate;
}
a:nth-child(3) {
font-family: Pacifico;
animation: neon3 1.5s ease-in-out infinite alternate;
}
a:nth-child(4) {
font-family: "Press Start 2P";
animation: neon4 1.5s ease-in-out infinite alternate;
}
a:nth-child(5) {
font-family: Audiowide;
animation: neon5 1.5s ease-in-out infinite alternate;
}
a:nth-child(6) {
font-family: Vampiro One;
animation: neon6 1.5s ease-in-out infinite alternate;
}
/*glow*/
@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
}
}
@keyframes neon2 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228dff,
0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff,
0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
}
}
@keyframes neon3 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffdd1b,
0 0 70px #ffdd1b, 0 0 80px #ffdd1b, 0 0 100px #ffdd1b, 0 0 150px #ffdd1b;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffdd1b,
0 0 35px #ffdd1b, 0 0 40px #ffdd1b, 0 0 50px #ffdd1b, 0 0 75px #ffdd1b;
}
}
@keyframes neon4 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00,
0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00,
0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
}
}
@keyframes neon5 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900,
0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900,
0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
}
}
@keyframes neon6 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de,
0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de,
0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
}
}
/*Make stuff responsive*/
@media (max-width: 650px) {
p {
font-size: 3.5em;
}
}
//Check out more cool stuff on my site: https://rilling.dev/
//if some fonts are not being loaded, reload the page
//all fonts hosted on google fonts: https://www.google.com/fonts
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.