Skip to content

Commit 95b7413

Browse files
3nn3nLaurelineP
3nn3n
and
LaurelineP
authored
Added 3nn3n-messivsronaldo (#2909)
Co-authored-by: Laureline Paris <[email protected]>
1 parent 56b006c commit 95b7413

File tree

3 files changed

+120
-0
lines changed

3 files changed

+120
-0
lines changed

‎Art/3nn3n-messivsronaldo/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Football Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="pitch">
11+
<div class="goal left"></div>
12+
<div class="goal right"></div>
13+
<div class="ball"></div>
14+
<div class="player player1"></div>
15+
<div class="player player2"></div>
16+
<div class="player player3"></div>
17+
<div class="player player4"></div>
18+
19+
</div>
20+
</body>
21+
</html>

‎Art/3nn3n-messivsronaldo/meta.json

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

‎Art/3nn3n-messivsronaldo/styles.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
margin: 0;
6+
height: 100vh;
7+
background-color: #aad751;
8+
overflow: hidden;
9+
}
10+
11+
.pitch {
12+
width: 90%;
13+
height: 60%;
14+
background-color: #6ab04c;
15+
border: 5px solid white;
16+
position: relative;
17+
}
18+
19+
.goal {
20+
width: 10px;
21+
height: 100px;
22+
background-color: white;
23+
position: absolute;
24+
top: 50%;
25+
transform: translateY(-50%);
26+
}
27+
28+
.goal.left {
29+
left: 0;
30+
}
31+
32+
.goal.right {
33+
right: 0;
34+
}
35+
36+
37+
.ball {
38+
width: 20px;
39+
height: 20px;
40+
background-color: white;
41+
border: 2px solid black;
42+
border-radius: 50%;
43+
position: absolute;
44+
top: 50%;
45+
left: 50%;
46+
transform: translate(-50%, -50%);
47+
animation: ballMove 6s infinite ease-in-out;
48+
}
49+
50+
.player {
51+
width: 30px;
52+
height: 30px;
53+
background-color: #3498db;
54+
border-radius: 50%;
55+
position: absolute;
56+
}
57+
58+
.player1 {
59+
top: 40%;
60+
left: 30%;
61+
}
62+
63+
.player2 {
64+
top: 60%;
65+
left: 70%;
66+
}
67+
68+
.player3 {
69+
top: 40%;
70+
left: 90%;
71+
}
72+
73+
.player4 {
74+
top: 40%;
75+
left: 50%;
76+
}
77+
78+
@keyframes ballMove {
79+
0%, 100% {
80+
top: 50%;
81+
left: 50%;
82+
}
83+
25% {
84+
top: 40%;
85+
left: 30%;
86+
}
87+
50% {
88+
top: 60%;
89+
left: 70%;
90+
}
91+
75% {
92+
top: 50%;
93+
left: 90%;
94+
}
95+
}

0 commit comments

Comments
 (0)