added styles for header,

added styles for footer.

Author: HM-127BTY

Wireframe/index.html

@@ -16,19 +16,33 @@ <h1>Wireframe</h1>
       </div>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+      <article id="1st">
+        <img src="wiki-readme-crop.png" alt="A black screen showing text from a readme file that has been opened">        
+        <h2>Purpose of a Readme file</h2>
+        <p>A Readme file is a file containing text that is often used to relay information to the user.
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+      <article id="2nd">
+        <img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >
+<!-- Image from https://www.flux-academy.com/blog/20-wireframe-examples-for-web-design to help show wireframe-->        
+        <h2>Purpose of a Wireframe</h2>
+        <p>A wireframe is normally an image that is used to show instructions on how a website is meant to be displayed.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
+      </article>     
+      <article id="3rd">
+        <img src="https://docs.wavemaker.com/learn/assets/images/branching-model-121bd320dd2f5972a5f6ce2fb19a3f4e.png" alt="Connection blue balls in a straight line starting from one called Master then connection to others with lined arrow, from First is extra arrow goign up to red balls labed Bugfix then back down to third blue ball, from 2nd blue ball extra arrow goes down to two green balls labed Feature then back to last blue ball." >
+<!-- Image from https://docs.wavemaker.com/learn/blog/2021/09/17/git-branching-strategy/ to aid in display of Git Branch-->
+        <h2>A branch of Git</h2>
+        <p>A Branch in git is a copy of the main folder where there has been edits or fixes done to in a controlled manner that can then be implemented to the main folder in due time.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        By Hugh Mills - Intro to Programing - May 2026
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -49,10 +49,31 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+header {
+  text-align:center;
+  max-width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+h1 {
+  text-align:center;
+  font-size: 4em;
+  max-width: fit-content;
+  font-weight: bold;
+  font-family: 'Times New Roman', Times, serif;
+}
+#top-comment {
+  text-align:center;
+  margin-bottom: 20px;
+}
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  color: white;
+  padding-top: 10px;
+  background-color: rgb(28, 77, 127);
+  width:100%
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.