From c8a84fbf56cc8ec2b5871bfdbd666bdd8b7c746a Mon Sep 17 00:00:00 2001
From: 3iyam8ings <tiyaattechworld@outlook.com>
Date: Thu, 18 Dec 2025 13:58:41 +0530
Subject: [PATCH] Add files via upload

---
 penguin.html | 442 +++++++++++++++++++++++++--------------------------
 1 file changed, 221 insertions(+), 221 deletions(-)

diff --git a/penguin.html b/penguin.html
index 897b063..24c3ee6 100644
--- a/penguin.html
+++ b/penguin.html
@@ -1,221 +1,221 @@
- <style>
-     :root {
-          --penguin-size: 300px ;
-          --penguin-skin: black ;
-          --penguin-belly: white;
-          --penguin-beak: orange;
-}
-
-  @media (max-width: 350px) {
-      :root {
-         --penguin-size: 200px;
-         --penguin-skin: gray;
-} 
- }
- .penguin {
-    position: relative ;
-    margin: auto;
-    display: block;
-    margin-top: 5%;
-    width: var(--penguin-size, 300px) ;
-    height: var(--penguin-size, 300px);
-}
-
-  .right-cheek {
-   top: 15%;
-   left: 35%;
-   background: var(--penguin-belly, white);
-   width: 60%;
-   height: 70%;
-   border-radius: 70% 70% 60% 60% ;
-}
-
-  .left-cheek {
-   top: 15%;
-   left: 5%;
-   background: var(--penguin-belly, white);
-   width: 60%;
-   height: 70%;
-   border-radius: 70% 70% 60% 60% ;
-}
-
- .belly {
-   top: 60%;
-   left: 2.5%;
-   background: var(--penguin-belly, white);
-   width:95%; 
-   height: 100%;
-   border-radius: 120% 120% 100% 100% ;
-}
-
- .penguin-top {
-   top: 10%;
-   left: 25%;
-   background: var(--penguin-skin, black);
-   width:50%; 
-   height: 45%;
-   border-radius: 70% 70% 60% 60% ;
-}
-
- .penguin-bottom {
-   top: 40%;
-   left: 23.5%;
-   background: var(--penguin-skin, black);
-   width:53%; 
-   height: 45%;
-   border-radius: 70% 70% 100% 100% ;
-}
- .right-hand {
-   top: 5%;
-   left: 25%;
-   background: var(--penguin-skin, black) ;
-   width:30%;
-   height: 60%; 
-   border-radius: 30% 30% 120% 30%;
-   transform: rotate(130deg) ;
-   z-index: -1;
-   animation-duration: 3s ;
-   animation-name: wave;
-   animation-iteration-count: infinite; 
-   transform-origin: 0% 0% ;
-   animation-timing-function: linear;
-}
-@keyframes wave {
-  10% {
-    transform: rotate(110deg);
- }
- 20% {
-     transform: rotate(130deg);
- }
-  30% {
-     transform: rotate(110deg);
- } 
-  40% {
-    transform: rotate(130deg) ;
- }
-} 
- .left-hand {
-   top: 0%;
-   left: 75%;
-   background: var(--penguin-skin, black);
-   width: 30%;
-   height: 60%; 
-   border-radius: 30% 30% 30% 120% ;
-   transform: rotate(-45deg);
-   z-index: -1;
-}
-.right-feet {
-   top: 85%;
-   left: 60%;
-   background: var(--penguin-beak, orange);
-   width: 15%;
-   height: 30%;
-   border-radius: 50% 50% 50% 50% ;
-   transform: rotate(-80deg);
-   z-index: -2222 ;
-}
-.left-feet {
-   top: 85%;
-   left: 25%;
-   background: var(--penguin-beak, orange);
-   width: 15%;
-   height: 30%;
-   border-radius: 50% 50% 50% 50% ;
-   transform: rotate(80deg) ;
-   z-index: -2222;
-}
-.right-eye {
-   top: 45% ;
-   left: 60% ;
-   background: black;
-   width:15%;
-   height: 17% ;
-   border-radius: 50%;
-}
- .left-eye {
-   top: 45%;
-   left: 25% ;
-   background: black;
-   width:15%;
-   height: 17% ;
-   border-radius: 50%;
-}
- .sparkle {
-   top: 25%;
-   left: -23%;
-   background: white;
-   width: 150%;
-   height: 100%;
-   border-radius: 50% ;
-}
-.blush-right {
-   top:65%;
-   left: 15% ;
-   background: pink;
-   width:15%;
-   height: 10%;
-   border-radius: 50% ;
-}
-.blush-left {
-   top:65%;
-   left: 70% ;
-   background: pink;
-   width:15%;
-   height: 10%;
-   border-radius: 50% ;
-}
-.beak-top {
-   top: 60%;
-   left: 40%;
-   background: var(--penguin-beak, orange) ;
-   width: 20% ;
-   height: 10% ;
-   border-radius: 50% ;
-}
-.beak-bottom {
-   top: 65%;
-   left: 42% ;
-   background: var(--penguin-beak, orange) ;
-   width: 16% ;
-   height: 10%;
-   border-radius: 50% ;
-} 
-body {
-  background: #ffc0cb ;
-} 
- .penguin * {
-   position: absolute;
-}
-</style>
-<div class="penguin">
- <div class="penguin-bottom">
-  <div class="right-hand"></div>
-  <div class="left-hand"></div>
-  <div class="right-feet"></div>
-  <div class="left-feet"></div>
- </div>
-<div class="penguin-top">
-  <div class="right-cheek"></div>
-  <div class="left-cheek"></div>
-  <div class="belly"></div>
-  <div class="right-eye">
-  <div class="sparkle"></div>
- </div>
-  <div class="left-eye" >
-  <div class="sparkle"></div>
- </div>
- <div class="blush-right"></div>
-  <div class="blush-left"></div>
-  <div class="beak-top"></div>
-  <div class="beak-bottom"></div>
-</div>
-</div>
-
-
-  
-
-
-
-
-
-
+ <style>
+     :root {
+          --penguin-size: 300px ;
+          --penguin-skin: black ;
+          --penguin-belly: white;
+          --penguin-beak: orange;
+}
+
+  @media (max-width: 350px) {
+      :root {
+         --penguin-size: 200px;
+         --penguin-skin: gray;
+} 
+ }
+ .penguin {
+    position: relative ;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: var(--penguin-size, 300px) ;
+    height: var(--penguin-size, 300px);
+}
+
+  .right-cheek {
+   top: 15%;
+   left: 35%;
+   background: var(--penguin-belly, white);
+   width: 60%;
+   height: 70%;
+   border-radius: 70% 70% 60% 60% ;
+}
+
+  .left-cheek {
+   top: 15%;
+   left: 5%;
+   background: var(--penguin-belly, white);
+   width: 60%;
+   height: 70%;
+   border-radius: 70% 70% 60% 60% ;
+}
+
+ .belly {
+   top: 60%;
+   left: 2.5%;
+   background: var(--penguin-belly, white);
+   width:95%; 
+   height: 100%;
+   border-radius: 120% 120% 100% 100% ;
+}
+
+ .penguin-top {
+   top: 10%;
+   left: 25%;
+   background: var(--penguin-skin, black);
+   width:50%; 
+   height: 45%;
+   border-radius: 70% 70% 60% 60% ;
+}
+
+ .penguin-bottom {
+   top: 40%;
+   left: 23.5%;
+   background: var(--penguin-skin, black);
+   width:53%; 
+   height: 45%;
+   border-radius: 70% 70% 100% 100% ;
+}
+ .right-hand {
+   top: 5%;
+   left: 25%;
+   background: var(--penguin-skin, black) ;
+   width:30%;
+   height: 60%; 
+   border-radius: 30% 30% 120% 30%;
+   transform: rotate(130deg) ;
+   z-index: -1;
+   animation-duration: 3s ;
+   animation-name: wave;
+   animation-iteration-count: infinite; 
+   transform-origin: 0% 0% ;
+   animation-timing-function: linear;
+}
+@keyframes wave {
+  10% {
+    transform: rotate(110deg);
+ }
+ 20% {
+     transform: rotate(130deg);
+ }
+  30% {
+     transform: rotate(110deg);
+ } 
+  40% {
+    transform: rotate(130deg) ;
+ }
+} 
+ .left-hand {
+   top: 0%;
+   left: 75%;
+   background: var(--penguin-skin, black);
+   width: 30%;
+   height: 60%; 
+   border-radius: 30% 30% 30% 120% ;
+   transform: rotate(-45deg);
+   z-index: -1;
+}
+.right-feet {
+   top: 85%;
+   left: 60%;
+   background: var(--penguin-beak, orange);
+   width: 15%;
+   height: 30%;
+   border-radius: 50% 50% 50% 50% ;
+   transform: rotate(-80deg);
+   z-index: -2222 ;
+}
+.left-feet {
+   top: 85%;
+   left: 25%;
+   background: var(--penguin-beak, orange);
+   width: 15%;
+   height: 30%;
+   border-radius: 50% 50% 50% 50% ;
+   transform: rotate(80deg) ;
+   z-index: -2222;
+}
+.right-eye {
+   top: 45% ;
+   left: 60% ;
+   background: black;
+   width:15%;
+   height: 17% ;
+   border-radius: 50%;
+}
+ .left-eye {
+   top: 45%;
+   left: 25% ;
+   background: black;
+   width:15%;
+   height: 17% ;
+   border-radius: 50%;
+}
+ .sparkle {
+   top: 25%;
+   left: -23%;
+   background: white;
+   width: 150%;
+   height: 100%;
+   border-radius: 50% ;
+}
+.blush-right {
+   top:65%;
+   left: 15% ;
+   background: pink;
+   width:15%;
+   height: 10%;
+   border-radius: 50% ;
+}
+.blush-left {
+   top:65%;
+   left: 70% ;
+   background: pink;
+   width:15%;
+   height: 10%;
+   border-radius: 50% ;
+}
+.beak-top {
+   top: 60%;
+   left: 40%;
+   background: var(--penguin-beak, orange) ;
+   width: 20% ;
+   height: 10% ;
+   border-radius: 50% ;
+}
+.beak-bottom {
+   top: 65%;
+   left: 42% ;
+   background: var(--penguin-beak, orange) ;
+   width: 16% ;
+   height: 10%;
+   border-radius: 50% ;
+} 
+body {
+  background: #ffc0cb ;
+} 
+ .penguin * {
+   position: absolute;
+}
+</style>
+<div class="penguin">
+ <div class="penguin-bottom">
+  <div class="right-hand"></div>
+  <div class="left-hand"></div>
+  <div class="right-feet"></div>
+  <div class="left-feet"></div>
+ </div>
+<div class="penguin-top">
+  <div class="right-cheek"></div>
+  <div class="left-cheek"></div>
+  <div class="belly"></div>
+  <div class="right-eye">
+  <div class="sparkle"></div>
+ </div>
+  <div class="left-eye" >
+  <div class="sparkle"></div>
+ </div>
+ <div class="blush-right"></div>
+  <div class="blush-left"></div>
+  <div class="beak-top"></div>
+  <div class="beak-bottom"></div>
+</div>
+</div>
+
+
+  
+
+
+
+
+
+