CodeYourFuture · miriamjorna · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026 · Feb 4, 2026
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -14,11 +14,11 @@ 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

diff --git a/Wireframe/book.jpg b/Wireframe/book.jpg
diff --git a/Wireframe/github-cat.png b/Wireframe/github-cat.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,60 @@
 <!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" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wireframe, Readme file and Github branches explained</title>
+    <link rel="stylesheet" href="style.css">
   </head>
+
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe, Readme file and Github branches explained</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This is the header, meant to give an overview of what can be found on the page. It could be a whole lot prettier, 
+        but this page was built on the principle that <strong>production beats perfection</strong>.
       </p>
     </header>
+
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+     <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Wireframe</h2>
+                <p>
+                A wireframe is a sketch of the design of a webpage. It is helpful in order to 
+                 plan the page lay-out and usability.
+                </p>
+                <a href="./wireframe-wireframe.html">Read more</a>
+          </article>
+
+          <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Readme files</h2>
+                <p>
+                This article should be on the left side of the page and discuss the usefulness of a Readme file.<br>
+                Readme files are designed to help a page designer figure out 
+                what needs to be done and how they are expected to go about it.
+                </p>
+                <a href="./wireframe-readme.html">Read more</a>
+          </article>
+
+          <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Github branches</h2>
+                <p>
+                  Github branches are elements of a project on Github. Everyone working on a project should make a new branch 
+                  for any small or big change alike. They help keeping track of changes, specifically when working
+                  on a project with several people.  
+                </p>
+                <a href="./wireframe-github.html">Read more</a>
+          </article>
+
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        The footer is where normally more information about the organisation behind the 
+        website can be found, such as contact details/street address and who they are.
     </footer>
+
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,8 +17,8 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --paper: oklch(70% 0 0);
+  --ink: black;
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -45,29 +45,40 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
-}
-footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+header {
+  text-align: center; 
 }
+
 /* ====== 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
 Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
+
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 80px;  /* same as footer height */
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  text-align: center;
+  background-color: #04aa6d;
+}
+
+/* First article spans full width */
+main > article:first-child {
+  grid-column: span 2;
 }
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
@@ -80,10 +91,12 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+}
+
+article > * {
+  grid-column: 2 / 3;
+}
+
+article > img {
+  grid-column: span 3;
 }