diff --git a/functional.js b/functional.js
index e69de29..cca2d41 100644
--- a/functional.js
+++ b/functional.js
@@ -0,0 +1,17 @@
+const ids = ["a1", "a2", "a3", "b1", "b2", "b3", "c1", "c2", "c3"];
+
+document.onclick = function (event) {
+
+ const { target } = event;
+ const { id } = target;
+
+ if (ids.includes(id)) {
+ const box = document.getElementById(id);
+ box.classList.add('clicked');
+ box.classList.remove('unclicked');
+ document.addEventListener('click', function() {
+ box.classList.add('unclicked');
+ box.classList.remove('clicked');
+ }, true);
+ }
+}
diff --git a/index.html b/index.html
index e073445..3ed8c0d 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
Semicolon Fingers
-
+
@@ -13,35 +13,46 @@
- Home
- Ini adalah halaman home
-
+
+ Semicolon Fingers
+
+
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+
+
-
-
diff --git a/styles.css b/styles.css
index dc240a1..c7c6ae0 100644
--- a/styles.css
+++ b/styles.css
@@ -1,9 +1,30 @@
html {
background: #95A5A7;
- padding: 3rem 5rem;
font-family: monospace;
+ height: 100%;
}
+main {
+ margin: 3vmin 5vmin;
+ text-align: center;
+}
+
+h1 {
+ margin-bottom: 5vmin;
+}
+
+table {
+ display: inline-block;
+ margin: 0 auto;
+}
+
+.poem {
+ min-width: 19vmin;
+ min-height: 19vmin;
+ margin: 1vmin 4vmin;
+}
+
+
/** media queries **/
/* Extra small devices (phones, 600px and down) */
@@ -33,6 +54,7 @@ html {
/** end media queries **/
+
/** neumorphic styles **/
.clicked {
@@ -47,6 +69,7 @@ html {
box-shadow: 9.91px 9.91px 15px #889698, -9.91px -9.91px 15px #A2B4B6;
}
+/* unused for now */
.hovered {
background: #95A5A7;
border-radius: 15%;