diff --git a/Art/jnovak5/index.html b/Art/jnovak5/index.html new file mode 100644 index 000000000..8badd7045 --- /dev/null +++ b/Art/jnovak5/index.html @@ -0,0 +1,14 @@ + + + + + + + Novak CSS Animation + + +
+
+
+ + diff --git a/Art/jnovak5/novak.gif b/Art/jnovak5/novak.gif new file mode 100644 index 000000000..ef504ebdb Binary files /dev/null and b/Art/jnovak5/novak.gif differ diff --git a/Art/jnovak5/style.css b/Art/jnovak5/style.css new file mode 100644 index 000000000..89659e6a3 --- /dev/null +++ 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 index caabacea2..42f241e64 100644 --- 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' } ];