Skip to content

Commit 5e268a7

Browse files
Vishnu3377Vishnu3377
authored
adding my art to the project (#2955)
* adding my art to the project * Updated folder name and GitHub handle as per feedback
1 parent d9d19e6 commit 5e268a7

File tree

3 files changed

+133
-0
lines changed

3 files changed

+133
-0
lines changed

‎Art/Vishnu3377-Galactic-orbit/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Galactic Orbit</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<div class="solar-system">
10+
<div class="sun"></div>
11+
12+
<div class="orbit orbit1">
13+
<div class="planet planet1"></div>
14+
</div>
15+
16+
<div class="orbit orbit2">
17+
<div class="planet planet2"></div>
18+
</div>
19+
20+
<div class="orbit orbit3">
21+
<div class="planet planet3"></div>
22+
</div>
23+
24+
<div class="orbit orbit4">
25+
<div class="planet planet4"></div>
26+
</div>
27+
</div>
28+
</body>
29+
</html>
30+

‎Art/Vishnu3377-Galactic-orbit/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "galactic-orbits",
3+
"githubHandle": "Vishnu3377"
4+
}

‎Art/Vishnu3377-Galactic-orbit/styles.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
body {
2+
background: radial-gradient(#000 40%, #0a0a23);
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
margin: 0;
8+
overflow: hidden;
9+
}
10+
11+
.solar-system {
12+
position: relative;
13+
width: 400px;
14+
height: 400px;
15+
}
16+
17+
.sun {
18+
width: 60px;
19+
height: 60px;
20+
background: radial-gradient(circle, #ffcc00, #ff9900, #ff3300);
21+
border-radius: 50%;
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
transform: translate(-50%, -50%);
26+
box-shadow: 0 0 30px #ffaa00, 0 0 60px #ff6600;
27+
}
28+
29+
.orbit {
30+
position: absolute;
31+
top: 50%;
32+
left: 50%;
33+
border: 1px dashed rgba(255, 255, 255, 0.1);
34+
border-radius: 50%;
35+
transform: translate(-50%, -50%);
36+
}
37+
38+
.orbit1 {
39+
width: 100px;
40+
height: 100px;
41+
animation: rotate 6s linear infinite;
42+
}
43+
44+
.orbit2 {
45+
width: 160px;
46+
height: 160px;
47+
animation: rotate 10s linear infinite;
48+
}
49+
50+
.orbit3 {
51+
width: 220px;
52+
height: 220px;
53+
animation: rotate 14s linear infinite;
54+
}
55+
56+
.orbit4 {
57+
width: 280px;
58+
height: 280px;
59+
animation: rotate 20s linear infinite;
60+
}
61+
62+
.planet {
63+
width: 16px;
64+
height: 16px;
65+
border-radius: 50%;
66+
position: absolute;
67+
top: 50%;
68+
left: 100%;
69+
transform: translate(-50%, -50%);
70+
}
71+
72+
.planet1 {
73+
background: #00ffff;
74+
box-shadow: 0 0 10px #00ffff;
75+
}
76+
77+
.planet2 {
78+
background: #ff00ff;
79+
box-shadow: 0 0 10px #ff00ff;
80+
}
81+
82+
.planet3 {
83+
background: #00ff00;
84+
box-shadow: 0 0 10px #00ff00;
85+
}
86+
87+
.planet4 {
88+
background: #ffffff;
89+
box-shadow: 0 0 10px #ffffff;
90+
}
91+
92+
@keyframes rotate {
93+
from {
94+
transform: translate(-50%, -50%) rotate(0deg);
95+
}
96+
to {
97+
transform: translate(-50%, -50%) rotate(360deg);
98+
}
99+
}

0 commit comments

Comments
 (0)