Merge pull request #1709 from marionjudy13/marions-happy

added marions spinny smiley
zero-to-mastery · Oct 3, 2022 · cb011b5 · cb011b5
2 parents a3bce27 + 59cda0a
commit cb011b5
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 0 deletions.
diff --git a/Art/marion/index.html b/Art/marion/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Rolling Happy</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+<body>
+    <div>hi!</div>
+    <div class="face-wrapper">
+        <div class="eye-wrapper">
+            <div class="eye"></div>
+            <div class="eye"></div>
+        </div>
+        <div class="block"></div>
+        <div class="smile"></div>
+    </div>
+</body>
+
+</html>
diff --git a/Art/marion/smiles.gif b/Art/marion/smiles.gif
diff --git a/Art/marion/style.css b/Art/marion/style.css
@@ -0,0 +1,80 @@
+body {
+  display: flex;
+  background-color: #000;
+  height: 100vh;
+  width: 100vw;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.face-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  height: 200px;
+  width: 200px;
+  background-color: yellow;
+  overflow: hidden;
+  animation-name: spin;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.face-wrapper:hover {
+  -webkit-animation-play-state: paused;
+  -moz-animation-play-state: paused;
+  -o-animation-play-state: paused;
+  animation-play-state: paused;
+  cursor: pointer;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.eye-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 35%;
+  z-index: 5;
+  margin-top: -60px;
+}
+
+.eye {
+  background-color: #000;
+  height: 50px;
+  width: 15px;
+}
+
+.smile {
+  display: block;
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  border: 15px solid #000;
+  border-radius: 50%;
+  margin-bottom: -20px;
+}
+
+.block {
+  position: absolute;
+  height: 55%;
+  top: 0;
+  background-color: yellow;
+  width: 100%;
+  z-index: 4;
+}
diff --git a/include.js b/include.js
@@ -6519,6 +6519,13 @@ let cards = [
     author: 'Yashraj',
     githubLink: 'https://github.com/yashraj2003e'
   },
+  {
+    artName: 'Rolling Happy',
+    pageLink: './Art/marion/index.html',
+    imageLink: './Art/marion/smiles.gif',
+    author: 'Marion',
+    githubLink: 'https://github.com/marionjudy13'
+  },
 ];
 
 // +--------------------------------------------------------------------------------+