From 7ce41cca3060fd032d435f97c717a5a2e536d9dd Mon Sep 17 00:00:00 2001
From: medtechlogic
Date: Fri, 5 Jun 2026 15:40:41 +0200
Subject: [PATCH 1/3] feature/wireframe
---
Wireframe/index.html | 32 +++++++++++++++++++++++++++-----
1 file changed, 27 insertions(+), 5 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..3822ae3d9 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,15 +14,37 @@ Wireframe
+
+
-
- Title
+
+ What is a README file?
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+ A README file explains what a project is, how it works, and how to use it.
- Read more
+ Read more
+
+
+
+ What is a Wirframe?
+
+ A wireframe is a simple visual guide that shows the structure of a webpage before design.
+
+ Read more
+
+
+
+
+ What is a Git branch?
+
+ A Git branch is a separate version of your code used to work on features safely.
+
+ Read more
+
+
+
+
From de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91 Mon Sep 17 00:00:00 2001
From: medtechlogic
Date: Sat, 6 Jun 2026 17:54:14 +0200
Subject: [PATCH 2/3] updated-wireframe-assessment
---
Wireframe/index.html | 106 ++++++++++++++++++++++++++++++-------------
Wireframe/style.css | 21 ++++++---
2 files changed, 89 insertions(+), 38 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 3822ae3d9..a561086d3 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,55 +1,97 @@
-
-
+
+
Wireframe
-
+
+
Wireframe
-
- This is the default, provided code and no changes have been made yet.
-
+ This page explains README files, wireframes and Git branches.
+
-
+
+
-
-
- What is a README file?
-
- A README file explains what a project is, how it works, and how to use it.
-
- Read more
-
+ What is a Wireframe?
-
-
- What is a Wirframe?
- A wireframe is a simple visual guide that shows the structure of a webpage before design.
+ A wireframe is a simple visual guide that shows the structure and
+ layout of a webpage before it is designed.
- Read more
-
-
-
- What is a Git branch?
-
- A Git branch is a separate version of your code used to work on features safely.
-
- Read more
+
+ Read more about Wireframes
+
-
+
+
+
+
+ What is a README File?
+
+ A README file explains what a project is, how it works and how other
+ people can use it.
+
+
+
+ Read more about README files
+
+
+
+
+ What is a wireframe?
+
+
+ A wireframe is a simple layout showing structure before design.
+
+
+ Read more
+
+
+
+ <
+
+
+
+
+
+ What is a Git Branch?
+
+
+ A Git branch is a separate version of your code that allows you to
+ work on changes without affecting the main project.
+
+
+
+ Read more about Git branches
+
+
+
+
-
- This is the default, provided code and no changes have been made yet.
-
+ Created for Code Your Future Wireframe project.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..54a4a94bc 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,7 +18,7 @@ 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: black;
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
@@ -30,6 +30,7 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
+ padding-bottom: 60px;
}
a {
padding: var(--space);
@@ -52,7 +53,10 @@ main {
footer {
position: fixed;
bottom: 0;
+ left: 0;
+ width: 100%;
text-align: center;
+ background: var(--paper);
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
@@ -65,10 +69,12 @@ main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
- > *:first-child {
+}
+
+ main > *:first-child {
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.
@@ -80,10 +86,13 @@ article {
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
- > * {
+}
+
+article > * {
grid-column: 2/3;
}
- > img {
+
+article > img {
grid-column: span 3;
}
-}
+
From 942f993c5f1d258f6155912320a6e22a3bcaa6c4 Mon Sep 17 00:00:00 2001
From: medtechlogic
Date: Sun, 7 Jun 2026 14:23:16 +0200
Subject: [PATCH 3/3] corrected
---
Wireframe/index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 50 insertions(+)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index a561086d3..7a28d6225 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -9,27 +9,68 @@
+ header {
+ text-align: center;
+ }
Wireframe
+<<<<<<< HEAD
+
+ Code was provided and changed by Juanita Nwachukwu.
+
+=======
This page explains README files, wireframes and Git branches.
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
+<<<<<<< HEAD
+
+
+ What is a README file?
+
+ A README file explains what a project is, how it works, and how to use it.
+
+ Learn more about README
+
+=======
What is a Wireframe?
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
+<<<<<<< HEAD
+
+
+ What is a Wirframe?
+=======
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
A wireframe is a simple visual guide that shows the structure and
layout of a webpage before it is designed.
+<<<<<<< HEAD
+ Read more
+
+=======
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
+<<<<<<< HEAD
+
+
+ What is a Git branch?
+
+ A Git branch is a separate version of your code used to work on features safely.
+
+ Read more
+=======
Read more about Wireframes
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91
@@ -91,7 +132,16 @@ What is a Git Branch?
+<<<<<<< HEAD
+ footer {
+ text-align: center;
+ }
+
+ Code was provided and changed throughout by Juanita Nwachukwu
+
+=======
Created for Code Your Future Wireframe project.
+>>>>>>> de0ae2e6aca6abb5841f9c390a8f6a3e43ae3a91