Merge pull request #1804 from zero-to-mastery/jnovak5-jnovak5

Jnovak5 jnovak5
zero-to-mastery · Oct 2, 2023 · 9369747 · 9369747
2 parents 5ef0554 + 8d278bb
commit 9369747
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 0 deletions.
diff --git a/Art/jnovak5/index.html b/Art/jnovak5/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Novak CSS Animation</title>
+  </head>
+  <body>
+    <div id="leftLine"></div>
+    <div id="middleLine"></div>
+    <div id="rightLine"></div>
+  </body>
+</html>
diff --git a/Art/jnovak5/novak.gif b/Art/jnovak5/novak.gif
diff --git a/Art/jnovak5/style.css b/Art/jnovak5/style.css
@@ -0,0 +1,67 @@
+body {
+  margion: 0px;
+  background-color: whitesmoke;
+}
+
+#leftLine {
+  display: inline-block;
+  background-color: red;
+  height: 20rem;
+  width: 10rem;
+  margin: 0px;
+  animation-name: flag;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+#middleLine {
+  display: inline-block;
+  background-color: white;
+  height: 20rem;
+  width: 10rem;
+  margin: 0px;
+  animation-name: flag;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+#rightLine {
+  display: inline-block;
+  background-color: green;
+  height: 20rem;
+  width: 10rem;
+  margin: 0px;
+  animation-name: flag;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes flag {
+  0% {
+    box-shadow: 10px 10px black;
+    border-radius: 0px;
+  }
+  25% {
+    box-shadow: 20px 20px black;
+    border-radius: 5px;
+  }
+  50% {
+    box-shadow: 50px 50px black;
+    border-radius: 10px;
+  }
+  100% {
+    box-shadow: 75px 75px black;
+    border-radius: 15px;
+  }
+
+  from {
+    transform: skew(0deg, 0deg) rotateY(0deg) translate(0rem, 0rem) scale(0, 0);
+  }
+  to {
+    transform: skew(-20deg, -10deg) rotateY(45deg) translate(15rem, 10rem)
+      scale(1, 1);
+  }
+}
diff --git a/include.js b/include.js
@@ -61,6 +61,13 @@ let cards = [
     imageLink: './Art/runningBars/running.gif',
     author: 'Daniel',
     githubLink: 'https://github.com/dsauce817'
+  },
+  {
+    artName: 'Simple Mexican Flag',
+    pageLink: './Art/index.html',
+    imageLink: './Art/novak.gif',
+    author: 'Jnovak5',
+    githubLink: 'https://github.com/jnovak5'
   }
 ];