diff --git a/hoverboard/index.html b/hoverboard/index.html
new file mode 100644
index 0000000..efe9a9e
--- /dev/null
+++ b/hoverboard/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Hoverboard
+
+
+
+
+
+
diff --git a/hoverboard/script.js b/hoverboard/script.js
new file mode 100644
index 0000000..d888c8b
--- /dev/null
+++ b/hoverboard/script.js
@@ -0,0 +1,29 @@
+const container = document.getElementById('container')
+const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
+const SQUARES = 500
+
+for(let i = 0; i < SQUARES; i++) {
+ const square = document.createElement('div')
+ square.classList.add('square')
+
+ square.addEventListener('mouseover', () => setColor(square))
+
+ square.addEventListener('mouseout', () => removeColor(square))
+
+ container.appendChild(square)
+}
+
+function setColor(element) {
+ const color = getRandomColor()
+ element.style.background = color
+ element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
+}
+
+function removeColor(element) {
+ element.style.background = '#1d1d1d'
+ element.style.boxShadow = '0 0 2px #000'
+}
+
+function getRandomColor() {
+ return colors[Math.floor(Math.random() * colors.length)]
+}
\ No newline at end of file
diff --git a/hoverboard/style.css b/hoverboard/style.css
new file mode 100644
index 0000000..1283d2e
--- /dev/null
+++ b/hoverboard/style.css
@@ -0,0 +1,34 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #111;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ max-width: 400px;
+}
+
+.square {
+ background-color: #1d1d1d;
+ box-shadow: 0 0 2px #000;
+ height: 16px;
+ width: 16px;
+ margin: 2px;
+ transition: 2s ease;
+}
+
+.square:hover {
+ transition-duration: 0s;
+}