Merge pull request #454 from sanjana-1604/Sanjana_Sethiya_project

Added my art work
zero-to-mastery · Aug 14, 2023 · cee2aa5 · cee2aa5
2 parents 9f8bfd3 + ea33c03
commit cee2aa5
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 0 deletions.
diff --git a/Art/Sanjana_Sethiya/Screenshot.png b/Art/Sanjana_Sethiya/Screenshot.png
diff --git a/Art/Sanjana_Sethiya/animation.mp4 b/Art/Sanjana_Sethiya/animation.mp4
diff --git a/Art/Sanjana_Sethiya/index.html b/Art/Sanjana_Sethiya/index.html
@@ -0,0 +1,26 @@
+<!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>Document</title>
+    <link href ="style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="base_canvas">
+        <div class="face">
+            <div class="eye right_eye">
+                <div class="eye_pupil right_eye_pupil"></div>
+            </div>
+            <div class="eye left_eye">
+                <div class="eye_pupil left_eye_pupil"></div>
+            </div>
+            <div class="nose"></div>
+            <div class="mouth"></div>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/Art/Sanjana_Sethiya/style.css b/Art/Sanjana_Sethiya/style.css
@@ -0,0 +1,135 @@
+*
+{
+    margin:0px;
+    padding: 0px;
+}
+@keyframes facelift {
+    from{height:400px;
+    width:400px;}
+    to{height:600px;
+    width:600px;}
+
+}
+.base_canvas
+{
+ background-color:rgb(241, 234, 223);
+ width: 500px;
+ height:500px;
+ border-radius: 20px;  
+ border: 2px solid red; 
+ left: 30%;
+ position: absolute;
+  top: 10%;
+}
+.face
+{
+    background-color: grey;
+    border-radius: 50%;
+    width:400px;
+    height:400px;
+    position:absolute;
+    left:10%;
+    top:10%;    
+    /*animation: facelift 5s infinite alternate;*/
+}
+.eye
+{
+    background-color: black;
+    height: 70px;
+    width:60px;
+   border-radius: 50%;
+
+
+}
+.right_eye
+{
+    position:absolute;
+    left:65%;
+    top:30%;
+
+}
+.left_eye
+{
+    position:absolute;
+    left:15%;
+    top:30%;  
+
+
+}
+.eye_pupil
+{
+    background-color: white;
+    height:40px;
+    width:40px;
+    border-radius: 50%;
+    animation: rolling_eye 5s linear infinite;
+
+}
+
+.nose
+{
+    background-color: black;
+    height:40px;
+    width:70px;
+    border-radius: 50%;
+    position:absolute;
+    left:40%;
+    bottom:30%; 
+}
+.mouth{
+    width:50%;
+    height:10px;
+    background-color: pink;
+    position:absolute;
+    left:25%;
+    bottom:20%;    
+    animation: mouth_expand 5s linear infinite; 
+}
+@keyframes rolling_eye {
+    0%  {
+        height:40px;
+        width:40px; 
+        }  
+    25% {
+        height:45px;
+        width:45px;  
+        }
+        50% {
+            height:50px;
+            width:50px;  
+            }
+            80% {
+                height:45px;
+                width:45px;  
+                }
+            100% {
+                height:40px;
+            width:40px;  
+                }  
+
+
+}
+@keyframes mouth_expand
+{
+    0%  {
+
+        width:0%; 
+        }  
+    25% {
+
+        width:25%;  
+        }
+        50% {
+
+            width:50%;  
+            }
+            80% {
+
+                width:20%;  
+                }
+            100% {
+
+            width:10%;  
+                }  
+
+}