Neon Lights

Neon Lights code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Neon Lights</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>

2.style.css:

body { margin: 0; padding: 0; background: black; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; } ul li { position: relative; list-style: none; float: left; margin: 0 50px; height: 300px; width: 10px; background: white; } ul li::before { content: ''; position: absolute; top: -30px; left: 0; width: 100%; height: 30px; background: black; border-top-left-radius: 2px; border-top-right-radius: 2px; } ul li::after { content: ''; position: absolute; bottom: -30px; left: 0; width: 100%; height: 30px; background: black; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } ul li:nth-child(1) { background: pink; box-shadow: 0 0 80px pink, 0 0 80px pink, 0 0 80px pink; } ul li:nth-child(2) { background: greenyellow; box-shadow: 0 0 80px greenyellow, 0 0 80px greenyellow, 0 0 80px greenyellow; } ul li:nth-child(3) { background: red; box-shadow: 0 0 80px red, 0 0 80px red, 0 0 80px red; } ul li:nth-child(4) { background: rebeccapurple; box-shadow: 0 0 80px rebeccapurple, 0 0 80px rebeccapurple, 0 0 80px rebeccapurple; } ul li:nth-child(5) { background: gold; box-shadow: 0 0 80px gold, 0 0 80px gold, 0 0 80px gold; } ul li:nth-child(6) { background: aqua; box-shadow: 0 0 80px aqua, 0 0 80px aqua, 0 0 80px aqua; } ul li:hover { background: gray; box-shadow: none; }

Оставьте комментарий

Ваш адрес email не будет опубликован.