From 95b74132c2e03484689c6e28af82f7e8b04e411b Mon Sep 17 00:00:00 2001 From: Nitesh Negi Date: Tue, 28 Jan 2025 10:28:39 +0530 Subject: [PATCH] Added 3nn3n-messivsronaldo (#2909) Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> --- Art/3nn3n-messivsronaldo/index.html | 21 +++++++ Art/3nn3n-messivsronaldo/meta.json | 4 ++ Art/3nn3n-messivsronaldo/styles.css | 95 +++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 Art/3nn3n-messivsronaldo/index.html create mode 100644 Art/3nn3n-messivsronaldo/meta.json create mode 100644 Art/3nn3n-messivsronaldo/styles.css diff --git a/Art/3nn3n-messivsronaldo/index.html b/Art/3nn3n-messivsronaldo/index.html new file mode 100644 index 000000000..97a1f61d8 --- /dev/null +++ b/Art/3nn3n-messivsronaldo/index.html @@ -0,0 +1,21 @@ + + + + + + Football Animation + + + +
+
+
+
+
+
+
+
+ +
+ + diff --git a/Art/3nn3n-messivsronaldo/meta.json b/Art/3nn3n-messivsronaldo/meta.json new file mode 100644 index 000000000..84ef9640e --- /dev/null +++ b/Art/3nn3n-messivsronaldo/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "messivsronaldo", + "githubHandle": "3nn3n" +} \ No newline at end of file diff --git a/Art/3nn3n-messivsronaldo/styles.css b/Art/3nn3n-messivsronaldo/styles.css new file mode 100644 index 000000000..8d25d593d --- /dev/null +++ b/Art/3nn3n-messivsronaldo/styles.css @@ -0,0 +1,95 @@ +body { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + height: 100vh; + background-color: #aad751; + overflow: hidden; +} + +.pitch { + width: 90%; + height: 60%; + background-color: #6ab04c; + border: 5px solid white; + position: relative; +} + +.goal { + width: 10px; + height: 100px; + background-color: white; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.goal.left { + left: 0; +} + +.goal.right { + right: 0; +} + + +.ball { + width: 20px; + height: 20px; + background-color: white; + border: 2px solid black; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: ballMove 6s infinite ease-in-out; +} + +.player { + width: 30px; + height: 30px; + background-color: #3498db; + border-radius: 50%; + position: absolute; +} + +.player1 { + top: 40%; + left: 30%; +} + +.player2 { + top: 60%; + left: 70%; +} + +.player3 { + top: 40%; + left: 90%; +} + +.player4 { + top: 40%; + left: 50%; +} + +@keyframes ballMove { + 0%, 100% { + top: 50%; + left: 50%; + } + 25% { + top: 40%; + left: 30%; + } + 50% { + top: 60%; + left: 70%; + } + 75% { + top: 50%; + left: 90%; + } +} \ No newline at end of file