add icons functionality

assets/css/icon.css

@@ -0,0 +1,32 @@
+main {
+    display: grid;
+    
+    grid-template-columns: repeat( auto-fit, minmax(256px, 1fr) );
+    overflow-x: hidden;
+    gap: 32px;
+}
+
+/* @media screen and (min-width: ){
+    
+}  */
+
+Icon {
+    display: flex;
+
+    padding: 32px;
+    text-align: end;
+    
+    justify-content: space-between;
+    align-items: center;    
+    
+    outline: 1px solid black;
+}
+
+Icon:hover {
+    cursor: pointer;
+}
+
+Icon img {
+    width: 8rem;
+    height: 8rem;
+}

assets/js/icon.js

@@ -0,0 +1,35 @@
+const main = document.querySelector("main");
+
+const icons = main.querySelectorAll("Icon");
+
+icons.forEach((icon) => {
+    let iconImage = icon.getAttribute("image");
+    let link = icon.getAttribute("href");
+    let title = icon.getAttribute("title");
+
+    console.log(iconImage, link, title);
+
+    if (iconImage) {
+        let imageElement = document.createElement("img");
+        
+        imageElement.src = iconImage;
+        imageElement.height = 64;
+        imageElement.width = 64;
+
+        icon.appendChild(imageElement);
+    }
+
+    if (link) {
+        icon.addEventListener('click', (e) => {
+            window.open(link, "_blank");
+        });
+    }
+
+    if (title) {
+        let titleElement = document.createElement("span");
+        
+        titleElement.textContent = title;
+        icon.appendChild(titleElement);
+    }
+    
+});