Skip to content

Commit 602670a

Browse files
brandonmay-devbrandonmay-dev
authored
Animatron (#3339)
* adding my artsyness to the project * renamed css file * updated stylesheet link * deleted gif and adding png * removed icon * code clean up
1 parent 9a0c3c0 commit 602670a

3 files changed

Lines changed: 91 additions & 0 deletions

File tree

‎Art/brandonmay-dev-solarsystem/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Orbit</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
10+
<div class="space">
11+
<div class="sun"></div>
12+
13+
<div class="orbit o1">
14+
<div class="planet p1"></div>
15+
</div>
16+
17+
<div class="orbit o2">
18+
<div class="planet p2"></div>
19+
</div>
20+
</div>
21+
22+
</body>
23+
</html>

‎Art/brandonmay-dev-solarsystem/meta.json‎

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

‎Art/brandonmay-dev-solarsystem/styles.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: grid;
5+
place-items: center;
6+
background: #050b1f;
7+
}
8+
9+
.space {
10+
position: relative;
11+
width: 300px;
12+
height: 300px;
13+
}
14+
15+
.sun {
16+
position: absolute;
17+
inset: 0;
18+
margin: auto;
19+
width: 60px;
20+
height: 60px;
21+
border-radius: 50%;
22+
background: orange;
23+
box-shadow: 0 0 40px orange;
24+
}
25+
26+
.orbit {
27+
position: absolute;
28+
inset: 0;
29+
margin: auto;
30+
border: 1px solid rgba(255,255,255,0.2);
31+
border-radius: 50%;
32+
animation: spin linear infinite;
33+
}
34+
35+
.o1 {
36+
width: 140px;
37+
height: 140px;
38+
animation-duration: 4s;
39+
}
40+
41+
.o2 {
42+
width: 220px;
43+
height: 220px;
44+
animation-duration: 7s;
45+
}
46+
47+
.planet {
48+
width: 14px;
49+
height: 14px;
50+
border-radius: 50%;
51+
background: cyan;
52+
position: absolute;
53+
top: -7px;
54+
left: 50%;
55+
transform: translateX(-50%);
56+
}
57+
58+
.p2 {
59+
background: hotpink;
60+
}
61+
62+
@keyframes spin {
63+
to { transform: rotate(360deg); }
64+
}

0 commit comments

Comments
 (0)