From a931d4e0ad8d3a7bf733e6be76ebe5d772629593 Mon Sep 17 00:00:00 2001 From: Payam Date: Tue, 3 Jun 2025 13:52:34 +0100 Subject: [PATCH 1/8] Fixed the css for padding, position of the footer, height of the images and alignments. --- Wireframe/index.html | 86 ++++++++++++++++++++++++++++++-------------- Wireframe/style.css | 38 +++++++++++++++++--- 2 files changed, 93 insertions(+), 31 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..8ba314bd5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,65 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

Working with wireframes

+

+ This is a wireframe for a simple web page. It includes a header, main + content area with articles, and a footer. +

+
+ +
+
+ Branch Icon +

1. What is a branch in Git? +

- This is the default, provided code and no changes have been made yet. + In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the + main project. Think of it as a "parallel universe" for your code.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read + more + + +
+ Readme Icon +

3. What is the purpose of a README file?

+

+ You can add a README file to your repository to tell other people why your project is useful, what they can do + with your project, and how they can use it. +

+ Read + more +
+ + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..03a03acf8 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -31,16 +32,19 @@ body { color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + img, svg { width: 100%; object-fit: cover; } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -49,11 +53,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { - position: fixed; + /* 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 @@ -65,10 +71,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*: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 +88,32 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } } + + + +article img { + height: 300px; + width: 300px; + display: block; + margin: 0 auto 1rem auto; +} + +/* Remove extra padding/margin from all Read more links */ +article a { + display: inline-block; + margin: 0; + padding: 0.25em 0.5em; + text-decoration: underline; + color: #0074d9; + background: none; + border: 1px solid #0074d9; +} \ No newline at end of file From 90caca35188123326398e28cc135ef6f0529137e Mon Sep 17 00:00:00 2001 From: Payam Date: Tue, 3 Jun 2025 13:56:06 +0100 Subject: [PATCH 2/8] Changed the footer info --- Wireframe/index.html | 13 ++++++++----- Wireframe/style.css | 27 ++++++--------------------- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8ba314bd5..66c7b6451 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -19,7 +19,8 @@

Working with wireframes

- Branch Icon + Branch Icon

1. What is a branch in Git?

@@ -30,8 +31,9 @@

1. What is a branch in Git?

- Wireframe Icon + Wireframe Icon

2. What is the purpose of a wireframe?

A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of @@ -44,7 +46,8 @@

2. What is the purpose of a wireframe?

- Readme Icon + Readme Icon

3. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do @@ -57,7 +60,7 @@

3. What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + This page is modified by Payam Gh and it is a simple wireframe example.

diff --git a/Wireframe/style.css b/Wireframe/style.css index 03a03acf8..06ebb89c8 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -55,9 +55,12 @@ main { } footer { - /* position: fixed; */ + position: fixed; bottom: 0; + right: 50%; + translate: 50%; text-align: center; + } /* ====== Articles Grid Layout ==== @@ -70,7 +73,9 @@ https://gridbyexample.com/learn/ main { display: grid; grid-template-columns: 1fr 1fr; + grid-template-rows: auto; gap: var(--space); + align-items: stretch; >*:first-child { grid-column: span 2; @@ -96,24 +101,4 @@ article { >img { grid-column: span 3; } -} - - - -article img { - height: 300px; - width: 300px; - display: block; - margin: 0 auto 1rem auto; -} - -/* Remove extra padding/margin from all Read more links */ -article a { - display: inline-block; - margin: 0; - padding: 0.25em 0.5em; - text-decoration: underline; - color: #0074d9; - background: none; - border: 1px solid #0074d9; } \ No newline at end of file From 7290f1664356d1872759c99f4bdf755e3dbd7c2c Mon Sep 17 00:00:00 2001 From: Payam Date: Tue, 3 Jun 2025 14:27:52 +0100 Subject: [PATCH 3/8] The issue with the padding of the button is fixed. --- Wireframe/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 66c7b6451..cbd8863bd 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -53,8 +53,8 @@

3. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

- Read + Read more From cceda96dfdf11d78ba46a99a43d319524991d405 Mon Sep 17 00:00:00 2001 From: Payam Date: Tue, 3 Jun 2025 14:33:26 +0100 Subject: [PATCH 4/8] The marging and padding of the "a" tag in the Wireframe is now as required. --- Wireframe/index.html | 6 +++--- Wireframe/style.css | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index cbd8863bd..5f9788470 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -48,13 +48,13 @@

2. What is the purpose of a wireframe?

Readme Icon -

3. What is the purpose of a README file?

+

3. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

- Read + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index 06ebb89c8..00413008a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -101,4 +101,8 @@ article { >img { grid-column: span 3; } +} + +article a { + margin-top: auto; } \ No newline at end of file From a3e8ed9f263ff939de088c068c80f4106653d0e7 Mon Sep 17 00:00:00 2001 From: Payam Date: Tue, 3 Jun 2025 14:57:40 +0100 Subject: [PATCH 5/8] the alignment of the a tags is now correct as expected. the code should be fine in a state that meets all the requiremetns. --- Wireframe/index.html | 4 ++-- Wireframe/style.css | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5f9788470..f60fff9fe 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -20,7 +20,7 @@

Working with wireframes

Branch Icon + style="width: 300px; height: 300px;" />

1. What is a branch in Git?

@@ -48,7 +48,7 @@

2. What is the purpose of a wireframe?

Readme Icon -

3. What is the purpose of a README file?

+

3. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it. diff --git a/Wireframe/style.css b/Wireframe/style.css index 00413008a..79394a5a2 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -93,6 +93,9 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); + grid-template-rows: auto auto auto 1fr; + /* Add this line */ + align-content: start; >* { grid-column: 2/3; @@ -100,9 +103,18 @@ article { >img { grid-column: span 3; + margin-bottom: 0px; } + + >h2 { + margin: 10px 0; + } + + } article a { margin-top: auto; + + } \ No newline at end of file From 75f31c98f3d2a2e8e74173e543d77eeffd2b0454 Mon Sep 17 00:00:00 2001 From: Payam Date: Wed, 4 Jun 2025 10:32:31 +0100 Subject: [PATCH 6/8] Modified the footer --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index f60fff9fe..2f7d9913e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -60,7 +60,7 @@

3. What is the purpose of a README file?

- This page is modified by Payam Gh and it is a simple wireframe example. + This page is modified by Payam Gh and it is a simple wireframe example!

From 709c2b294b561e2e3a9a16b210c50f5ef3dc0162 Mon Sep 17 00:00:00 2001 From: Payam Date: Thu, 5 Jun 2025 14:50:39 +0100 Subject: [PATCH 7/8] Removed inline styles. Changed the width of the images to the size of the article as requested. --- Wireframe/index.html | 10 +++------- Wireframe/style.css | 2 ++ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 2f7d9913e..e03d3b8e5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -19,8 +19,7 @@

Working with wireframes

- Branch Icon + Branch Icon

1. What is a branch in Git?

@@ -31,9 +30,7 @@

1. What is a branch in Git?

- Wireframe Icon + Wireframe Icon

2. What is the purpose of a wireframe?

A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of @@ -46,8 +43,7 @@

2. What is the purpose of a wireframe?

- Readme Icon + Readme Icon

3. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do diff --git a/Wireframe/style.css b/Wireframe/style.css index 79394a5a2..1c4b7d273 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -104,6 +104,8 @@ article { >img { grid-column: span 3; margin-bottom: 0px; + width: 100%; + height: 500px; } >h2 { From 997d5f3098c79cc576db0adf53f9a2920859c969 Mon Sep 17 00:00:00 2001 From: Payam Date: Thu, 5 Jun 2025 15:22:17 +0100 Subject: [PATCH 8/8] removed the last bit of the inline style --- Wireframe/index.html | 2 +- Wireframe/style.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index e03d3b8e5..02bff9609 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -9,7 +9,7 @@ -

+

Working with wireframes

This is a wireframe for a simple web page. It includes a header, main diff --git a/Wireframe/style.css b/Wireframe/style.css index 1c4b7d273..6ca805371 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -119,4 +119,8 @@ article a { margin-top: auto; +} + +header { + text-align: center; } \ No newline at end of file