diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md
new file mode 100644
index 0000000..54d3e68
--- /dev/null
+++ b/animation/02-drop-down/README.md
@@ -0,0 +1,7 @@
+# Dropdown
+
+## Desired Outcome
+
+
+
+### Self Check
diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html
new file mode 100644
index 0000000..a812e22
--- /dev/null
+++ b/animation/02-drop-down/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Dropdown
+
+
+
+
+
+
+
+
diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css
new file mode 100644
index 0000000..349b53e
--- /dev/null
+++ b/animation/02-drop-down/solution/solution.css
@@ -0,0 +1,58 @@
+body {
+ margin: 0;
+}
+
+.dropdown-container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dropdown-menu {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-button {
+ background-color: rgb(108, 238, 255);
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+}
+
+.dropdown-content {
+ visibility: hidden;
+ position: absolute;
+ left: -25%;
+ background-color: rgb(189, 188, 188);
+ width: 160px;
+ display: flex;
+ flex-direction: column;
+ /* max-height: 0; */
+ /* transition: max-height 0.25s ease-out; */
+}
+
+a {
+ font-family: Arial, Helvetica, sans-serif;
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ text-align: center;
+}
+
+.dropdown-menu:hover .dropdown-content {
+ visibility: visible;
+ /* max-height: 500px;
+ transition: max-height 0.25s ease-out; */
+}
+
+.dropdown-menu:hover .dropdown-button {
+ cursor: pointer;
+ background-color: rgb(59, 232, 255);
+}
+
+.dropdown-content a:hover {
+ background-color: #ddd;
+}
diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html
new file mode 100644
index 0000000..53b9d89
--- /dev/null
+++ b/animation/02-drop-down/solution/solution.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Dropdown
+
+
+
+
+
+
+
+
diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css
new file mode 100644
index 0000000..3200457
--- /dev/null
+++ b/animation/02-drop-down/style.css
@@ -0,0 +1,41 @@
+body {
+ margin: 0;
+}
+
+.dropdown-container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dropdown-menu {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-button {
+ background-color: rgb(108, 238, 255);
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+}
+
+.dropdown-content {
+ visibility: hidden;
+ position: absolute;
+ left: -25%;
+ background-color: rgb(189, 188, 188);
+ width: 160px;
+ display: flex;
+ flex-direction: column;
+}
+
+a {
+ font-family: Arial, Helvetica, sans-serif;
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ text-align: center;
+}
diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md
new file mode 100644
index 0000000..30e5365
--- /dev/null
+++ b/animation/03-pop-up/README.md
@@ -0,0 +1,7 @@
+# Popup
+
+## Desired Outcome
+
+
+
+### Self Check
diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html
new file mode 100644
index 0000000..1651eae
--- /dev/null
+++ b/animation/03-pop-up/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Popup
+
+
+
+
+
+
diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css
new file mode 100644
index 0000000..e69de29
diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html
new file mode 100644
index 0000000..1651eae
--- /dev/null
+++ b/animation/03-pop-up/solution/solution.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Popup
+
+
+
+
+
+
diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css
new file mode 100644
index 0000000..e69de29