Skip to content

Commit 3abfb1a

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request #446 from RAHULBAWA777/patch-81
Neon Lights
2 parents b01573c + d45d777 commit 3abfb1a

File tree

3 files changed

+190
-0
lines changed

3 files changed

+190
-0
lines changed

‎neon lights/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# Neon Lights
3+
4+
## 🚀 About Me
5+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
6+
7+
8+
## Run Locally
9+
10+
Clone the project
11+
12+
13+
Start the live server
14+
15+
16+
## Used By
17+
18+
This project is used by the following companies:
19+
20+
-https://github.com/Dezenix/frontend-html-css-js

‎neon lights/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Neon Lights</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div id="container">
12+
13+
<a href="https://github.com/Dezenix/frontend-html-css-js">
14+
D
15+
</a>
16+
17+
<a href="https://github.com/Dezenix/frontend-html-css-js">
18+
E
19+
</a>
20+
21+
<a href="https://github.com/Dezenix/frontend-html-css-js">
22+
Z
23+
</a>
24+
25+
<a href="https://github.com/Dezenix/frontend-html-css-js">
26+
E
27+
</a>
28+
29+
<a href="https://github.com/Dezenix/frontend-html-css-js">
30+
N
31+
</a>
32+
33+
<a href="https://github.com/Dezenix/frontend-html-css-js">
34+
I
35+
</a>
36+
<a href="https://github.com/Dezenix/frontend-html-css-js">
37+
X
38+
</a>
39+
40+
</div>
41+
42+
</body>
43+
</html>

‎neon lights/style.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
body {
2+
background-color: #000000;
3+
}
4+
5+
#container {
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
a:nth-child(1) {
11+
animation: one 1.5s ease-in-out infinite alternate;
12+
}
13+
14+
a:nth-child(2) {
15+
animation: two 1.5s ease-in-out infinite alternate;
16+
}
17+
18+
a:nth-child(3) {
19+
animation: three 1.5s ease-in-out infinite alternate;
20+
}
21+
22+
a:nth-child(4) {
23+
animation: four 1.5s ease-in-out infinite alternate;
24+
}
25+
26+
a:nth-child(5) {
27+
animation: five 1.5s ease-in-out infinite alternate;
28+
}
29+
30+
a:nth-child(6) {
31+
animation: six 1.5s ease-in-out infinite alternate;
32+
}
33+
a:nth-child(7) {
34+
animation: seven 1.5s ease-in-out infinite alternate;
35+
}
36+
37+
a {
38+
text-align: center;
39+
font-size: 10rem;
40+
text-decoration: none;
41+
color: #fff;
42+
}
43+
44+
45+
@keyframes one {
46+
from {
47+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #11dfff,
48+
0 0 70px #11dfff, 0 0 80px #11dfff, 0 0 100px #11dfff, 0 0 150px #11dfff;
49+
}
50+
to {
51+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px #11dfff,
52+
0 0 35px #11dfff, 0 0 40px #11dfff, 0 0 50px #11dfff, 0 0 75px #11dfff;
53+
}
54+
}
55+
56+
@keyframes two {
57+
from {
58+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px pink,
59+
0 0 70px pink, 0 0 80px pink, 0 0 100px pink, 0 0 150px pink;
60+
}
61+
to {
62+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px pink,
63+
0 0 35px pink, 0 0 40px pink, 0 0 50px pink, 0 0 75px pink;
64+
}
65+
}
66+
67+
@keyframes three {
68+
from {
69+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px gold,
70+
0 0 70px gold, 0 0 80px gold, 0 0 100px gold, 0 0 150px gold;
71+
}
72+
to {
73+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px gold,
74+
0 0 35px gold, 0 0 40px gold, 0 0 50px gold, 0 0 75px gold;
75+
}
76+
}
77+
78+
@keyframes four {
79+
from {
80+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px purple,
81+
0 0 70px purple, 0 0 80px purple, 0 0 100px purple, 0 0 150px purple;
82+
}
83+
to {
84+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px purple,
85+
0 0 35px purple, 0 0 40px purple, 0 0 50px purple, 0 0 75px purple;
86+
}
87+
}
88+
89+
@keyframes five {
90+
from {
91+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ff11,
92+
0 0 70px #00ff11, 0 0 80px #00ff11, 0 0 100px #00ff11, 0 0 150px #00ff11;
93+
}
94+
to {
95+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px #00ff11,
96+
0 0 35px #00ff11, 0 0 40px #00ff11, 0 0 50px #00ff11, 0 0 75px #00ff11;
97+
}
98+
}
99+
100+
@keyframes six {
101+
from {
102+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de,
103+
0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
104+
}
105+
to {
106+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px #ff00de,
107+
0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
108+
}
109+
}
110+
@keyframes seven {
111+
from {
112+
text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0effcb,
113+
0 0 70px #0effcb, 0 0 80px #0effcb, 0 0 100px #0effcb, 0 0 150px #0effcb;
114+
}
115+
to {
116+
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 20px #0effcb,
117+
0 0 35px #0effcb, 0 0 40px #0effcb, 0 0 50px #0effcb, 0 0 75px #0effcb;
118+
}
119+
}
120+
121+
122+
@media (max-width: 650px) {
123+
p {
124+
font-size: 3rem;
125+
}
126+
}
127+

0 commit comments

Comments
 (0)