add footer link and styling for CYF

Author: tomdu3

Wireframe/index.html

@@ -67,7 +67,9 @@ <h2 class="article-title">What Is a Branch in Git?</h2>
   </main>
   <footer>
     <p>
-      &copy; 2026 <strong>&lt;<span class="red-text">Code</span>&gt; Your Future</strong> &amp; Tomislav Dukez.
+      &copy; 2026 <a href="https://codeyourfuture.io/" class="footer-link" target="_blank"
+        aria-label="Code Your Future website">&lt;<span class="red-text">Code</span>&gt; Your Future</a> &amp; Tomislav
+      Dukez.
     </p>
   </footer>
 </body>

Wireframe/style.css

@@ -61,20 +61,7 @@ main {
   padding-bottom: calc(var(--space) * 8);
 }
 
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-  background: var(--paper);
-  border-top: var(--line);
-  padding: var(--space) 0;
 
-  .red-text {
-    color: #c92a2a;
-  }
-}
 
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -134,4 +121,45 @@ article {
   background-color: #a61e22;
   border-color: #a61e22;
   color: white;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background: var(--paper);
+  border-top: var(--line);
+  padding: var(--space) 0;
+
+  .red-text {
+    color: #c92a2a;
+  }
+
+  .footer-link {
+    padding: 0;
+    border: none;
+    display: inline;
+    color: inherit;
+    text-decoration: underline;
+    font-weight: bold;
+    text-decoration-color: #c92a2a;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
+
+    .red-text {
+      color: #c92a2a;
+      transition: color 0.2s ease;
+    }
+
+    &:hover {
+      color: #c92a2a;
+      text-decoration-color: currentColor;
+
+      .red-text {
+        color: var(--ink);
+
+      }
+    }
+  }
 }