+
+
+
+
+
+
diff --git a/Art/sabiya-tabassum-dogAnimation/meta.json b/Art/sabiya-tabassum-dogAnimation/meta.json
new file mode 100644
index 000000000..bab5b4410
--- /dev/null
+++ b/Art/sabiya-tabassum-dogAnimation/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "Dog Animation",
+ "githubHandle": "shanolhere"
+}
\ No newline at end of file
diff --git a/Art/sabiya-tabassum-dogAnimation/styles.css b/Art/sabiya-tabassum-dogAnimation/styles.css
new file mode 100644
index 000000000..0f155b7f2
--- /dev/null
+++ b/Art/sabiya-tabassum-dogAnimation/styles.css
@@ -0,0 +1,115 @@
+
+body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f0f0f0;
+ overflow: hidden;
+}
+
+.dog {
+ position: relative;
+ width: 120px;
+ height: 120px;
+}
+
+/* Dog Body */
+.body {
+ width: 70px;
+ height: 50px;
+ background-color: #b5651d;
+ border-radius: 50%;
+ position: absolute;
+ top: 30px;
+ left: 25px;
+}
+
+/* Dog Head */
+.head {
+ width: 60px;
+ height: 60px;
+ background-color: #b5651d;
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ left: 30px;
+}
+
+/* Dog Ears */
+.ear-left, .ear-right {
+ width: 20px;
+ height: 30px;
+ background-color: #b5651d;
+ position: absolute;
+ top: 0;
+ border-radius: 50%;
+}
+.ear-left {
+ left: 5px;
+ transform: rotate(-30deg);
+}
+.ear-right {
+ right: 5px;
+ transform: rotate(30deg);
+}
+
+/* Dog Eyes */
+.eye-left, .eye-right {
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border-radius: 50%;
+ position: absolute;
+ top: 20px;
+}
+.eye-left {
+ left: 15px;
+}
+.eye-right {
+ right: 15px;
+}
+
+/* Dog Nose */
+.nose {
+ width: 12px;
+ height: 12px;
+ background-color: #333;
+ border-radius: 50%;
+ position: absolute;
+ top: 35px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+
+/* Dog Legs */
+.leg-left, .leg-right {
+ width: 10px;
+ height: 30px;
+ background-color: #b5651d;
+ position: absolute;
+ top: 70px;
+ border-radius: 5px;
+}
+.leg-left {
+ left: 10px;
+}
+.leg-right {
+ right: 10px;
+}
+
+/* Animation for walking */
+@keyframes walk {
+ 0%, 100% {
+ transform: translateX(0);
+ }
+ 50% {
+ transform: translateX(300px);
+ }
+}
+
+.dog {
+ animation: walk 4s ease-in-out infinite;
+}
From 86e1b7035c2b072f85120a67287124395bf0b213 Mon Sep 17 00:00:00 2001
From: imsabiya <102300466+shanolhere@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:17:05 +0530
Subject: [PATCH 2/3] dog animation
---
.../index.html | 0
.../meta.json | 0
.../styles.css | 0
3 files changed, 0 insertions(+), 0 deletions(-)
rename Art/{sabiya-tabassum-dogAnimation => shanolhere-dogAnimation}/index.html (100%)
rename Art/{sabiya-tabassum-dogAnimation => shanolhere-dogAnimation}/meta.json (100%)
rename Art/{sabiya-tabassum-dogAnimation => shanolhere-dogAnimation}/styles.css (100%)
diff --git a/Art/sabiya-tabassum-dogAnimation/index.html b/Art/shanolhere-dogAnimation/index.html
similarity index 100%
rename from Art/sabiya-tabassum-dogAnimation/index.html
rename to Art/shanolhere-dogAnimation/index.html
diff --git a/Art/sabiya-tabassum-dogAnimation/meta.json b/Art/shanolhere-dogAnimation/meta.json
similarity index 100%
rename from Art/sabiya-tabassum-dogAnimation/meta.json
rename to Art/shanolhere-dogAnimation/meta.json
diff --git a/Art/sabiya-tabassum-dogAnimation/styles.css b/Art/shanolhere-dogAnimation/styles.css
similarity index 100%
rename from Art/sabiya-tabassum-dogAnimation/styles.css
rename to Art/shanolhere-dogAnimation/styles.css
From a0ff3f6ddec60e9922e98c8fc45b7503240caf14 Mon Sep 17 00:00:00 2001
From: imsabiya <102300466+shanolhere@users.noreply.github.com>
Date: Thu, 31 Oct 2024 21:13:16 +0530
Subject: [PATCH 3/3] add: adds loader Animation
---
Art/shanolhere-loaderAnimation/index.html | 16 ++++++++++
Art/shanolhere-loaderAnimation/meta.json | 4 +++
Art/shanolhere-loaderAnimation/styles.css | 36 +++++++++++++++++++++++
3 files changed, 56 insertions(+)
create mode 100644 Art/shanolhere-loaderAnimation/index.html
create mode 100644 Art/shanolhere-loaderAnimation/meta.json
create mode 100644 Art/shanolhere-loaderAnimation/styles.css
diff --git a/Art/shanolhere-loaderAnimation/index.html b/Art/shanolhere-loaderAnimation/index.html
new file mode 100644
index 000000000..fe3fb4f8d
--- /dev/null
+++ b/Art/shanolhere-loaderAnimation/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
Loader Animation
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/shanolhere-loaderAnimation/meta.json b/Art/shanolhere-loaderAnimation/meta.json
new file mode 100644
index 000000000..d487bf220
--- /dev/null
+++ b/Art/shanolhere-loaderAnimation/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "Loader Animation",
+ "githubHandle": "shanolhere"
+}
\ No newline at end of file
diff --git a/Art/shanolhere-loaderAnimation/styles.css b/Art/shanolhere-loaderAnimation/styles.css
new file mode 100644
index 000000000..44bfa6764
--- /dev/null
+++ b/Art/shanolhere-loaderAnimation/styles.css
@@ -0,0 +1,36 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f0f0f0;
+ margin: 0;
+}
+
+.loader {
+ display: flex;
+ align-items: flex-end;
+}
+
+.dot {
+ width: 15px;
+ height: 15px;
+ margin: 0 5px;
+ background-color: #3498db;
+ border-radius: 50%;
+ animation: bounce 0.6s infinite alternate;
+}
+
+.dot:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+ to {
+ transform: translateY(-20px);
+ }
+}