diff --git a/README.md b/README.md
index 817afdb..9f76f99 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-SI16-VLTK
-==========
+# LEARNING HOW TO WALK WHILE CAT-WALKING
-Change me.
\ No newline at end of file
+eheh
diff --git a/index.html b/index.html
index a3f58fa..6cd68b0 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,37 @@
-
-
-
-
- SI16
-
-
-hello world
-
-
\ No newline at end of file
+
+
+
+
+
+ Learning how to walk while cat-walking
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/svg/etc_1b.svg b/static/svg/etc_1b.svg
new file mode 100644
index 0000000..e15cde1
--- /dev/null
+++ b/static/svg/etc_1b.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/svg/function_2b.svg b/static/svg/function_2b.svg
new file mode 100644
index 0000000..5246724
--- /dev/null
+++ b/static/svg/function_2b.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/svg/home_1b.svg b/static/svg/home_1b.svg
new file mode 100644
index 0000000..0174bc5
--- /dev/null
+++ b/static/svg/home_1b.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/svg/replacement_2.svg b/static/svg/replacement_2.svg
new file mode 100644
index 0000000..7ea05d3
--- /dev/null
+++ b/static/svg/replacement_2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/svg/vernacular-map_sg5.svg b/static/svg/vernacular-map_sg5.svg
new file mode 100644
index 0000000..67ffc60
--- /dev/null
+++ b/static/svg/vernacular-map_sg5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/sticker.js b/sticker.js
new file mode 100644
index 0000000..05a12e2
--- /dev/null
+++ b/sticker.js
@@ -0,0 +1,57 @@
+const informations = document.getElementById("information-list");
+const stickerContainer = document.getElementById("sticker-container");
+
+infoList = Array.from(informations.children);
+loopIndex = 0;
+
+let windowWidth;
+let windowHeight;
+
+let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];
+
+window.addEventListener("load", () => {
+ getSize();
+ let color = palette[(palette.length * Math.random()) | 0];
+ document.documentElement.style.setProperty("--background", color);
+});
+
+window.addEventListener("resize", (e) => {
+ getSize();
+});
+
+function getSize() {
+ windowWidth = stickerContainer.clientWidth;
+ windowHeight = stickerContainer.clientHeight;
+}
+
+function percentagePosition(e, target) {
+ let targetRect = target.getBoundingClientRect();
+ let x = e.clientX - targetRect.left;
+ let y = e.clientY - targetRect.top;
+ return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
+}
+
+window.addEventListener("click", (e) => {
+ placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);
+
+ // Cringe sorry
+ if (loopIndex < infoList.length - 1) {
+ loopIndex++;
+ } else {
+ loopIndex = 0;
+ }
+});
+
+function placeSticker(position, element) {
+ let sticker = element.cloneNode(true);
+ sticker.classList.add("sticker");
+ sticker.style.left = position.x + "%";
+ sticker.style.top = position.y + "%";
+
+ sticker.style.transform = `
+ translate(-50%, -50%)
+ rotate(${Math.random() * 40 - 20}deg)
+ `;
+
+ stickerContainer.appendChild(sticker);
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a70bede
--- /dev/null
+++ b/style.css
@@ -0,0 +1,90 @@
+:root {
+ --thickness: 1px;
+ --background: #9fd3a8;
+ --font: Arial, Helvetica, sans-serif;
+}
+
+html,
+body {
+ margin: 0;
+ background-color: var(--background);
+ font-size: 24px;
+ font-family: var(--font);
+ height: 100vh;
+}
+
+/* .container {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 100%;
+ transform: translate(-50%, -50%);
+
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+
+ justify-content: start;
+ align-items: center;
+}
+
+.about-button {
+ width: 200px;
+ height: 200px;
+ border: var(--thickness) solid currentColor;
+ background-color: var(--background);
+ border-radius: 50%;
+ font-size: 48px;
+}
+
+.about-button:hover {
+ background-color: white;
+ cursor: pointer;
+} */
+
+/* .title, */
+
+.info {
+ display: inline-block;
+ padding: 8px;
+ background-color: var(--background);
+ border: var(--thickness) solid currentColor;
+ margin: 0;
+}
+
+#sticker-container {
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+
+ z-index: 100;
+}
+
+.sticker {
+ position: absolute;
+ user-select: none;
+ border: var(--thickness) solid currentColor;
+ border-radius: 16px;
+ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+}
+
+.sticker.info {
+ background-color: white;
+}
+
+.informations-list {
+ display: none;
+}
+
+.sticker.deco {
+ background-color: white;
+ min-width: 64px;
+ min-height: 64px;
+ padding: 16px;
+}
+
+li {
+ list-style: none;
+}