<div id="container"> <p> <span>RED</span></p> <p><span>BLUE</span></p> <p><span>Yellow</span></p> <p><span>GREEN</span></p> <p><span>ORANGE</span></p> <p><span>VIOLET</span></p> </div>
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700'); @import url('https://fonts.googleapis.com/css?family=Audiowide'); @import url('https://fonts.googleapis.com/css?family=Courgette'); @import url('https://fonts.googleapis.com/css?family=Permanent+Marker'); @import url('https://fonts.googleapis.com/css?family=Righteous'); @import url('https://fonts.googleapis.com/css?family=Frijole'); body { background-color: #222222; } #container { width: 100%; } /*Neon*/ p { text-align: center; font-size: 7em; margin: 20px 0 20px 0; } span { cursor:pointer; text-decoration: none; transition: all 0.5s; } p:nth-child(1) span { font-family: 'Ubuntu', sans-serif; color: #fff; animation: neon1 1.5s ease-in-out infinite alternate; font-weight:600; } p:nth-child(1) span:hover { color: #FF1177; animation: none; } p:nth-child(2) span { color: #228DFF; font-family: 'Audiowide', cursive; } p:nth-child(2) span:hover { animation: neon2 1.5s ease-in-out infinite alternate; } p:nth-child(3) span { color: #FFDD1B; font-family: 'Courgette', cursive; } p:nth-child(3) span:hover { animation: neon3 1.5s ease-in-out infinite alternate; } p:nth-child(4) span { color: #B6FF00; font-family: 'Permanent Marker', cursive; } p:nth-child(4) span:hover { animation: neon4 1.5s ease-in-out infinite alternate; } p:nth-child(5) span{ color: #FF9900; font-family: 'Righteous', cursive; } p:nth-child(5) span:hover { animation: neon5 1.5s ease-in-out infinite alternate; } p:nth-child(6) span { color: #BA01FF; font-family: 'Frijole', cursive; } p:nth-child(6) span:hover { animation: neon6 1.5s ease-in-out infinite alternate; } p span:hover { color: #ffffff; } @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; } } @media (max-width: 650px) { #container { width: 100%; } p { font-size: 3.5em; } }