From ae5b2f327e2b085619ff0c79c459bcbb85cfae6f Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Sun, 18 Jan 2026 19:32:56 +0000
Subject: [PATCH 01/10] added 2 articles

---
 Wireframe/index.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..86b1fb9ac 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -22,6 +22,24 @@ <h2>Title</h2>
           voluptates. Quisquam, voluptates.
         </p>
         <a href="">Read more</a>
+      </article>
+            <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="" />
+        <h2>Title</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+          voluptates. Quisquam, voluptates.
+        </p>
+        <a href="">Read more</a>
       </article>
     </main>
     <footer>

From f0529786c6eecfe9da0f577fcaf299035026329a Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Sun, 18 Jan 2026 20:00:08 +0000
Subject: [PATCH 02/10] testing pink color for footer

---
 Wireframe/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..8b1bb1382 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -53,6 +53,7 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background-color: pink;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

From 81a422c9465d1796d50967e7e037d280cd6cb670 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Sun, 18 Jan 2026 20:57:10 +0000
Subject: [PATCH 03/10] removed pink color on footer

---
 Wireframe/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 8b1bb1382..be835b6c7 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -53,7 +53,6 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
-  background-color: pink;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

From 96fce988c5d8e21cf8c6602c2bc6b8ca22d7391a Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Sun, 18 Jan 2026 23:00:05 +0000
Subject: [PATCH 04/10] changed the heading to center and updated the text to
 Wireframe

---
 Wireframe/index.html | 4 ++--
 Wireframe/style.css  | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 86b1fb9ac..c0f335949 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,9 +8,9 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>WIREFRAME</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A two-dimensional visual representation for speed
       </p>
     </header>
     <main>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..cd68cf892 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -31,6 +31,12 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+h1{
+  text-align: center;
+  padding: calc(var(--space));
+  font: 300%/1.5 system-ui;
+  font-weight: 700;
+}
 a {
   padding: var(--space);
   border: var(--line);

From 114dfa9c55b6f57dfd872fce65cfa10117c61f64 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 09:52:48 +0000
Subject: [PATCH 05/10] Updated html with more content

---
 Wireframe/index.html | 42 +++++++++++++++----------------
 Wireframe/style.css  | 60 ++++++++++++--------------------------------
 2 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index c0f335949..591910707 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -5,47 +5,45 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   </head>
   <body>
     <header>
-      <h1>WIREFRAME</h1>
-      <p>
-        A two-dimensional visual representation for speed
-      </p>
+      <h1>STARTING SIMPLE</h1>
+      <h2>
+        Breaking down the development process
+      </h2>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="placeholder" />
+        <h2>README.md</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
+          The purpose of a README is to explain what the project is about. It provides a summary of the project, the technology stack used, and instructions for any required dependencies.        </p>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a> 
       </article>
             <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="placeholder" />
+        <h2>Wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+           A wireframe is like a draft for your project. It shows where things will go and how they work before you add colors, images, or final design details
         </p>
-        <a href="">Read more</a>
+        <a href="ttps://www.productplan.com/glossary/wireframe/">Read more</a>
       </article>
             <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="placeholder" />
+        <h2>A Branch in Git</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git branch is a separate line of development within a repository. It lets you work on new features or fixes independently without affecting the main code until you’re ready to merge.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        Wireframe|Sprint 1| Angela McLeary 2026
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index cd68cf892..676244f97 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,25 +1,8 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
 
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- 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 ====== */
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
+  --font: 100%/1.5 "Roboto";
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
@@ -34,9 +17,13 @@ body {
 h1{
   text-align: center;
   padding: calc(var(--space));
-  font: 300%/1.5 system-ui;
+  font: 300%/1.5 "Roboto";
   font-weight: 700;
 }
+h2{
+  text-align: center;
+  font: 200% "Roboto";
+}
 a {
   padding: var(--space);
   border: var(--line);
@@ -47,26 +34,6 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
-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;
-}
-/* ====== 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;
@@ -75,11 +42,10 @@ main {
     grid-column: span 2;
   }
 }
-/* ====== Article Layout ====== 
-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.
-*/
+main {
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+}
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -93,3 +59,9 @@ article {
     grid-column: span 3;
   }
 }
+footer {
+  position: fixed;
+  bottom: 0;
+  text-align: center;
+  width: 100%;
+}
\ No newline at end of file

From 9897acbe9abc24fc24b93f7c04392e6939f20ae2 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 12:29:18 +0000
Subject: [PATCH 06/10] reset css and set body styling

---
 Wireframe/index.html |  2 +-
 Wireframe/style.css  | 75 ++++++--------------------------------------
 2 files changed, 10 insertions(+), 67 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 591910707..11333236b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -43,7 +43,7 @@ <h2>A Branch in Git</h2>
     </main>
     <footer>
       <p>
-        Wireframe|Sprint 1| Angela McLeary 2026
+        Wireframe|Sprint 1| 2026
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 676244f97..7eaaed996 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,67 +1,10 @@
-
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 "Roboto";
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
-body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
-}
-h1{
-  text-align: center;
-  padding: calc(var(--space));
-  font: 300%/1.5 "Roboto";
-  font-weight: 700;
-}
-h2{
-  text-align: center;
-  font: 200% "Roboto";
-}
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-}
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
-}
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
-}
-article {
-  border: var(--line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
-}
-footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
-  width: 100%;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body{
+  background: rgb(245, 245, 245);
+  color: rgb(9, 9, 9);
+  font-family: "Roboto", Helvetica, sans-serif; 
 }
\ No newline at end of file

From 16967ee0f970d9c426226faa045600fb56c08fab Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 12:49:06 +0000
Subject: [PATCH 07/10] styled main attributes

---
 Wireframe/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 7eaaed996..67cd3036f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -7,4 +7,25 @@ body{
   background: rgb(245, 245, 245);
   color: rgb(9, 9, 9);
   font-family: "Roboto", Helvetica, sans-serif; 
+}
+header{
+  text-align: center ;
+}
+h1, h2 {
+  margin: 1rem 0;
+}
+h1{
+  font-size: 2.5rem;
+}
+h2{
+  font-size: 1.7rem;
+}
+p{line-height: 1.2;}
+a{
+  display: inline-block;
+  width: 150px;
+  text-decoration: none;
+  border: 2px solid red;
+  padding: 10px 15px;
+
 }
\ No newline at end of file

From 56b385722881f9a795fd995c2d435ef3eda8c5d1 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 13:02:47 +0000
Subject: [PATCH 08/10] set out the grid for the content

---
 Wireframe/style.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 67cd3036f..d9b14f6cc 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -23,9 +23,17 @@ h2{
 p{line-height: 1.2;}
 a{
   display: inline-block;
-  width: 150px;
+  width: 140px;
   text-decoration: none;
   border: 2px solid red;
   padding: 10px 15px;
-
+  margin-top: 1rem;
+}
+main{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 1rem;
+  row-gap: 1.5rem;
+  max-width: 1280px;
+  margin: 1rem auto 4rem auto;
 }
\ No newline at end of file

From 91f5d9b52072fd683ad970786c3cd0d46a2a9d82 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 15:00:01 +0000
Subject: [PATCH 09/10] added contents container for text in article

---
 Wireframe/index.html | 55 +++++++++++++++++++++++++++++---------------
 Wireframe/style.css  | 15 +++++++++++-
 2 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 11333236b..a35733831 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,49 +1,68 @@
-<!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" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <header>
       <h1>STARTING SIMPLE</h1>
-      <h2>
-        Breaking down the development process
-      </h2>
+      <h2>Breaking down the development process</h2>
     </header>
     <main>
       <article>
         <img src="placeholder.svg" alt="placeholder" />
-        <h2>README.md</h2>
-        <p>
-          The purpose of a README is to explain what the project is about. It provides a summary of the project, the technology stack used, and instructions for any required dependencies.        </p>
-        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a> 
+        <div class="content">
+          <h2>README.md</h2>
+          <p>
+            The purpose of a README is to explain what the project is about. It
+            provides a summary of the project, the technology stack used, and
+            instructions for any required dependencies.
+          </p>
+          <a
+            href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+            >Read more</a
+          >
+        </div>
       </article>
-            <article>
+      <article>
         <img src="placeholder.svg" alt="placeholder" />
+        <div class="content">
         <h2>Wireframe</h2>
         <p>
-           A wireframe is like a draft for your project. It shows where things will go and how they work before you add colors, images, or final design details
+          A wireframe is like a draft for your project. It shows where things
+          will go and how they work before you add colors, images, or final
+          design details
         </p>
         <a href="ttps://www.productplan.com/glossary/wireframe/">Read more</a>
+        </div>
       </article>
-            <article>
+      <article>
         <img src="placeholder.svg" alt="placeholder" />
+        <div class="content">
         <h2>A Branch in Git</h2>
         <p>
-          A Git branch is a separate line of development within a repository. It lets you work on new features or fixes independently without affecting the main code until you’re ready to merge.
+          A Git branch is a separate line of development within a repository. It
+          lets you work on new features or fixes independently without affecting
+          the main code until you’re ready to merge.
         </p>
-        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
+        <a
+          href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
+          >Read more</a
+        >
+        </div>
       </article>
     </main>
     <footer>
-      <p>
-        Wireframe|Sprint 1| 2026
+      <p>Wireframe|Sprint 1| 2026</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index d9b14f6cc..7d7acb915 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -36,4 +36,17 @@ main{
   row-gap: 1.5rem;
   max-width: 1280px;
   margin: 1rem auto 4rem auto;
-}
\ No newline at end of file
+}
+main > article:first-child{
+  grid-column: 1/-1;
+} 
+main > aticle:not(:first-child){
+  margin-top: 1.85rem;
+}
+
+footer{
+  text-align: center;
+  padding: 1rem;
+  background-color: rgb(238, 236, 233);
+  position: relative;
+}

From a46d9997265e3c5f61282a54015dbb06a12313f2 Mon Sep 17 00:00:00 2001
From: AngelaMcLeary <angela.mcleary@outlook.com>
Date: Mon, 19 Jan 2026 15:45:48 +0000
Subject: [PATCH 10/10] layout fixed

---
 Wireframe/index.html | 34 +++++++++++++++++-----------------
 Wireframe/style.css  | 24 ++++++++++++++++++++----
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index a35733831..91cb30348 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -36,28 +36,28 @@ <h2>README.md</h2>
       <article>
         <img src="placeholder.svg" alt="placeholder" />
         <div class="content">
-        <h2>Wireframe</h2>
-        <p>
-          A wireframe is like a draft for your project. It shows where things
-          will go and how they work before you add colors, images, or final
-          design details
-        </p>
-        <a href="ttps://www.productplan.com/glossary/wireframe/">Read more</a>
+          <h2>Wireframe</h2>
+          <p>
+            A wireframe is like a draft for your project. It shows where things
+            will go and how they work before you add colors, images, or final
+            design details to guide the design process.
+          </p>
+          <a href="ttps://www.productplan.com/glossary/wireframe/">Read more</a>
         </div>
       </article>
       <article>
         <img src="placeholder.svg" alt="placeholder" />
         <div class="content">
-        <h2>A Branch in Git</h2>
-        <p>
-          A Git branch is a separate line of development within a repository. It
-          lets you work on new features or fixes independently without affecting
-          the main code until you’re ready to merge.
-        </p>
-        <a
-          href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
-          >Read more</a
-        >
+          <h2>A Branch in Git</h2>
+          <p>
+            A Git branch is a separate line of development within a repository.
+            It lets you work on new features or fixes independently without
+            affecting the main code until you are ready to merge.
+          </p>
+          <a
+            href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
+            >Read more</a
+          >
         </div>
       </article>
     </main>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 7d7acb915..a377eeeb4 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -15,10 +15,12 @@ h1, h2 {
   margin: 1rem 0;
 }
 h1{
-  font-size: 2.5rem;
+  font-size: 3rem;
+  font-weight: 900;
 }
 h2{
   font-size: 1.7rem;
+  font-weight: 600;
 }
 p{line-height: 1.2;}
 a{
@@ -35,13 +37,27 @@ main{
   column-gap: 1rem;
   row-gap: 1.5rem;
   max-width: 1280px;
-  margin: 1rem auto 4rem auto;
+  margin: 0 auto 4rem;
+  padding: 0 1rem;
+  height: auto;
 }
 main > article:first-child{
   grid-column: 1/-1;
 } 
-main > aticle:not(:first-child){
-  margin-top: 1.85rem;
+
+article {
+  display: flex;
+  flex-direction: column;
+  background: whitesmoke;
+  max-height: 500px;
+  border: 1px solid black;
+}
+
+article img{
+  display: block;
+  width: 100%;
+  max-height: 300px;
+  border: 1px solid black;
 }
 
 footer{
