dev-shetty · Swathi1203 · Oct 1, 2023 · Oct 2, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/UI Snippets/Helpline/index.html b/UI Snippets/Helpline/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Helpline Image</title>
+</head>
+<body>
+    <img src="https://wpassets.adda247.com/wp-content/uploads/multisite/sites/5/2020/04/11132345/Helpline.jpg" alt="Helpline Image">
+</body>
+</html>
diff --git a/UI Snippets/Helpline/style.css b/UI Snippets/Helpline/style.css
@@ -0,0 +1,14 @@
+/* Apply styles to the body */
+body {
+    background-color:black;
+}
+
+/* Style the image */
+img {
+    max-width: 100%;
+    height: auto;
+    margin: 20px auto;
+    display: block;
+    border: 2px solid #333;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
diff --git a/UI Snippets/music/music.html b/UI Snippets/music/music.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <div class="music-image-container">
+        <img src="https://img.freepik.com/premium-photo/concept-eternal-theme-about-eternity-music-musical-instruments-good-mood-ascended-aspiration-action-treble-clef-sheet-music_771426-4115.jpg" alt="Music Note" class="music-image">
+    </div>
+</body>
+</html>
diff --git a/UI Snippets/music/style.css b/UI Snippets/music/style.css
@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.music-image-container {
+    animation: moveMusicImage 2s ease-in-out infinite;
+}
+
+.music-image {
+    width: 100%;
+    height: 100%;
+}
+
+@keyframes moveMusicImage {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+@keyframes moveMusicImage {
+    0%, 100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    25%, 75% {
+        transform: translateY(20px);
+        opacity: 5;
+    }
+    50% {
+        transform: translateY(40px);
+        opacity: 5;
+    }
+}
+@keyframes moveMusicImage {
+    0%, 100% {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+    25%, 75% {
+        transform: translateY(-20px) scale(1.1);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translateY(-40px) scale(1);
+        opacity: 0;
+    }
+}
diff --git a/passgenerator/passwordgenerator.html b/passgenerator/passwordgenerator.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            background-color: #333131;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            max-width: 400px;
+            background-color: #f1eaea;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+            position: relative;
+            animation: borderAnimation 2s infinite alternate;
+            width:400px;
+        }
+        .line {
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background-color: #007bff;
+            animation: moveLine 2s linear infinite;
+        }
+        h2 {
+            color: #333;
+        }
+
+        label, input {
+            display: block;
+            margin: 10px 0;
+        }
+
+        input[type="number"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        button {
+            background-color: #c70a0a;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        #generatedPassword {
+            animation: fadeIn 0.5s ease-in;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Password Generator</h2>
+        <label for="passwordLength">Password Length:</label>
+        <input type="number" id="passwordLength" value="12" min="6" max="30">
+        <br>
+        <button onclick="generatePassword()">Generate Password</button>
+        <br>
+        <input type="text" id="generatedPassword" readonly>
+    </div>
+
+    <script>
+        function generatePassword() {
+            const passwordLength = document.getElementById('passwordLength').value;
+            const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_-+=";
+            let password = "";
+
+            for (let i = 0; i < passwordLength; i++) {
+                const randomIndex = Math.floor(Math.random() * charset.length);
+                password += charset.charAt(randomIndex);
+            }
+
+            document.getElementById('generatedPassword').value = password;
+        }
+    </script>
+</body>
+</html>
diff --git a/snippets.json b/snippets.json
@@ -103,5 +103,19 @@
     "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/61b32539-f2d0-4c29-800f-03657d5af192",
     "folder-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph",
     "author": "Meet Thakur"
+  },
+  {
+    "name": "Helpline",
+    "codepen-link": "https://codepen.io/Swathi-Singh/pen/dywjqoz",
+    "image-link": "https://wpassets.adda247.com/wp-content/uploads/multisite/sites/5/2020/04/11132345/Helpline.jpg",
+    "folder-link": "https://github.com/Swathi1203/CSS-Is-Fun/tree/add-new-tablecontent/UI%20Snippets/Helpline",
+    "author": "Deveesh-Shetty"
+  },
+  {
+    "name": "Music",
+    "codepen-link": "https://codepen.io/Swathi-Singh/pen/QWYjvvB",
+    "image-link": "https://img.freepik.com/premium-photo/concept-eternal-theme-about-eternity-music-musical-instruments-good-mood-ascended-aspiration-action-treble-clef-sheet-music_771426-4115.jpg" ,
+    "folder-link": "https://github.com/Swathi1203/CSS-Is-Fun/tree/add-new-tablecontent/UI%20Snippets/music",
+    "author": "Deveesh-Shetty"
   }
 ]