Adding the first project: Animation (#2211)

* Fist animation-edited gif * Adding the first project: Animation * Fist animation-edited gif
zero-to-mastery · Oct 28, 2023 · 3673e41 · 3673e41
1 parent c684532
commit 3673e41
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 3 deletions.
diff --git a/Art/norib016/art.css b/Art/norib016/art.css
@@ -0,0 +1,87 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 0vh;
+    background: #221847;
+}
+
+.container {
+    position: relative;
+    top: 50px;
+}
+
+.vessel {
+    position: relative;
+    width: 280px;
+    height: 100px;
+    background: linear-gradient(to right, #000b10, #d9d9d9);
+    border-bottom-left-radius: 45%;
+    border-bottom-right-radius: 45%;
+    transform: rotate(85deg);
+    transform-origin: left;
+}
+
+.top {
+    position: absolute;
+    top: -30px;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background: linear-gradient(to right, #f9f9f9, #d9d9d9);
+    border-radius: 50%;
+}
+
+.circle {
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: 50px;
+    background: linear-gradient(to left, #f9f9f9, #d9d9d9);
+    border-radius: 50%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.sake {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: animate 1s;
+    animation-iteration-count: 4;
+    animation-direction: reverse;
+    background: linear-gradient(#000000, #dddddd);
+    border-radius: 50%;
+}
+
+@keyframes animate {
+    0% {
+        transform: translateY(0) scaleX(1);
+        opacity: 0;
+    }
+
+    15% {
+        opacity: 1;
+    }
+
+    50% {
+        transform: translateY(-150px) scaleX(5);
+    }
+
+    95% {
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(-300px) scaleX(10);
+    }
+}
diff --git a/Art/norib016/art.gif b/Art/norib016/art.gif
diff --git a/Art/norib016/art.html b/Art/norib016/art.html
@@ -0,0 +1,37 @@
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" href="art.css" />
+</head>
+
+<body>
+    <div class="container">
+        <div class="vessel">
+            <div class="top">
+                    <span style="--i:1;"></span>
+                    <span style="--i:3;"></span>
+                    <span style="--i:16;"></span>
+                    <span style="--i:5;"></span>
+                    <span style="--i:13;"></span>
+                    <span style="--i:20;"></span>
+                    <span style="--i:6;"></span>
+                    <span style="--i:7;"></span>
+                    <span style="--i:10;"></span>
+                    <span style="--i:8;"></span>
+                    <span style="--i:17;"></span>
+                    <span style="--i:11;"></span>
+                    <span style="--i:12;"></span>
+                    <span style="--i:14;"></span>
+                    <span style="--i:2;"></span>
+                    <span style="--i:9;"></span>
+                    <span style="--i:15;"></span>
+                    <span style="--i:4;"></span>
+                    <span style="--i:19;"></span>
+                </div>
+                <div class="circle">
+                    <div class="sake"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/include.js b/include.js
@@ -2217,7 +2217,6 @@ let cards = [
     githubLink: 'https://github.com/shag1802' 
   },
   {
-    artName: 'Circle',
     artName: 'Magic Card',
     pageLink: './Art/URK21CS1064/index.html', 
     imageLink: './Art/URK21CS1064/hacktober.png', 
@@ -2559,8 +2558,14 @@ let cards = [
     imageLink: '.Art/amandeep-singh-parihar/Screenshot_2023-10-18_141651.png',
     author: 'amandeepsinghparihar',
     githubLink: 'https://github.com/amandeep-singh-parihar'
-  }
-
+  },
+  {
+    artName: '90 Degree Container with Shifting Base',
+    pageLink: './Art/norib016/art.html',
+    imageLink: './Art/norib016/art.gif',
+    author: 'Sree Bhanu Nori',
+    githubLink: 'https://github.com/norib016'
+  },
 ];
 
 /* -------------------------------------------------------------------------- */