diff --git a/alice.svg b/alice.svg
new file mode 100644
index 0000000..e6c45e2
--- /dev/null
+++ b/alice.svg
@@ -0,0 +1 @@
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c63fa3b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Sequencing animations
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..2e4e6f2
--- /dev/null
+++ b/main.js
@@ -0,0 +1,14 @@
+const aliceTumbling = [
+ { transform: 'rotate(0) scale(1)' },
+ { transform: 'rotate(360deg) scale(0)' }
+];
+
+const aliceTiming = {
+ duration: 2000,
+ iterations: 1,
+ fill: 'forwards'
+}
+
+const alice1 = document.querySelector("#alice1");
+const alice2 = document.querySelector("#alice2");
+const alice3 = document.querySelector("#alice3");
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..80b4fcb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,27 @@
+body {
+ background: #6c373f;
+ display: flex;
+ justify-content: center;
+ }
+
+#alice-container {
+ width: 90vh;
+ display: grid;
+ place-items: center;
+ grid-template-areas:
+ "a1 . ."
+ ". a2 ."
+ ". . a3";
+}
+
+#alice1 {
+ grid-area: a1;
+}
+
+#alice2 {
+ grid-area: a2;
+}
+
+#alice3 {
+ grid-area: a3;
+}
+