Added Vintage Sepia film Background

avnisinngh · avnisinngh · commit b1716ef1d7ff · 2025-03-01T20:36:47.000+05:30
diff --git a/Components/Backgrounds/Vintage-Sepia-Film-Background/index.html b/Components/Backgrounds/Vintage-Sepia-Film-Background/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vintage Film Effect</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="film-grain"></div>
+    <div class="scratches"></div>
+</body>
+</html>
diff --git a/Components/Backgrounds/Vintage-Sepia-Film-Background/style.css b/Components/Backgrounds/Vintage-Sepia-Film-Background/style.css
@@ -0,0 +1,34 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: radial-gradient(circle, #a78c7b, #4a4031);
+    overflow: hidden;
+}
+
+.film-grain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('https://www.transparenttextures.com/patterns/noise-pattern.png');
+    opacity: 0.2;
+    animation: flicker 0.5s infinite alternate;
+}
+
+.scratches {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('https://www.transparenttextures.com/patterns/old-wall.png');
+    opacity: 0.1;
+    animation: moveScratches 4s infinite linear;
+}
+
+@keyframes flicker {
+    0% { opacity: 0.2; }
+    100% { opacity: 0.3; }
+}
+
+@keyframes moveScratches {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-100px); }
+}
diff --git a/assets/json_files/backgrounds.json b/assets/json_files/backgrounds.json
@@ -209,6 +209,11 @@
         "previewLink": "../../Components/Backgrounds/Swirl-Animation-Background/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Swirl-Animation-Background"
     },
+    {
+        "title": "Vintage Sepia Film Background",
+        "previewLink": "../../Components/Backgrounds/Vintage-Sepia-Film-Background/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Vintage-Sepia-Film-Background"
+ },
     {
         "title": "Waves Background",
         "previewLink": "../../Components/Backgrounds/Waves-Background/index.html",
