CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 9 additions & 10 deletions b/‎Wireframe/index.html‎
Lines changed: 9 additions & 10 deletions
diff --git a/‎Wireframe/style.css‎
Lines changed: 20 additions & 3 deletions b/‎Wireframe/style.css‎
Lines changed: 20 additions & 3 deletions
@@ -11,10 +11,10 @@
 <body>
 
   <header>
-    <h1 style="text-align: center">Webpage Explanation for Key Concept Questions</h1>
+    <h1>Webpage Explanation for Key Concept Questions</h1>
     <nav>
-      <ul style="justify-content: center; display: flex; gap: var(--space);">
-        <li><a href=" #readme">What is the purpose of a README file?</a></li>
+      <ul>
+        <li><a href="#readme">What is the purpose of a README file?</a></li>
         <li><a href="#wireframe">What is the purpose of a wireframe?</a></li>
         <li><a href="#git-branch">What is a branch in Git?</a></li>
       </ul>
@@ -38,21 +38,20 @@ <h2>What is the purpose of a README file?</h2>
     <article id="wireframe">
       <img src="wireframe.svg" alt="Illustration of a website user interface wireframe" />
       <h2>What is the purpose of a wireframe?</h2>
-      <p>
-        Wireframes are the foundational blueprints of a website or app. Used early in the development process,
+      <p>Wireframes are the foundational blueprints of a website or app. Used early in the development process,
         they help teams visualize structure, map user flows, and establish content hierarchy before committing to costly
         colors, branding, or final UI design.
       </p>
-      <a class="hyperlink" href="https://www.productplan.com/glossary/wireframeFilter/" target="_blank"
-        rel="noopener">Read more</a>
+      <a class="hyperlink" href="https://en.wikipedia.org/wiki/Website_wireframe" target="_blank" rel="noopener">Read
+        more</a>
     </article>
 
     <article id="git-branch">
       <img src="branch.svg" alt="Diagram showing Git branches diverging from a main commit history" />
       <h2>What is a branch in Git?</h2>
-      <p>
-        A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name
-        in Git is typically master or main.<br><br></br>
+      <p id="branch">A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch
+        name
+        in Git is typically master or main.
       </p>
       <a class="hyperlink" href="https://www.w3schools.com/GIT/git_branch.asp?remote=github" target="_blank"
         rel="noopener">Read more</a>
 
@@ -15,7 +15,9 @@ As well as useful links to learn more */
  For you to explore and play with if you are interested
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
+
+
+ ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -50,9 +52,14 @@ Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 footer {
-  position: relative;
+  position: fixed;
   bottom: 0;
   text-align: center;
+  margin-bottom: calc(var(--space) * 2);
+}
+
+#branch {
+  margin-bottom: calc(var(--space) * 4);
 }
 
 /* ====== Articles Grid Layout ====
@@ -79,12 +86,23 @@ Setting the rules for how elements are placed in the article.
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
+h1 {
+  text-align: center;
+}
+
+ul {
+  justify-content: center;
+  display: flex;
+  gap: var(--space)
+}
+
 article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  margin-bottom: calc(var(--space) * 2);
 
   >* {
     grid-column: 2/3;
@@ -105,5 +123,4 @@ article {
     max-width: fit-content;
     vertical-align: top;
   }
-
 }