Skip to content

Commit c70cc30

Browse files
Kavya-Jain-coderKavya-Jain-coder
authored
add Aurora Borealis (#3289)
1 parent d68c2df commit c70cc30

3 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎Art/Kavya-Jain-coder-Aurora-Borealis/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Aurora Borealis</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="sky">
11+
<div class="stars"></div>
12+
<div class="aurora aurora1"></div>
13+
<div class="aurora aurora2"></div>
14+
<div class="aurora aurora3"></div>
15+
<div class="mountain mountain1"></div>
16+
<div class="mountain mountain2"></div>
17+
<div class="mountain mountain3"></div>
18+
</div>
19+
</body>
20+
</html>

‎Art/Kavya-Jain-coder-Aurora-Borealis/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "aurora-borealis",
3+
"githubHandle": "Kavya-Jain-coder"
4+
}

‎Art/Kavya-Jain-coder-Aurora-Borealis/styles.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
overflow: hidden;
9+
background: #000;
10+
}
11+
12+
.sky {
13+
position: relative;
14+
width: 100vw;
15+
height: 100vh;
16+
background: linear-gradient(to bottom, #0a1128 0%, #001f3f 50%, #1a1a2e 100%);
17+
}
18+
19+
.stars {
20+
position: absolute;
21+
width: 100%;
22+
height: 100%;
23+
background-image:
24+
radial-gradient(2px 2px at 20px 30px, white, transparent),
25+
radial-gradient(2px 2px at 60px 70px, white, transparent),
26+
radial-gradient(1px 1px at 50px 50px, white, transparent),
27+
radial-gradient(1px 1px at 130px 80px, white, transparent),
28+
radial-gradient(2px 2px at 90px 10px, white, transparent),
29+
radial-gradient(1px 1px at 200px 100px, white, transparent),
30+
radial-gradient(2px 2px at 150px 50px, white, transparent),
31+
radial-gradient(1px 1px at 180px 80px, white, transparent);
32+
background-size: 200px 200px;
33+
background-repeat: repeat;
34+
animation: twinkle 3s ease-in-out infinite;
35+
}
36+
37+
@keyframes twinkle {
38+
0%, 100% {
39+
opacity: 1;
40+
}
41+
50% {
42+
opacity: 0.7;
43+
}
44+
}
45+
46+
.aurora {
47+
position: absolute;
48+
width: 100%;
49+
height: 300px;
50+
top: 10%;
51+
filter: blur(40px);
52+
opacity: 0.7;
53+
mix-blend-mode: screen;
54+
}
55+
56+
.aurora1 {
57+
background: linear-gradient(90deg,
58+
transparent 0%,
59+
rgba(0, 255, 150, 0.4) 20%,
60+
rgba(0, 200, 255, 0.4) 40%,
61+
rgba(100, 150, 255, 0.4) 60%,
62+
rgba(200, 100, 255, 0.4) 80%,
63+
transparent 100%);
64+
animation: wave1 15s ease-in-out infinite;
65+
}
66+
67+
.aurora2 {
68+
background: linear-gradient(90deg,
69+
transparent 0%,
70+
rgba(100, 255, 200, 0.3) 25%,
71+
rgba(150, 100, 255, 0.3) 50%,
72+
rgba(255, 150, 200, 0.3) 75%,
73+
transparent 100%);
74+
animation: wave2 18s ease-in-out infinite;
75+
top: 15%;
76+
}
77+
78+
.aurora3 {
79+
background: linear-gradient(90deg,
80+
transparent 0%,
81+
rgba(0, 255, 255, 0.3) 30%,
82+
rgba(200, 150, 255, 0.3) 60%,
83+
transparent 100%);
84+
animation: wave3 20s ease-in-out infinite;
85+
top: 20%;
86+
}
87+
88+
@keyframes wave1 {
89+
0%, 100% {
90+
transform: translateX(-50%) skewX(10deg);
91+
}
92+
25% {
93+
transform: translateX(-30%) skewX(-5deg);
94+
}
95+
50% {
96+
transform: translateX(0%) skewX(8deg);
97+
}
98+
75% {
99+
transform: translateX(30%) skewX(-8deg);
100+
}
101+
}
102+
103+
@keyframes wave2 {
104+
0%, 100% {
105+
transform: translateX(50%) skewX(-10deg);
106+
}
107+
25% {
108+
transform: translateX(30%) skewX(5deg);
109+
}
110+
50% {
111+
transform: translateX(0%) skewX(-8deg);
112+
}
113+
75% {
114+
transform: translateX(-30%) skewX(8deg);
115+
}
116+
}
117+
118+
@keyframes wave3 {
119+
0%, 100% {
120+
transform: translateX(0%) skewX(5deg);
121+
}
122+
33% {
123+
transform: translateX(40%) skewX(-10deg);
124+
}
125+
66% {
126+
transform: translateX(-40%) skewX(10deg);
127+
}
128+
}
129+
130+
.mountain {
131+
position: absolute;
132+
bottom: 0;
133+
width: 0;
134+
height: 0;
135+
border-style: solid;
136+
}
137+
138+
.mountain1 {
139+
left: -10%;
140+
border-width: 0 300px 400px 300px;
141+
border-color: transparent transparent #0a0a1a transparent;
142+
}
143+
144+
.mountain2 {
145+
left: 20%;
146+
border-width: 0 400px 500px 400px;
147+
border-color: transparent transparent #050510 transparent;
148+
}
149+
150+
.mountain3 {
151+
right: -10%;
152+
border-width: 0 350px 450px 350px;
153+
border-color: transparent transparent #0f0f20 transparent;
154+
}

0 commit comments

Comments
 (0)