Skip to content

Commit 2eb5203

Browse files
MattCSmithMattCSmith
authored
Merge pull request #2867 from DEREKFERRER/challenge
added my artwork
2 parents 90cb4d5 + 1eecc7b commit 2eb5203

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎Art/DEREKFERRER-movingCircle/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Document</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="circle-one"></div>
12+
<div class="circle-two"></div>
13+
<div class="circle-three"></div>
14+
<div class="circle-four"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/DEREKFERRER-movingCircle/meta.json‎

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

‎Art/DEREKFERRER-movingCircle/styles.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
body {
2+
background-color: rgb(30, 112, 61);
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
}
8+
9+
.container {
10+
width: 100%;
11+
height: 50%;
12+
position: relative;
13+
background-color: aqua;
14+
border-radius: 10px;
15+
box-shadow: 1px 1px 20px 5px;
16+
}
17+
18+
.circle-one {
19+
top: 20px;
20+
left: 20px;
21+
position: absolute;
22+
background-color:rgb(12, 12, 12);
23+
border-radius: 100%;
24+
width: 25px;
25+
height: 25px;
26+
animation-name: circleOne;
27+
animation-duration: 3s;
28+
animation-iteration-count: infinite;
29+
}
30+
31+
@keyframes circleOne {
32+
0% {background-color: red; left: 2%; top: 2%;}
33+
25% {background-color: green; left: 92%; top: 2%;}
34+
75% {background-color: yellow; left: 3%; top: 90%;}
35+
}
36+
37+
.circle-two {
38+
bottom: 20px;
39+
right: 20px;
40+
position: absolute;
41+
background-color:rgb(12, 12, 12);
42+
border-radius: 100%;
43+
width: 25px;
44+
height: 25px;
45+
animation-name: circleTwo;
46+
animation-duration: 3s;
47+
animation-iteration-count: infinite;
48+
}
49+
50+
@keyframes circleTwo {
51+
0% {background-color: red; right: 2%; bottom: 2%;}
52+
25% {background-color: green; right: 92%; bottom: 2%;}
53+
75% {background-color: yellow; right: 3%; bottom: 90%;}
54+
}
55+
56+
.circle-three {
57+
top: 20px;
58+
right: 20px;
59+
position: absolute;
60+
background-color:rgb(12, 12, 12);
61+
border-radius: 100%;
62+
width: 25px;
63+
height: 25px;
64+
animation-name: circleThree;
65+
animation-duration: 3s;
66+
animation-iteration-count: infinite;
67+
}
68+
69+
@keyframes circleThree {
70+
0% {background-color: red; right: 2%; top: 2%;}
71+
25% {background-color: green; right: 92%; top: 2%;}
72+
75% {background-color: yellow; right: 3%; top: 90%;}
73+
}
74+
75+
.circle-four {
76+
bottom: 20px;
77+
left: 20px;
78+
position: absolute;
79+
background-color:rgb(12, 12, 12);
80+
border-radius: 100%;
81+
width: 25px;
82+
height: 25px;
83+
animation-name: circleFour;
84+
animation-duration: 3s;
85+
animation-iteration-count: infinite;
86+
}
87+
88+
@keyframes circleFour {
89+
0% {background-color: red; left: 2%; bottom: 2%;}
90+
25% {background-color: green; left: 92%; bottom: 2%;}
91+
75% {background-color: yellow; left: 3%; bottom: 90%;}
92+
}
93+
94+
@media (min-width: 700px) {
95+
.container {
96+
margin: 20px;
97+
}
98+
@keyframes circleOne {
99+
0% {background-color: red; left: 2%; top: 2%;}
100+
25% {background-color: green; left: 95%; top: 2%;}
101+
75% {background-color: yellow; left: 2%; top: 92%;}
102+
}
103+
104+
@keyframes circleTwo {
105+
0% {background-color: red; right: 2%; bottom: 2%;}
106+
25% {background-color: green; right: 95%; bottom: 2%;}
107+
75% {background-color: yellow; right: 2%; bottom: 92%;}
108+
}
109+
110+
@keyframes circleThree {
111+
0% {background-color: red; right: 2%; top: 2%;}
112+
25% {background-color: green; right: 95%; top: 2%;}
113+
75% {background-color: yellow; right: 2%; top: 92%;}
114+
}
115+
116+
@keyframes circleFour {
117+
0% {background-color: red; left: 2%; bottom: 2%;}
118+
25% {background-color: green; left: 92%; bottom: 2%;}
119+
75% {background-color: yellow; left: 2%; bottom: 92%;}
120+
}
121+
122+
}
123+
124+
@media (min-width: 1000px) {
125+
.container {
126+
width: 50%;
127+
}
128+
@keyframes circleOne {
129+
0% {background-color: red; left: 2%; top: 2%;}
130+
25% {background-color: green; left: 95%; top: 2%;}
131+
75% {background-color: yellow; left: 2%; top: 87.5%;}
132+
}
133+
134+
@keyframes circleTwo {
135+
0% {background-color: red; right: 2%; bottom: 2%;}
136+
25% {background-color: green; right: 95%; bottom: 2%;}
137+
75% {background-color: yellow; right: 2%; bottom: 87.5%;}
138+
}
139+
140+
@keyframes circleThree {
141+
0% {background-color: red; right: 2%; top: 2%;}
142+
25% {background-color: green; right: 95%; top: 2%;}
143+
75% {background-color: yellow; right: 2%; top: 87.5%;}
144+
}
145+
146+
@keyframes circleFour {
147+
0% {background-color: red; left: 2%; bottom: 2%;}
148+
25% {background-color: green; left: 92%; bottom: 2%;}
149+
75% {background-color: yellow; left: 2%; bottom: 87.5%;}
150+
}
151+
}

0 commit comments

Comments
 (0)