From 738edbc93c988098cdd495b04a830cefc05cc873 Mon Sep 17 00:00:00 2001 From: debasmitasarkar Date: Thu, 30 May 2024 23:10:05 +0530 Subject: [PATCH 1/3] addition of background --- .../Abstract-Background/index.html | 15 ++++++++++ .../Backgrounds/Abstract-Background/script.js | 15 ++++++++++ .../Backgrounds/Abstract-Background/style.css | 28 +++++++++++++++++++ assets/html_files/backgrounds.html | 13 +++++++++ 4 files changed, 71 insertions(+) create mode 100644 Components/Backgrounds/Abstract-Background/index.html create mode 100644 Components/Backgrounds/Abstract-Background/script.js create mode 100644 Components/Backgrounds/Abstract-Background/style.css diff --git a/Components/Backgrounds/Abstract-Background/index.html b/Components/Backgrounds/Abstract-Background/index.html new file mode 100644 index 00000000..aeff200a --- /dev/null +++ b/Components/Backgrounds/Abstract-Background/index.html @@ -0,0 +1,15 @@ + + + + + + + + Abstract Background + + + + + + + \ No newline at end of file diff --git a/Components/Backgrounds/Abstract-Background/script.js b/Components/Backgrounds/Abstract-Background/script.js new file mode 100644 index 00000000..75821c30 --- /dev/null +++ b/Components/Backgrounds/Abstract-Background/script.js @@ -0,0 +1,15 @@ +document.addEventListener("DOMContentLoaded", () => { + let xPos = 0; + let yPos = 0; + const speed = 0.5; // Adjust the speed of the animation + + function animateBackground() { + xPos -= speed; + yPos -= speed; + + document.body.style.backgroundPosition = `${xPos}px ${yPos}px`; + requestAnimationFrame(animateBackground); + } + + animateBackground(); +}); diff --git a/Components/Backgrounds/Abstract-Background/style.css b/Components/Backgrounds/Abstract-Background/style.css new file mode 100644 index 00000000..ba3d5d2f --- /dev/null +++ b/Components/Backgrounds/Abstract-Background/style.css @@ -0,0 +1,28 @@ +body { + background: + /*shape*/ + linear-gradient(115deg, transparent 89%, #e29eb0 0) -128px -96px, + linear-gradient(-115deg, transparent 89%, #fe9e9e 0) 22px -96px, + linear-gradient(-115deg, #e83ec6 11%, transparent 0) -128px 54px, + linear-gradient(115deg, #771764 11%, transparent 0) 22px 54px, + + /*shape*/ + linear-gradient(-25deg, #a75797 11%, transparent 0) -128px -22px, + linear-gradient(25deg, transparent 89%, #cdb380 0) -128px 128px, + linear-gradient(25deg, #a13259 11%, transparent 0) 22px -22px, + linear-gradient(-25deg, transparent 89%, #390349 0) 22px 128px, + /*shape*/ + linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -53px -96px, + linear-gradient(25deg, transparent 89%, #cdb380 0) -53px 54px, + linear-gradient(25deg, #b33f75 11%, transparent 0) 97px -96px, + linear-gradient(-25deg, transparent 89%, #aa89a9 0) 97px 54px, + /*shape*/ + linear-gradient(115deg, transparent 89%, #e8ddcb 0) -53px -21px, + linear-gradient(-115deg, #9a6ca1 11%, transparent 0) -53px 129px, + linear-gradient(-115deg, transparent 89%, #823e7d 0) 97px -21px, + linear-gradient(115deg, #7e175c 11%, transparent 0) 97px 129px; + + background-color: #fff; + background-size: 150px 150px; + background-repeat: repeat; +} diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index 46cc82ba..a113fdf9 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -443,6 +443,19 @@

Waves Background

+
+

Abstract Background

+
+ + + +
+
+ + + +
+
From e072093990e31543bfb05098ed90b167b98ebda7 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 31 May 2024 03:47:21 +0530 Subject: [PATCH 2/3] Update style.css --- .../Backgrounds/Abstract-Background/style.css | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/Components/Backgrounds/Abstract-Background/style.css b/Components/Backgrounds/Abstract-Background/style.css index ba3d5d2f..ad0d2560 100644 --- a/Components/Backgrounds/Abstract-Background/style.css +++ b/Components/Backgrounds/Abstract-Background/style.css @@ -1,28 +1,28 @@ body { - background: - /*shape*/ - linear-gradient(115deg, transparent 89%, #e29eb0 0) -128px -96px, - linear-gradient(-115deg, transparent 89%, #fe9e9e 0) 22px -96px, - linear-gradient(-115deg, #e83ec6 11%, transparent 0) -128px 54px, - linear-gradient(115deg, #771764 11%, transparent 0) 22px 54px, - - /*shape*/ - linear-gradient(-25deg, #a75797 11%, transparent 0) -128px -22px, - linear-gradient(25deg, transparent 89%, #cdb380 0) -128px 128px, - linear-gradient(25deg, #a13259 11%, transparent 0) 22px -22px, - linear-gradient(-25deg, transparent 89%, #390349 0) 22px 128px, - /*shape*/ - linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -53px -96px, - linear-gradient(25deg, transparent 89%, #cdb380 0) -53px 54px, - linear-gradient(25deg, #b33f75 11%, transparent 0) 97px -96px, - linear-gradient(-25deg, transparent 89%, #aa89a9 0) 97px 54px, - /*shape*/ - linear-gradient(115deg, transparent 89%, #e8ddcb 0) -53px -21px, - linear-gradient(-115deg, #9a6ca1 11%, transparent 0) -53px 129px, - linear-gradient(-115deg, transparent 89%, #823e7d 0) 97px -21px, - linear-gradient(115deg, #7e175c 11%, transparent 0) 97px 129px; - - background-color: #fff; - background-size: 150px 150px; - background-repeat: repeat; + background: + /*shape*/ + linear-gradient(115deg, transparent 89%, #e29eb0 0) -128px -96px, + linear-gradient(-115deg, transparent 89%, #fe9e9e 0) 22px -96px, + linear-gradient(-115deg, #e83ec6 11%, transparent 0) -128px 54px, + linear-gradient(115deg, #771764 11%, transparent 0) 22px 54px, + + /*shape*/ + linear-gradient(-25deg, #a75797 11%, transparent 0) -128px -22px, + linear-gradient(25deg, transparent 89%, #cdb380 0) -128px 128px, + linear-gradient(25deg, #a13259 11%, transparent 0) 22px -22px, + linear-gradient(-25deg, transparent 89%, #390349 0) 22px 128px, + /*shape*/ + linear-gradient(-25deg, #e8ddcb 11%, transparent 0) -53px -96px, + linear-gradient(25deg, transparent 89%, #cdb380 0) -53px 54px, + linear-gradient(25deg, #b33f75 11%, transparent 0) 97px -96px, + linear-gradient(-25deg, transparent 89%, #aa89a9 0) 97px 54px, + /*shape*/ + linear-gradient(115deg, transparent 89%, #e8ddcb 0) -53px -21px, + linear-gradient(-115deg, #9a6ca1 11%, transparent 0) -53px 129px, + linear-gradient(-115deg, transparent 89%, #823e7d 0) 97px -21px, + linear-gradient(115deg, #7e175c 11%, transparent 0) 97px 129px; + + background-color: #fff; + background-size: 150px 150px; + background-repeat: repeat; } From 6b73c06fd2917744f46ad7a20cb827220835ece4 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 31 May 2024 03:48:25 +0530 Subject: [PATCH 3/3] Update backgrounds.html --- assets/html_files/backgrounds.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index a113fdf9..166399c2 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -79,6 +79,19 @@

3D Boxes Background

+
+

Abstract Background

+
+ + + +
+
+ + + +
+

Abstract Particle Swarm Background

@@ -443,19 +456,6 @@

Waves Background

-
-

Abstract Background

-
- - - -
-
- - - -
-
@@ -476,4 +476,4 @@

Abstract Background

- \ No newline at end of file +