From 5d42c42e7375de7cfbdd4d13f274372f80785716 Mon Sep 17 00:00:00 2001 From: BravoKolos Date: Sat, 29 Jun 2024 09:37:42 +0200 Subject: [PATCH] adding my art to the project --- Art/animcss/index.html | 12 ++++++++++++ Art/animcss/style.css | 31 +++++++++++++++++++++++++++++++ include.js | 7 +++++++ 3 files changed, 50 insertions(+) create mode 100644 Art/animcss/index.html create mode 100644 Art/animcss/style.css diff --git a/Art/animcss/index.html b/Art/animcss/index.html new file mode 100644 index 000000000..621353376 --- /dev/null +++ b/Art/animcss/index.html @@ -0,0 +1,12 @@ + + + + + + Simple CSS Animation + + + +
+ + diff --git a/Art/animcss/style.css b/Art/animcss/style.css new file mode 100644 index 000000000..59debf00c --- /dev/null +++ b/Art/animcss/style.css @@ -0,0 +1,31 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.animated-box { + width: 150px; + height: 150px; + background-color: #3498db; + position: relative; + animation: moveAndColorChange 4s infinite alternate; +} + +@keyframes moveAndColorChange { + 0% { + left: 0; + background-color: #3498db; + } + 50% { + left: 200px; + background-color: #e74c3c; + } + 100% { + left: 400px; + background-color: #2ecc71; + } +} diff --git a/include.js b/include.js index d79416a3a..e50c1b3bd 100644 --- a/include.js +++ b/include.js @@ -2922,6 +2922,13 @@ let cards = [ author: 'Yumi Machino', githubLink: 'https://github.com/YumiMachino' }, + { + artName: 'animcss', + pageLink: './Art//index.html', + imageLink: './Art//box.gif', + author: 'Kamil', + githubLink: 'https://github.com/BravoKolos' + } ]; /* -------------------------------------------------------------------------- */