Add navlinks

claudiaaziz · Oct 24, 2023 · e030b14 · e030b14
1 parent 049facb
commit e030b14
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/assets/nav-icons/github-icon.png b/assets/nav-icons/github-icon.png
diff --git a/assets/nav-icons/linkedin-icon.png b/assets/nav-icons/linkedin-icon.png
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.css.map b/dist/main.css.map
diff --git a/index.html b/index.html
@@ -14,6 +14,19 @@
 
   <header>
     <h1>Canvas</h1>
+
+    <!-- floating brushes -->
+    <!-- <img src="assets/tab-icon.png" alt="" class="floating-image">
+    <img src="assets/tab-icon.png" alt="" class="floating-image">
+    <img src="assets/tab-icon.png" alt="" class="floating-image"> -->
+
+    <!-- navlinks -->
+      <nav class="links">
+        <a target="_blank" href="https://github.com/claudiaaziz"><img class="link-icon"
+            src="./assets/nav-icons/github-icon.png" alt="" /></a>
+        <a target="_blank" href="https://www.linkedin.com/in/claudia-aziz-b940b0274"><img class="link-icon"
+            src="./assets/nav-icons/linkedin-icon.png" alt="image of linkedin logo" /></a>
+      </nav>
   </header>
 
   <canvas id="canvas"></canvas>

diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -1,11 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
-
 header {
   padding: 20px;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 header h1 {
   font-family: 'Allura', cursive;
   font-size: 4em;
-  color: pink
-}
+  color: pink;
+}
+
+.links a {
+  margin-left: 20px;
+}
+
+.links img {
+  height: 45px;
+}
+