diff --git a/animation.html b/animation.html index 130fc56..3955f6f 100644 --- a/animation.html +++ b/animation.html @@ -5,11 +5,15 @@ CSS Animation +
- Home +
+ Home + Website +

CSS Animation Project

This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions.

diff --git a/css/animation.css b/css/animation.css index 3921748..e74da96 100644 --- a/css/animation.css +++ b/css/animation.css @@ -21,9 +21,16 @@ -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; - padding: 70px; + margin-top: 90px; + margin-bottom: 50px; } } +@media(min-width:1024px){ + .flex{ + margin-left: 175px; + margin-right: 175px; + } +} p{ font-family: 'Raleway', sans-serif; font-weight: 300; @@ -61,6 +68,7 @@ display: flex; -webkit-box-direction: normal; flex-direction: column; margin: 30px; + } .gif{ @@ -92,8 +100,8 @@ display: flex; flex-direction: row; } .right{ - padding-left: 4em; - margin: 0px; + margin-left: 4em; + } } @media(max-width:650px){ @@ -101,4 +109,24 @@ display: flex; max-width: 250px; max-height: 150px; } -} \ No newline at end of file + a{ + font-size: 15px !important; + } + h1{ + font-size: 20px; + } + p{ + font-size: 15px; + } +} + +.buttonwrapper{ + display: -webkit-box; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; +} + +.leftbutton{ + margin-left: 20px; +} diff --git a/nutmeg.html b/nutmeg.html index e69de29..abf1e40 100644 --- a/nutmeg.html +++ b/nutmeg.html @@ -0,0 +1,11 @@ + + + + + + Nutmeg Magazine + + + + + \ No newline at end of file