Added Colour Shifting Background (#1469)

Rakesh9100 · Feb 18, 2025 · 87eccf1 · 87eccf1
1 parent a6f9819
commit 87eccf1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/Components/Backgrounds/Colour-Shifting-Background/index.html b/Components/Backgrounds/Colour-Shifting-Background/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Colour Shifting Background</title>
+</head>
+<body>
+    <h1>Beautiify</h1>
+</body>
+</html>
diff --git a/Components/Backgrounds/Colour-Shifting-Background/style.css b/Components/Backgrounds/Colour-Shifting-Background/style.css
@@ -0,0 +1,24 @@
+body {
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(45deg, #ff0000, #0000ff);
+    background-size: 200% 200%;
+    animation: bgShift 6s infinite alternate;
+}
+
+@keyframes bgShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 100% 50%;
+    }
+}
+
+h1 {
+    color: white;
+    font-family: Arial, sans-serif;
+}
diff --git a/assets/json_files/backgrounds.json b/assets/json_files/backgrounds.json
@@ -49,6 +49,11 @@
         "previewLink": "../../Components/Backgrounds/Colour-Drop-Background/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Colour-Drop-Background"
     },
+    {
+        "title": "Colour Shifting Background",
+        "previewLink": "../../Components/Backgrounds/Colour-Shifting-Background/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Colour-Shifting-Background"
+    },
     {
         "title": "Connecting Dots Background",
         "previewLink": "../../Components/Backgrounds/Connecting-Dots-Background/index.html",