CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 7 additions & 4 deletions b/‎Wireframe/index.html‎
Lines changed: 7 additions & 4 deletions
diff --git a/‎Wireframe/style.css‎
Lines changed: 17 additions & 7 deletions b/‎Wireframe/style.css‎
Lines changed: 17 additions & 7 deletions
@@ -9,6 +9,7 @@
   <body>
     <header>
       <h1>Wireframe To Web Code</h1>
+
       <p>
        Wireframes, README & Git branches, explained.
       </p>
@@ -29,13 +30,11 @@ <h2>Wireframe</h2>
 
         <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
       </article>
-    </main>
-
 
       <article>
         <img src="README-File-Example.jpg" alt="Picture of an example README file" />
 
-        <h2>README</h2>]
+        <h2>README</h2>
 
         <p>
           The purpose of a README file is to provide important information for a project or piece of software. 
@@ -64,7 +63,6 @@ <h2>README</h2>]
         <a href="https://www.makeareadme.com/">Read more</a>
       </article>
 
-    
       <article>
         <img src="CYF-Git-Branch-Example.png" alt="Picture of CYF Example Git Branch Diagram" />
 
@@ -99,8 +97,13 @@ <h2>Git Branches</h2>
           Read more
         </a>
       </article>
+    </main>
+    </body>
 
     <footer>
+      <p>
+        Footers usually contain content links and information about the site overall
+      </p>
     </footer>
   </body>
 </html>
@@ -31,7 +31,8 @@ body {
   color: var(--ink);
   font: var(--font);
 }
-a {
+a {font-family: Arial;
+  font-weight: 600;
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
@@ -40,7 +41,7 @@ img,
 svg {
   width: 100%;
   object-fit: cover;
-  margin: 10px;
+
 }
 
 /* ====== Text Formatting ===== */
@@ -50,8 +51,6 @@ h1, h2 {
 }
 p, ul{ 
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  width: clamp(45ch, 50%, 75ch);
-
 }
 
 
@@ -63,10 +62,19 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+header {
+  display: flex;
+  justify-content:center;
+  align-items: center;
+}
+
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+  border-top-style: solid;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -92,12 +100,14 @@ article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: justify;
+ align-items:center;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
   }
   > img {
     grid-column: span 3;
+    
   }
 }