diff --git a/Art/nharjes/ColorfulBackgroundDemo.gif b/Art/nharjes/ColorfulBackgroundDemo.gif new file mode 100644 index 000000000..9ce91a410 Binary files /dev/null and b/Art/nharjes/ColorfulBackgroundDemo.gif differ diff --git a/Art/nharjes/index.html b/Art/nharjes/index.html new file mode 100644 index 000000000..48aff123e --- /dev/null +++ b/Art/nharjes/index.html @@ -0,0 +1,11 @@ + + + + + + +
+
This is a colorful background animation in CSS
+
+ + diff --git a/Art/nharjes/styles.css b/Art/nharjes/styles.css new file mode 100644 index 000000000..58813996f --- /dev/null +++ b/Art/nharjes/styles.css @@ -0,0 +1,36 @@ +body { + margin: 0; + padding: 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.colorful-background { + width: 100%; + height: 100%; + background: linear-gradient(45deg, #f06, #09f, #6f0, #f06); + background-size: 400% 400%; + animation: animateBackground 10s linear infinite; + filter: brightness(0.8); +} + + + +.animated-text { + font-size: 80px; + text-align: center; + color: white; + margin-top: 200px; +} + +@keyframes animateBackground { + 0% { + background-position: 0% 50%; + } + 100% { + background-position: 100% 50%; + } +} diff --git a/include.js b/include.js index 16210504d..4795e0f77 100644 --- a/include.js +++ b/include.js @@ -2311,6 +2311,13 @@ let cards = [ imageLink: './Art/Dzivmv/rainbow_rain.gif', author: 'Dzivmv', githubLink: 'https://github.com/Dzivmv' + }, + { + artName: 'colorful background', + pageLink: './Art/nharjes/index.html', + imageLink: './Art/nharjes/ColorfulBackgroundDemo.gif', + author: 'nharjes', + githubLink: 'https://github.com/nharjes' } ];