From d2d8387443c4179912157ab82d543886d8ed9c55 Mon Sep 17 00:00:00 2001 From: Harini Arunkumar Date: Tue, 20 Jan 2026 14:29:21 +0000 Subject: [PATCH 1/5] Update header title and description --- Wireframe/index.html | 18 ++++-------------- Wireframe/style.css | 31 +++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..5c65c1e7b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,16 @@
-

Wireframe

+

Understanding Git and Wireframes

- This is the default, provided code and no changes have been made yet. + This page explains the basics of Git, the purpose of a README file, and how wireframes help developers plan and structure a webpage before writing code. It gives a clear overview of how these tools are used together in real-world web development.

-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
+
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..349877c4a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,6 +30,7 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + padding: 80px; } a { padding: var(--space); @@ -48,12 +49,34 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: 80px; } footer { position: fixed; + left: 0; + right: 0; bottom: 0; + z-index: 10; + padding: 4px 0; + background: white; text-align: center; } +footer nav{ + display: flex; + justify-content: center; + align-items: center; + gap: var(--space); + flex-direction: row; + flex-wrap: wrap; +} +footer nav a{ + padding: 4px 8px; + border: none; + max-width: fit-content; + text-decoration: none; + color: #222; + font-size: 0.9rem; +} /* ====== 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 @@ -87,3 +110,11 @@ article { grid-column: span 3; } } +main>section{ + display:grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} +main>section article:first-child { + grid-column: 1 / -1; +} From b64dc638512597741ce77f0cb2f4c2836c12501d Mon Sep 17 00:00:00 2001 From: Harini Arunkumar Date: Tue, 20 Jan 2026 14:38:59 +0000 Subject: [PATCH 2/5] Add and style footer navigation --- Wireframe/index.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5c65c1e7b..4899435e5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,7 +17,15 @@

Understanding Git and Wireframes

From b5bc4d1ef1bf6c870361a1c93f7c8bda4e15600c Mon Sep 17 00:00:00 2001 From: Harini Arunkumar Date: Tue, 20 Jan 2026 14:46:33 +0000 Subject: [PATCH 3/5] Add wireframe, README, and Git branch articles --- Wireframe/index.html | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 4899435e5..e886740cb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,34 @@

Understanding Git and Wireframes

- +
+
+ Wireframe illustration +
+

Purpose of a Wireframe

+

A wireframe is a simple visual guide used to plan layout and structure + before adding design and content.

+ Read more +
+
+
+ Git illustration +
+

Purpose of a README File

+

A README file explains what a project is about, how to set it up, and how to use it. It helps other developers understand the project quickly without reading all the code.

+ Read more +
+
+
+ Git illustration +
+

What is a Git Branch

+

A Git branch is a separate version of the code that allows developers to work on new features or fixes without affecting the main codebase. Once the work is complete, the branch can be merged back into the main branch safely.

+ Read more +
+
+
+
-

© 2026 Arunkumar Akilan

-
+ + From 32d8416d83d1847b7d9a0b989d63c317a9229314 Mon Sep 17 00:00:00 2001 From: Harini Arunkumar Date: Tue, 20 Jan 2026 15:19:55 +0000 Subject: [PATCH 4/5] style: layout articles using CSS grid --- Wireframe/style.css | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 349877c4a..fa29d8efb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,32 +51,7 @@ main { margin: 0 auto calc(var(--space) * 4) auto; padding-bottom: 80px; } -footer { - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 10; - padding: 4px 0; - background: white; - text-align: center; -} -footer nav{ - display: flex; - justify-content: center; - align-items: center; - gap: var(--space); - flex-direction: row; - flex-wrap: wrap; -} -footer nav a{ - padding: 4px 8px; - border: none; - max-width: fit-content; - text-decoration: none; - color: #222; - font-size: 0.9rem; -} + /* ====== 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 From f1416d5d03521d822013fda9d3207e2ddd6ac0a0 Mon Sep 17 00:00:00 2001 From: Harini Arunkumar Date: Tue, 20 Jan 2026 15:23:41 +0000 Subject: [PATCH 5/5] Add footer with nav and contact details --- Wireframe/style.css | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index fa29d8efb..349877c4a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,7 +51,32 @@ main { margin: 0 auto calc(var(--space) * 4) auto; padding-bottom: 80px; } - +footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + padding: 4px 0; + background: white; + text-align: center; +} +footer nav{ + display: flex; + justify-content: center; + align-items: center; + gap: var(--space); + flex-direction: row; + flex-wrap: wrap; +} +footer nav a{ + padding: 4px 8px; + border: none; + max-width: fit-content; + text-decoration: none; + color: #222; + font-size: 0.9rem; +} /* ====== 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