Skip to content

Commit b973e1f

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent 6f48acf commit b973e1f

5 files changed

Lines changed: 99 additions & 81 deletions

File tree

‎Art/phaamdeen-astronaut/animation-html/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<link rel="stylesheet" href="styles/style.css">
5-
</head>
6-
<body>
3+
<head>
4+
<link rel="stylesheet" href="styles/style.css" />
5+
</head>
6+
<body>
77
<div class="space-container">
8-
<div class="stars"></div>
9-
<div class="astronaut">👩‍🚀</div>
8+
<div class="stars"></div>
9+
<div class="astronaut">👩‍🚀</div>
1010
</div>
11-
</body>
12-
</html>
11+
</body>
12+
</html>

‎Art/phaamdeen-astronaut/animation-html/styles/style.css‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,61 @@
11
/* Basic Reset */
2-
body, html {
3-
margin: 0;
4-
padding: 0;
5-
height: 100%;
6-
overflow: hidden;
7-
background-color: #050505;
2+
body,
3+
html {
4+
margin: 0;
5+
padding: 0;
6+
height: 100%;
7+
overflow: hidden;
8+
background-color: #050505;
89
}
910

1011
/* 1. The Space Background */
1112
.space-container {
12-
width: 100vw;
13-
height: 100vh;
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
17-
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
13+
width: 100vw;
14+
height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
1819
}
1920

2021
/* 2. The Floating Astronaut */
2122
.astronaut {
22-
font-size: 80px;
23-
position: relative;
24-
/* Apply the 'float' animation: 3 seconds, infinite loop, smooth easing */
25-
animation: float 4s ease-in-out infinite;
23+
font-size: 80px;
24+
position: relative;
25+
/* Apply the 'float' animation: 3 seconds, infinite loop, smooth easing */
26+
animation: float 4s ease-in-out infinite;
2627
}
2728

2829
/* 3. Defining the Float Animation */
2930
@keyframes float {
30-
0% {
31-
transform: translateY(0px) rotate(0deg);
32-
}
33-
50% {
34-
transform: translateY(-50px) rotate(10deg);
35-
}
36-
100% {
37-
transform: translateY(0px) rotate(0deg);
38-
}
31+
0% {
32+
transform: translateY(0px) rotate(0deg);
33+
}
34+
50% {
35+
transform: translateY(-50px) rotate(10deg);
36+
}
37+
100% {
38+
transform: translateY(0px) rotate(0deg);
39+
}
3940
}
4041

4142
/* 4. Moving Stars background */
4243
.stars {
43-
position: absolute;
44-
top: 0; left: 0; right: 0; bottom: 0;
45-
background: transparent url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
46-
animation: move-stars 100s linear infinite;
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background: transparent
50+
url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
51+
animation: move-stars 100s linear infinite;
4752
}
4853

4954
@keyframes move-stars {
50-
from { background-position: 0 0; }
51-
to { background-position: -10000px 5000px; }
52-
}
55+
from {
56+
background-position: 0 0;
57+
}
58+
to {
59+
background-position: -10000px 5000px;
60+
}
61+
}

‎Art/phaamdeen-astronaut/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<link rel="stylesheet" href="styles.css">
5-
</head>
6-
<body>
3+
<head>
4+
<link rel="stylesheet" href="styles.css" />
5+
</head>
6+
<body>
77
<div class="space-container">
8-
<div class="stars"></div>
9-
<div class="astronaut">👩‍🚀</div>
8+
<div class="stars"></div>
9+
<div class="astronaut">👩‍🚀</div>
1010
</div>
11-
</body>
12-
</html>
11+
</body>
12+
</html>

‎Art/phaamdeen-astronaut/meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"artName": "astronaut",
33
"githubHandle": "phaamdeen"
4-
}
4+
}

‎Art/phaamdeen-astronaut/styles.css‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,61 @@
11
/* Basic Reset */
2-
body, html {
3-
margin: 0;
4-
padding: 0;
5-
height: 100%;
6-
overflow: hidden;
7-
background-color: #050505;
2+
body,
3+
html {
4+
margin: 0;
5+
padding: 0;
6+
height: 100%;
7+
overflow: hidden;
8+
background-color: #050505;
89
}
910

1011
/* 1. The Space Background */
1112
.space-container {
12-
width: 100vw;
13-
height: 100vh;
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
17-
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
13+
width: 100vw;
14+
height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
1819
}
1920

2021
/* 2. The Floating Astronaut */
2122
.astronaut {
22-
font-size: 80px;
23-
position: relative;
24-
/* Apply the 'float' animation: 3 seconds, infinite loop, smooth easing */
25-
animation: float 4s ease-in-out infinite;
23+
font-size: 80px;
24+
position: relative;
25+
/* Apply the 'float' animation: 3 seconds, infinite loop, smooth easing */
26+
animation: float 4s ease-in-out infinite;
2627
}
2728

2829
/* 3. Defining the Float Animation */
2930
@keyframes float {
30-
0% {
31-
transform: translateY(0px) rotate(0deg);
32-
}
33-
50% {
34-
transform: translateY(-50px) rotate(10deg);
35-
}
36-
100% {
37-
transform: translateY(0px) rotate(0deg);
38-
}
31+
0% {
32+
transform: translateY(0px) rotate(0deg);
33+
}
34+
50% {
35+
transform: translateY(-50px) rotate(10deg);
36+
}
37+
100% {
38+
transform: translateY(0px) rotate(0deg);
39+
}
3940
}
4041

4142
/* 4. Moving Stars background */
4243
.stars {
43-
position: absolute;
44-
top: 0; left: 0; right: 0; bottom: 0;
45-
background: transparent url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
46-
animation: move-stars 100s linear infinite;
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background: transparent
50+
url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
51+
animation: move-stars 100s linear infinite;
4752
}
4853

4954
@keyframes move-stars {
50-
from { background-position: 0 0; }
51-
to { background-position: -10000px 5000px; }
52-
}
55+
from {
56+
background-position: 0 0;
57+
}
58+
to {
59+
background-position: -10000px 5000px;
60+
}
61+
}

0 commit comments

Comments
 (0)