adding my animation to the project (#2382)

* adding my animation to the project * Merge conflict solved for my animation
zero-to-mastery · Oct 31, 2023 · 36c6080 · 36c6080
1 parent 75b483a
commit 36c6080
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 0 deletions.
diff --git a/Art/JeffreyAdu/index.html b/Art/JeffreyAdu/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>RoboPage</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+</head>
+<body>
+	<h1>Robot Friend</h1>
+	<div class="robots">
+		<div class="android"> 
+			<div class="head"> 
+				<div class="eyes"> 
+					<div class="left_eye"></div> 
+					<div class="right_eye"></div>
+				</div> 
+			</div> 
+			<div class="upper_body"> 
+				<div class="left_arm"></div> 
+				<div class="torso"></div> 
+				<div class="right_arm"></div> 
+			</div> 
+			<div class="lower_body"> 
+				<div class="left_leg"></div> 
+				<div class="right_leg"></div> 
+			</div> 
+		</div>
+	</div>
+</body>
+</html>
diff --git a/Art/JeffreyAdu/robotanimation.gif b/Art/JeffreyAdu/robotanimation.gif
diff --git a/Art/JeffreyAdu/style.css b/Art/JeffreyAdu/style.css
@@ -0,0 +1,217 @@
+h1 {
+	text-align: center;
+	font-family: 'Roboto', sans-serif;
+}
+
+.robots {
+}
+
+.head, 
+.left_arm, 
+.torso, 
+.right_arm, 
+.left_leg, 
+.right_leg {
+	 background-color: #5f93e8;
+}
+
+@keyframes changeHeadColor {
+	0% {
+	  background-color: initial;
+	}
+	25% {
+	  background-color: #AD310B;
+	}
+	50% {
+	  background-color: #FF5733;
+	}
+	75% {
+	  background-color: #33FF57;
+	}
+	100% {
+	  background-color: initial;
+	}
+  }
+
+.head { 
+	width: 200px; 
+	margin: 0 auto; 
+	height: 150px; 
+	border-radius: 200px 200px 0 0; 
+	margin-bottom: 10px;
+	transition: all 1s ease-in-out;
+	animation: changeHeadColor 4s infinite;
+} 
+
+
+
+
+
+
+.eyes {
+
+
+}
+
+.head:hover {
+	width: 300px;
+	background-color: #AD310B;
+}
+
+.upper_body { 
+	width: 300px; 
+	height: 150px;
+	margin: auto; 
+	display: flex; 
+
+} 
+
+.left_arm, .right_arm { 
+	width: 40px; 
+	height: 125px;
+	border-radius: 100px; 
+} 
+
+.left_arm { 
+	margin-right: 10px; 
+} 
+
+@keyframes rotateLeftArm {
+	0% {
+	  transform: rotate(0deg);
+	  background-color: initial;
+	}
+	50% {
+	  transform: rotate(50deg);
+	  background-color: blue;
+	}
+	100% {
+	  transform: rotate(0deg);
+	  background-color: initial;
+	}
+  }
+
+.left_arm {
+	margin-right: 10px;
+	animation: rotateLeftArm 2s infinite ease-in-out;
+  }
+
+
+.right_arm { 
+	margin-left: 10px; 
+} 
+
+.right_arm{
+	/*background-color: red;*/
+	transition: all 0.5s ease-in-out ;
+}
+
+.right_arm:hover {
+	transform: rotate(-50deg);
+	background-color: orange;
+
+}
+
+@keyframes rotateArm {
+	0% {
+	  transform: rotate(0deg);
+	  background-color: initial;
+	}
+	50% {
+	  transform: rotate(-50deg);
+	  background-color: orange;
+	}
+	100% {
+	  transform: rotate(0deg);
+	  background-color: initial;
+	}
+  }
+
+  .right_arm {
+	margin-left: 10px;
+	animation: rotateArm 2s infinite ease-in-out;
+  }
+
+
+.torso { 
+	width: 200px; 
+	height: 200px;
+	border-radius: 0 0 50px 50px; 
+	margin: 0 auto; 
+} 
+
+.lower_body { 
+	width: 200px; 
+	height: 200px;
+	/* This is another useful property. Hmm what do you think it does?*/
+	margin: -60px auto;
+
+} 
+
+.left_leg, .right_leg { 
+	width: 40px; 
+	height: 120px;
+	border-radius: 0 0 100px 100px; 
+
+
+} 
+
+.left_leg { 
+	margin-left: 120px; 
+	margin-top: 100px;
+
+
+} 
+
+.left_leg{
+	transition: all 0.5s ease-in-out ;
+}
+
+.left_leg:hover {
+	-webkit-transform: rotate(20deg);
+    -moz-transform: rotate(20deg);
+    -o-transform: rotate(20deg);
+    -ms-transform: rotate(20deg);
+    transform: rotate(20deg);
+    background-color: #AD310B;
+}
+
+.right_leg { 
+	margin-left: 30px; 
+	margin-top: -120px;
+}
+
+.right_leg{
+	transition: all 0.5s ease-in-out ;
+
+}
+
+.right_leg:hover {
+	transform: rotate(-20deg);
+}
+
+.left_eye, .right_eye { 
+	width: 20px; 
+	height: 20px; 
+	border-radius: 15px; 
+	background-color: black;  
+} 
+
+.left_eye { 
+	/* These properties are new and you haven't encountered
+	in this course. Check out CSS Tricks to see what it does! */
+	position: relative; 
+	top: 119px; 
+	left: 40px; 
+} 
+
+.right_eye { 
+	position: relative; 
+	top: 100px; 
+	left: 120px; 
+}
+
+
+
+
+
diff --git a/include.js b/include.js
@@ -2572,6 +2572,13 @@ let cards = [
     author: 'Bhavna',
     githubLink: 'https://github.com/Bhavna2003'
   },
+  {
+    artName: 'Robot Animation',
+    pageLink: './Art/JeffreyAdu/index.html',
+    imageLink: './Art/JeffreyAdu/robotanimation.gif',
+    author: ' JeffreyAdu',
+    githubLink: 'https://github.com/JeffreyAdu'
+  },
   {
     artName: 'Blob Animation',
     pageLink: './Art/blue-butterflies/index.html',