Solve navigation bar task

Tasks/Task 01/navibar/navibar.html

@@ -6,6 +6,21 @@
   <title>Navibar Demo</title>
   
   <script src="navibar.js"></script>
+
+  <navigation-bar>
+    <a href="#home">
+      <img src="./imgs/home.png" />
+    </a>
+    <a href="#sitemap">
+      <img src="./imgs/map.png" />
+    </a>
+    <a href="#buy-coffee">
+      <img src="./imgs/coffee.png" />
+    </a>
+    <a href="#settings">
+      <img src="./imgs/settings.png" />
+    </a>
+  </navigation-bar>
   
   <style>
     
@@ -23,6 +38,7 @@
 
     navigation-bar a img {
       opacity: 0.3;
+      height: 100%;
       /* ... */
     }
 

Tasks/Task 01/navibar/navibar.js

@@ -6,14 +6,17 @@ class CustomNavigationBar extends HTMLElement {
         <style>   
           div.navibar {
             align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-around;
             background-color: #ccc;
             margin: 0;
             width: 100%;
-            height: 100%;
           }
           ::slotted(a) {
-            display: block;
             text-align: center;
+            margin: 10px;
+            height: 10vh;
          }
         </style>
         <div class="navibar">