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.
+
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. This project page is fully responsive and highlights CSS keyframe animations and CSS transitions.
diff --git a/css/animation.css b/css/animation.css
index e74da96..daed0fb 100644
--- a/css/animation.css
+++ b/css/animation.css
@@ -4,7 +4,7 @@
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
- align-items: center;
+ align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
@@ -118,13 +118,17 @@ display: flex;
p{
font-size: 15px;
}
+ iframe{
+ width: 250px;
+ height: 150px;
+ }
}
.buttonwrapper{
display: -webkit-box;
display: flex;
- -webkit-box-pack: justify;
- justify-content: space-between;
+ -webkit-box-pack: start;
+ justify-content: flex-start;
}
.leftbutton{
diff --git a/css/nutmeg.css b/css/nutmeg.css
new file mode 100644
index 0000000..302fddc
--- /dev/null
+++ b/css/nutmeg.css
@@ -0,0 +1,139 @@
+.flex{
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: flex-start;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+
+}
+@media(min-width:700px){
+.flex{
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ flex-direction: row;
+ 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;
+ font-size: 20px;
+ margin: 0%;
+
+}
+a.leftbutton{
+ font-size: 25px;
+ color: black;
+ font-family: 'Raleway', sans-serif;
+ font-weight: 300;
+ border: black 2px solid;
+ padding: 10px;
+ text-decoration: none;
+
+}
+a.leftbutton:hover{
+ text-decoration: none;
+ color: white;
+ border: #1d9c9f 2px solid;
+ background-color: #1d9c9f;
+ -webkit-transition: ease-in .75s;
+ transition: ease-in .75s;
+}
+h1{
+ margin:0%;
+ font-family: 'Abril Fatface', cursive;
+
+}
+.right{
+display: -webkit-box;
+display: flex;
+-webkit-box-orient: vertical;
+-webkit-box-direction: normal;
+ flex-direction: column;
+ margin: 30px;
+
+
+}
+.gif{
+ max-width: 500px;
+ max-height: 400px;
+}
+.box{
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+}
+
+@media(min-width:700px){
+ .box{
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ flex-direction: row;
+ }
+ .right{
+ margin-left: 4em;
+
+ }
+}
+@media(max-width:400px){
+ .gif{
+ max-width: 250px;
+ max-height: 150px;
+ }
+ a{
+ font-size: 15px !important;
+ }
+ h1{
+ font-size: 20px;
+ }
+ p{
+ font-size: 15px;
+ }
+}
+
+.buttonwrapper{
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: start;
+ justify-content: flex-start;
+}
+
+.leftbutton{
+ margin-left: 20px;
+}
+.embed-responsive {
+ position: relative;
+ display: block;
+ height: 0;
+ padding: 0;
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index db3b810..b024006 100644
--- a/css/style.css
+++ b/css/style.css
@@ -234,6 +234,7 @@ a.fab:hover{
a.fas{
font-size: 5em;
color: black;
+ text-decoration: none;
}
a.fas:hover{
color: #1d9c9f;
diff --git a/farmhouse.html b/farmhouse.html
index e69de29..0553999 100644
--- a/farmhouse.html
+++ b/farmhouse.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
Farmhouse Cafe
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/img/Fall 2019 Health and Wellness Magazine.pdf b/img/Fall 2019 Health and Wellness Magazine.pdf
new file mode 100644
index 0000000..ee7dac9
Binary files /dev/null and b/img/Fall 2019 Health and Wellness Magazine.pdf differ
diff --git a/index.html b/index.html
index 7edb911..0b1836c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
Meira Tompkins
-
diff --git a/nutmeg.html b/nutmeg.html
index abf1e40..a787976 100644
--- a/nutmeg.html
+++ b/nutmeg.html
@@ -4,8 +4,25 @@
Nutmeg Magazine
+
+
+
+
+
+
+
+
+
+