Merge pull request #18 from Palaksharma23/drop

Drop
pulkit-30 · Sep 6, 2021 · 39eb14d · 39eb14d
2 parents 962fd20 + 6267adb
commit 39eb14d
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 2 deletions.
diff --git a/Drop Effect/index.css b/Drop Effect/index.css
@@ -0,0 +1,174 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+body {
+    background-color: white;
+
+   height: 100vh;
+
+
+}
+
+.drop {
+    font-size: 2px;
+    display: inline-block;
+    position: relative;
+    top: 20%;
+    left: 45%;
+    text-align: center;
+    border-radius: 30% 70% 70% 30% / 30% 33% 67% 70%;
+    border: solid rgb(251, 251, 251);
+    background-color: rgb(255, 255, 255);
+    box-shadow: 10px 10px 10px 1px rgb(182, 181, 181)  ,
+
+    inset 10px 5px 10px 0.1px rgb(245, 238, 238)  ;
+    height: 222px;
+    width: 269px;
+    animation: drop;
+    animation-duration: 5s;
+    animation-delay: 2s;
+    animation-iteration-count: infinite;
+}
+@keyframes drop {
+    0%{
+        height: 122px;
+        width: 169px;
+    }
+    50% {
+        height:  172px;
+        width: 219px;
+    }
+    100%{
+        height: 222px;
+        width: 269px;
+    }
+}
+
+.smalldrop {
+    font-size: 2px;
+    display: inline-block;
+    position: relative;
+    top: 46%;
+    left: -15%;
+
+    text-align: center;
+    border-radius: 50%;
+    border: solid rgb(251, 251, 251);
+    background-color: rgb(255, 255, 255);
+    box-shadow: 10px 10px 10px 1px rgb(182, 181, 181)  ,
+
+    inset 10px 5px 10px 0.1px rgb(245, 238, 238)  ;
+    height: 192px;
+    width: 219px;
+
+}
+.leftdrop {
+
+    display: inline-block;
+
+
+    text-align: center;
+    border-radius: 19% 81% 48% 52% / 30% 78% 22% 70%;
+    border: solid rgb(251, 251, 251);
+    background-color: rgb(255, 255, 255);
+    box-shadow: 10px 10px 10px 1px rgb(182, 181, 181)  ,
+
+    inset 10px 5px 10px 0.1px rgb(245, 238, 238)  ;
+    height: 192px;
+    width: 219px;
+    animation: left;
+    animation-duration: 5s;
+    animation-delay: 2s;
+    animation-iteration-count: infinite;
+
+}
+@keyframes left {
+    0%{
+height: 92px;
+width: 119px;
+position: fixed;
+    top: 0%;
+    left: 0%;
+
+    }
+50%{
+    height: 142px ;
+    width: 169px;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+
+}
+75%{
+    height:192px ;
+    width:219px ;
+    position: fixed;
+  bottom: 0%;
+  right: 0%;
+}
+100%{
+    height: 92px;
+width: 119px;
+position: fixed;
+    top: 0%;
+    left: 0%;
+}
+}
+.rightdrop {
+
+    display: inline-block;
+    position: fixed;
+    bottom: 0%;
+    right: 0%;
+
+    text-align: center;
+    border-radius: 19% 81% 48% 52% / 68% 17% 83% 32%;
+    border: solid rgb(251, 251, 251);
+    background-color: rgb(255, 255, 255);
+    box-shadow: 10px 10px 10px 1px rgb(182, 181, 181)  ,
+
+    inset 10px 5px 10px 0.1px rgb(245, 238, 238)  ;
+    height: 192px;
+    width: 219px;
+    animation: right;
+    animation-duration: 5s;
+    animation-delay: 2s;
+    animation-iteration-count: infinite;
+
+}
+@keyframes right {
+    0%{
+
+position: fixed;
+bottom: 0%;
+right: 0%;
+
+    }
+50%{
+
+    position: fixed;
+  bottom: 30%;
+  right: 30%;
+  height: 10px;
+  width: 10px;
+
+}
+
+100%{
+    position: fixed;
+    bottom: 0%;
+    right: 0%;
+}
+}
+
+
+footer {
+    position: absolute;
+    bottom: 2px;
+    left: 2px;
+
+}
diff --git a/Drop Effect/index.html b/Drop Effect/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drop Effect</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <span class="drop"> 
+
+
+    </span>
+    <span class="smalldrop">
+
+    </span>
+    <span class="leftdrop">
+
+    </span>
+
+    <span class="rightdrop">
+
+    </span>
+    <footer>
+        <div><p>Credit:- <a href="https://github.com/Palaksharma23" class="atag" >Palak Sharma</a></p></div>
+        <div class="date">Date:- 05-09-2021</div>
+    </footer>
+</body>
+</html>
diff --git a/Drop Effect/j.png b/Drop Effect/j.png
diff --git a/Drop Effect/readme.md b/Drop Effect/readme.md
@@ -0,0 +1,2 @@
+# Drop Effect
+<img src="./j.png"/>
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@
 | Animation Balls               | https://pulkit203.github.io/Windows-Loading-Animation/   |
 | Line Icon Effect              | https://lavishbansal17.github.io/Line-Icon-Effect/       |
 | Hamburger Animation           | https://pulkit203.github.io/Hamburger-Animtion/          |
+| Drop Effect                   | https://palaksharma23.github.io/Drop-Effect/             |
 
 ---
 
@@ -50,14 +51,13 @@
 # Follow these steps to contribute -
 
 1.fork the repo.
-<br/>
+<br/> 
 2.create a new branch
 <br/>
 3.Create a new project
 <br/>
 4.add developer name (linked to your github profile) and Date at footer
 <br/>
-5.add a readme.md file and add a image of your project in it.
 <br/> 6. Open Pull Request
 <br/>