CodeYourFuture · Alaterry8 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/Wireframe/GitBranchimage.avif b/Wireframe/GitBranchimage.avif
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -14,20 +14,20 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including an image, title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including an image, title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including an image, title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
 - [ ] The webpage is styled using a linked .css file.
 - [ ] The webpage is properly committed and pushed to a branch on GitHub.
 

diff --git a/Wireframe/READMEimage.avif b/Wireframe/READMEimage.avif
diff --git a/Wireframe/Wireframeimage.avif b/Wireframe/Wireframeimage.avif
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,58 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
+
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe, README files & Git Branches</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This website will include brief explanations regarding these three topics, to give you a simple idea of how they are used.
       </p>
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="READMEimage.avif" alt="Reading is good for you :D" />
+        <h2>The Purpose Of A README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a summary of your project. 
+          It can include information, instructions and the purpose of the project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
-    </main>
+
+      <article>
+        <img src="Wireframeimage.avif" alt="The skeleton" />
+        <h2>The Purpose Of A Wireframe</h2>
+        <p>
+          A wireframe is created in the planning and brainstorming stages of the project 
+          and outlines the main structure and layout of the website/App.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+      </article>
+
+      <article>
+        <img src="GitBranchimage.avif" alt="Like tree branches" />
+        <h2>What Is A Branch In Git?</h2>
+        <p>
+          A branch allows you to experiment with new features, styles and ideas separate from the "main" codebase.
+          This allows you to try different features without risking changes to the main branch.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+      </article>
+    </main>    
+
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Wireframe Project 2026
       </p>
     </footer>
+
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -18,10 +18,10 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --ink: color-mix(in oklab, var(--color) 5%, rgba(0, 0, 0, 0.856));
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --line: 2px solid;
   --container: 1280px;
 }
 /* ====== Base Elements ======
@@ -75,6 +75,7 @@ Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
 article {
+
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
@@ -87,3 +88,18 @@ article {
     grid-column: span 3;
   }
 }
+
+footer {
+  color: rgb(42, 243, 42);
+  background-color: rgba(18, 18, 18, 0);
+  padding: 5px;
+
+
+
+}
+
+article {
+
+  background-color: rgba(221, 240, 249, 0.645);
+
+}