added a music card using html and css

Swathi1203 · Swathi1203 · commit d635e908cd19 · 2023-10-26T22:13:16.000+05:30
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/snippets.json b/snippets.json
@@ -109,6 +109,13 @@
     "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": "swathi singh"
+    "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/Helpline",
+    "author": "Deveesh-Shetty"
   }
 ]
