diff --git a/study_group/sg_101919/For Exercises/bio.jpg b/study_group/sg_101919/For Exercises/bio.jpg new file mode 100644 index 0000000..771fed8 Binary files /dev/null and b/study_group/sg_101919/For Exercises/bio.jpg differ diff --git a/study_group/sg_101919/For Exercises/demo.css b/study_group/sg_101919/For Exercises/demo.css new file mode 100644 index 0000000..8707cad --- /dev/null +++ b/study_group/sg_101919/For Exercises/demo.css @@ -0,0 +1,65 @@ +* { + box-sizing: border-box; + font-family: 'Muli', sans-serif; +} + +.wrapper { + width: 90vw; + margin: 50px auto; + padding: 30px; + border:10px double teal; +} + +.bio-heading { + width: 350px; + margin: 30px auto; +} + +img { + width: 100%; + height: auto; + margin-bottom: 30px; + box-shadow: 0 0 20px slategray; +} + +/*make the image bigger when hovered*/ +img:hover { + transform: scale(1.1); + transition: all 200ms ease; +} + +h1 { + text-align: center; + animation: blink 3s infinite; +} + +/*make the name change color*/ +@keyframes blink { + 0% {color: hotpink;} + 50% {color: teal;} + 100% {color: hotpink;} +} + +hr { + position: relative; + width: 900px; + border: 1px solid teal; + animation: movehr 5s infinite; +} + +/*make the hr move from left to right*/ +@keyframes movehr { + 0% {left: 0;} + 25% {left: -180px;} + 50% {left: 0;} + 75% {left: 180px;} + 100% {left: 0;} +} + +.bio { + padding-top: 20px; +} + +.bio p { + font-size: 20px; +} diff --git a/study_group/sg_101919/For Exercises/demo.html b/study_group/sg_101919/For Exercises/demo.html new file mode 100644 index 0000000..ca07d38 --- /dev/null +++ b/study_group/sg_101919/For Exercises/demo.html @@ -0,0 +1,36 @@ + + + Demo: Slam Book + + + + + +
+
+
+ Image +

Ji-Anne Jose

+
+ +
+ +
+

Nickname: ________

+ +

Hobbies:

+
    +
  • Test
    • +
  • Test
    • +
  • Test
    • +
+ +

Dream Destination: ___________

+

Favorite Color: _________

+

Favorite Singer: _________

+

Favorite Music Genre: _________

+
+
+
+ + \ No newline at end of file diff --git a/study_group/sg_101919/For Exercises/exercise.html b/study_group/sg_101919/For Exercises/exercise.html new file mode 100644 index 0000000..d3aab7d --- /dev/null +++ b/study_group/sg_101919/For Exercises/exercise.html @@ -0,0 +1,38 @@ + + + Slam Book + + + + + +
+
+
+ Image +

Ji-Anne Jose

+
+ +
+ +
+

Nickname: ________

+ +

Hobbies:

+
    +
  • Test
    • +
  • Test
    • +
  • Test
    • +
+ +

Dream Destination: ___________

+

Favorite Color: _________

+

Favorite Singer: _________

+

Favorite Music Genre: _________

+
+ +
+ +
+ + \ No newline at end of file diff --git a/study_group/sg_101919/For Exercises/styles.css b/study_group/sg_101919/For Exercises/styles.css new file mode 100644 index 0000000..2a8d4df --- /dev/null +++ b/study_group/sg_101919/For Exercises/styles.css @@ -0,0 +1,60 @@ +* { + box-sizing: border-box; + font-family: 'Muli', sans-serif; +} + +.wrapper { + width: 90vw; + margin: 50px auto; + padding: 30px; + border:10px double teal; +} + +.bio-heading { + width: 350px; + margin: 30px auto; +} + +img { + width: 100%; + height: auto; + margin-bottom: 30px; + box-shadow: 0 0 20px slategray; +} + +img:hover { + /**** #1 ****/ + /*make the image bigger when hovered*/ +} + +/**** #2 ****/ +/*make the name change color*/ +h1 { + text-align: center; + animation: blink 3s infinite; +} + + +@keyframes blink { + /*put your animation here*/ +} + +/**** #3 ****/ +/*make the hr move sideways*/ +hr { + position: relative; + width: 900px; + border: 1px solid teal; + /*?*/ +} + +/*?????*/ + + +.bio { + padding-top: 20px; +} + +.bio p { + font-size: 20px; +} diff --git a/study_group/sg_101919/index.html b/study_group/sg_101919/index.html new file mode 100644 index 0000000..30b3a6e --- /dev/null +++ b/study_group/sg_101919/index.html @@ -0,0 +1,21 @@ + + + CSS Animation + + + + +
+
+
+ Shoe +
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/study_group/sg_101919/shoe.jpg b/study_group/sg_101919/shoe.jpg new file mode 100644 index 0000000..a948d39 Binary files /dev/null and b/study_group/sg_101919/shoe.jpg differ diff --git a/study_group/sg_101919/styles.css b/study_group/sg_101919/styles.css new file mode 100644 index 0000000..f54229f --- /dev/null +++ b/study_group/sg_101919/styles.css @@ -0,0 +1,65 @@ +* { + box-sizing: border-box; + margin: 0; + line-height: 0; +} + +main { + margin: 100px 200px; +} + +.wrapper { + margin: 200px auto; +} + +.image-container { + width: 200px; + height: 200px; +} + +.image-container:hover { + /*width: 220px;*/ + /*height: 220px;*/ + + /*transform: scale(1.2);*/ + + /*transform: rotate(25deg);*/ + + /*transform: skew(-25deg);*/ + + /*transform: translate(50px, 50px);*/ + + /*transform: matrix(1, 0, 0.5, 1, 150, 0);*/ + + transition: all 200ms ease-in-out; +} + +img { + width: 100%; + box-shadow: 6px 6px 10px slategray; +} + +.wheel { + width: 100px; + height: 100px; + border: 10px solid teal; + /*animation: spinit 5s infinite;*/ +} + +/*@keyframes spinit {*/ +/* 0% {*/ +/* transform: rotate(0deg);*/ +/* }*/ +/* 25% {*/ +/* transform: rotate(180deg) scale(0.4);*/ +/* }*/ +/* 50% {*/ +/* transform: rotate(360deg);*/ +/* }*/ +/* 75% {*/ +/* transform: rotate(180deg) scale(0.4);*/ +/* }*/ +/* 100% {*/ +/* transform: rotate(0deg);*/ +/* }*/ +/*}*/ \ No newline at end of file