diff --git a/css/slide21.css b/css/slide21.css
index e69de29..81c0dda 100644
--- a/css/slide21.css
+++ b/css/slide21.css
@@ -0,0 +1,184 @@
+.container {
+ width: 50%;
+ height: auto;
+ margin: 10% 25%;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+}
+
+.shape {
+ width: 80px;
+ height: 80px;
+ border-radius: 10px;
+ margin: 0 0 0 2%;
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
+ box-shadow: 10px 20px 20px rgb(136, 136, 136);
+}
+
+h2 {
+ width: 80px;
+ height: auto;
+ font-size: 20px;
+ font-weight: 100;
+ border-radius: 5px;
+ padding: 2%;
+ margin: 5% 0 30% 0;
+ background-color: beige;
+ text-align: center;
+}
+
+
+@keyframes shake {
+ 0%, 100% {transform: translateY(10px);}
+ 25% {transform: translateY(-10px) rotateZ(10deg);}
+ 75% {transform: translateY(-10px) rotateZ(-10deg);}
+}
+
+.shake {
+ animation-name: shake;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes fade {
+ 0% {opacity: 0;}
+ 25% {opacity: .25;}
+ 50% {opacity: .5;}
+ 75% {opacity: .75;}
+ 100% {opacity: 1;}
+}
+
+.fade {
+ animation-name: fade;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes jelly {
+ 0% {transform: skew(10deg, 10deg);}
+ 50% {transform: skew(-10deg, -10deg);}
+ 100% {transform: skew(0, 0);}
+}
+
+.jelly {
+ animation-name: jelly;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes bounce {
+ 0% {transform: translateY(10px);}
+ 50% {transform: translateY(-10px);}
+}
+
+.bounce {
+ animation-name: bounce;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes tada {
+ 0% {transform: scale(0.25, 0.25);}
+ 50% {transform: scale(0.5, 0.5);}
+ 100% {transform: scale(1, 1);}
+}
+
+.tada {
+ animation-name: tada;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes groove {
+ 0% {border: 1px solid #f13434;}
+ 25% {border: 2px solid #f55454;}
+ 75% {border: 3px solid #e47575;}
+ 100% {border: 0;}
+}
+
+.groove {
+ animation-name: groove;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes swing {
+ 0% {transform: rotateZ(30deg);}
+ 50% {transform: rotateZ(-30deg);}
+ 100% {transform: rotateZ(0);}
+}
+
+.swing {
+ animation-name: swing;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+}
+
+@keyframes squeeze {
+ 0% {transform: scale(0.5, 0.5);}
+ 50% {transform: scale(0.75, 0.75);}
+ 100% {transform: scale(1, 1);}
+}
+
+.squeeze {
+ animation-name: squeeze;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+}
+
+@keyframes flicker {
+ 0%, 100% {transform: translateX(20px);}
+ 50% {transform: translateX(-40px);}
+
+}
+
+.flicker {
+ animation-name: flicker;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes jerk {
+ 0% {transform: translateX(60px);}
+ 50% {transform: translateX(-60px);}
+
+}
+
+.jerk {
+ animation-name: jerk;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-out;
+}
+
+@keyframes blink {
+ 0% {opacity: 0;}
+ 100% {opacity: 1;}
+
+}
+
+.blink {
+ animation-name: blink;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes pop {
+ 0% {transform: scale(2, 2);}
+ 50% {transform: scale(1.5, 1.5);}
+ 100% {transform: scale(1, 1);}
+}
+
+.pop {
+ animation-name: pop;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+
+
+
+
diff --git a/css/slide22.css b/css/slide22.css
index e69de29..4cad01b 100644
--- a/css/slide22.css
+++ b/css/slide22.css
@@ -0,0 +1,27 @@
+.container {
+ width: 90%;
+ height: 20%;
+ margin: 10%;
+}
+
+.object {
+ width: 200px;
+ height: 200px;
+ background-color: orange;
+}
+
+@keyframes animation {
+ 100% {transform: translateX(0) scale(1, 1);}
+ 75% {transform: translateX(250px) scale(0.5, 0.5);}
+ 50% {transform: translateX(500px) scale(0.25, 0.25);}
+ 25% {transform: translateX(750px) scale(0.5, 0.5);}
+ 0% {transform: translateX(1000px) scale(1, 1);}
+}
+
+.animation {
+ animation-name: animation;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-direction: alternate;
+}
\ No newline at end of file
diff --git a/css/slide23.css b/css/slide23.css
index e69de29..6b4a808 100644
--- a/css/slide23.css
+++ b/css/slide23.css
@@ -0,0 +1,41 @@
+.container {
+ position: relative;
+ width: 90%;
+ height: 20%;
+ margin: 10% 30%;
+}
+
+.outter_box {
+ width: 600px;
+ height: 600px;
+ border: 5px solid #8e2de2;
+}
+
+.inner_box {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ margin: -5% 0 0 13%;
+ background-color: skyblue;
+ border: 2px solid black;
+}
+
+h3 {
+ text-align: center;
+ font-weight: 200;
+ color: white;
+ font-size: 30px;
+}
+
+@keyframes animation {
+ 100% {transform: translateX(230px);}
+ 0% {transform: translateX(-220px);}
+}
+
+.animation {
+ animation-name: animation;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: linear;
+}
\ No newline at end of file
diff --git a/css/slide24.css b/css/slide24.css
index e69de29..ead0702 100644
--- a/css/slide24.css
+++ b/css/slide24.css
@@ -0,0 +1,44 @@
+.container {
+ position: relative;
+ width: 90%;
+ height: 20%;
+ margin: 10% 30%;
+}
+
+.outter_box {
+ width: 600px;
+ height: 600px;
+ border: 5px solid #8e2de2;
+}
+
+.inner_box {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ margin: -5% 0 0 -4%;
+ background-color: skyblue;
+ border: 2px solid black;
+}
+
+h3 {
+ text-align: center;
+ font-weight: 200;
+ color: white;
+ font-size: 30px;
+}
+
+@keyframes animation {
+ /* 100% {transform: translateX(270px);} */
+ 0% {transform: translate(0, 0);}
+ 25% {transform: translate(600px, 0);}
+ 50% {transform: translate(600px, 600px);}
+ 75% {transform: translate(0, 600px);}
+ 100% {transform: translate(0, 0);}
+}
+
+.animation {
+ animation-name: animation;
+ animation-duration: 4s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
\ No newline at end of file
diff --git a/sldie21.html b/sldie21.html
index 84a1006..2afec06 100644
--- a/sldie21.html
+++ b/sldie21.html
@@ -4,7 +4,9 @@
-
+
+
+
@@ -32,9 +34,70 @@
-
- The quickest of brown foxes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+