fixed formatting issues

zero-to-mastery · Oct 2, 2023 · 40d2cd3 · 40d2cd3
2 parents 5ef0554 + 49bd067
commit 40d2cd3
Show file tree

Hide file tree

Showing 4 changed files with 76 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,55 @@
+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'
   }
 ];