From 58214c914dc40023c694f52b8ed977c198ba6279 Mon Sep 17 00:00:00 2001 From: swathi Date: Sun, 1 Oct 2023 22:26:29 +0530 Subject: [PATCH 1/6] added a new table --- UI Snippets/Helpline/index.html | 11 +++++++++++ UI Snippets/Helpline/style.css | 14 ++++++++++++++ snippets.json | 7 +++++++ 3 files changed, 32 insertions(+) create mode 100644 UI Snippets/Helpline/index.html create mode 100644 UI Snippets/Helpline/style.css diff --git a/UI Snippets/Helpline/index.html b/UI Snippets/Helpline/index.html new file mode 100644 index 0000000..0476d51 --- /dev/null +++ b/UI Snippets/Helpline/index.html @@ -0,0 +1,11 @@ + + + + + + Helpline Image + + + Helpline Image + + diff --git a/UI Snippets/Helpline/style.css b/UI Snippets/Helpline/style.css new file mode 100644 index 0000000..22d1571 --- /dev/null +++ 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/snippets.json b/snippets.json index 0ebff45..c1ca8d2 100644 --- a/snippets.json +++ b/snippets.json @@ -103,5 +103,12 @@ "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/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph", + "author": "swathi singh" } ] From c3b882d553ec599ff4945662fcfb3a7bb004d3e8 Mon Sep 17 00:00:00 2001 From: swathi Date: Mon, 2 Oct 2023 12:31:51 +0530 Subject: [PATCH 2/6] added a random password generarator file --- passgenerator/passwordgenerator.html | 116 +++++++++++++++++++++++++++ snippets.json | 2 +- 2 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 passgenerator/passwordgenerator.html diff --git a/passgenerator/passwordgenerator.html b/passgenerator/passwordgenerator.html new file mode 100644 index 0000000..2a929df --- /dev/null +++ b/passgenerator/passwordgenerator.html @@ -0,0 +1,116 @@ + + + + + + Password Generator + + + +
+

Password Generator

+ + +
+ +
+ +
+ + + + diff --git a/snippets.json b/snippets.json index c1ca8d2..2a670eb 100644 --- a/snippets.json +++ b/snippets.json @@ -108,7 +108,7 @@ "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/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph", + "folder-link": "https://github.com/Swathi1203/CSS-Is-Fun/tree/add-new-tablecontent/UI%20Snippets/Helpline", "author": "swathi singh" } ] From d635e908cd199d9ab92fca8ca4f9964a327e097f Mon Sep 17 00:00:00 2001 From: swathi Date: Thu, 26 Oct 2023 22:13:16 +0530 Subject: [PATCH 3/6] added a music card using html and css --- UI Snippets/music/music.html | 11 ++++++++ UI Snippets/music/style.css | 55 ++++++++++++++++++++++++++++++++++++ snippets.json | 9 +++++- 3 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 UI Snippets/music/music.html create mode 100644 UI Snippets/music/style.css diff --git a/UI Snippets/music/music.html b/UI Snippets/music/music.html new file mode 100644 index 0000000..e93158d --- /dev/null +++ b/UI Snippets/music/music.html @@ -0,0 +1,11 @@ + + + + + + +
+ Music Note +
+ + diff --git a/UI Snippets/music/style.css b/UI Snippets/music/style.css new file mode 100644 index 0000000..bebeded --- /dev/null +++ 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 index 2a670eb..8b292cc 100644 --- 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" } ] From 5d548e2498868d7c11803391ed3970ba50a9cae9 Mon Sep 17 00:00:00 2001 From: swathi Date: Thu, 26 Oct 2023 22:20:44 +0530 Subject: [PATCH 4/6] added a folder link in snippet.json --- snippets.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets.json b/snippets.json index 8b292cc..28055a5 100644 --- a/snippets.json +++ b/snippets.json @@ -115,7 +115,7 @@ "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", + "folder-link": "https://github.com/Swathi1203/CSS-Is-Fun/tree/add-new-tablecontent/UI%20Snippets/music", "author": "Deveesh-Shetty" } ] From f9085c4dbe6f12ba9e00a620d60e21ed8d24a821 Mon Sep 17 00:00:00 2001 From: swathi Date: Fri, 27 Oct 2023 11:18:30 +0530 Subject: [PATCH 5/6] modified snippets.json --- snippets.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/snippets.json b/snippets.json index 2a670eb..8b292cc 100644 --- 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" } ] From 324324f5dd395eb1a3c413026168a0fa5e219658 Mon Sep 17 00:00:00 2001 From: swathi Date: Fri, 27 Oct 2023 19:57:31 +0530 Subject: [PATCH 6/6] modified snippets.json --- snippets.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/snippets.json b/snippets.json index c611180..69f8a6c 100644 --- a/snippets.json +++ b/snippets.json @@ -110,5 +110,12 @@ "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" } ]