update link styling, footer content and article links

- remove footer positioning
- update footer placeholder text
- simplify footer link styling
- add article links, and adjust their styling

Author: edinakurdi

Wireframe/index.html

@@ -22,7 +22,7 @@ <h2>What is a README file?</h2>
       <p>
         A README is ...
       </p>
-      <a href="">Read more</a>
+      <a href="https://www.makeareadme.com/" target="_blank">Read more</a>
     </article>
 
     <article>
@@ -31,7 +31,7 @@ <h2>What is the purpose of a wireframe?</h2>
       <p>
         A wireframe is ...
       </p>
-      <a href="">Read more</a>
+      <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
     </article>
 
     <article>
@@ -40,13 +40,13 @@ <h2>What is a branch in Git?</h2>
       <p>
         A branch in Git is ...
       </p>
-      <a href="">Read more</a>
+      <a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" target="_blank">Read more</a>
     </article>
 
   </main>
   <footer>
     <p>
-      2026 Developer Essentials · <a href="https://curriculum.codeyourfuture.io/itp/">Code Your Future — Intro to Programming</a>
+      This page was built following a provided wireframe design:<a href="https://github.com/edinakurdi/Module-Onboarding/blob/main/Wireframe/README.md">Wireframe</a>
     </p>
   </footer>
 </body>

Wireframe/style.css

@@ -19,7 +19,8 @@ As well as useful links to learn more */
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
+  /* increased font size, since it felt tiny */
+  --font: 1.15rem/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
@@ -35,6 +36,8 @@ a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  padding: 4px 20px;
+  text-decoration: none;
 }
 img,
 svg {
@@ -45,15 +48,22 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+  text-align: center;
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding: 0 8rem;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
+footer a {
+  padding: 5px ;
+  border: none
+}
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view