From 4a1445790e08c39a89466128112d9f3cc4edcd65 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 10:18:12 +0100 Subject: [PATCH 01/20] Read me Purpose --- Wireframe/articles.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 Wireframe/articles.md diff --git a/Wireframe/articles.md b/Wireframe/articles.md new file mode 100644 index 000000000..126bd4530 --- /dev/null +++ b/Wireframe/articles.md @@ -0,0 +1,7 @@ +1. What is the purpose of a README file? + +Its purpose is to tell other people information about why your project is useful, what they can do with your project, and how they can use it. + +2. What is the purpose of a wireframe? + +3. What is a branch in Git? From dfd590b6303340523abefc195cb05c7573276e13 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 10:23:11 +0100 Subject: [PATCH 02/20] ReadMe_Purpose --- Wireframe/articles.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/articles.md b/Wireframe/articles.md index 126bd4530..860c0cf36 100644 --- a/Wireframe/articles.md +++ b/Wireframe/articles.md @@ -4,4 +4,6 @@ Its purpose is to tell other people information about why your project is useful 2. What is the purpose of a wireframe? +Its purpose is to create a schematic in the early stages of digital product design to help visualize and communicate the structure of a product or website. + 3. What is a branch in Git? From 16bf580b83dca52f4e6fe50be589c5246ead24f2 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 10:23:55 +0100 Subject: [PATCH 03/20] GitBranch --- Wireframe/articles.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/articles.md b/Wireframe/articles.md index 860c0cf36..452ae9dc1 100644 --- a/Wireframe/articles.md +++ b/Wireframe/articles.md @@ -7,3 +7,5 @@ Its purpose is to tell other people information about why your project is useful Its purpose is to create a schematic in the early stages of digital product design to help visualize and communicate the structure of a product or website. 3. What is a branch in Git? + +A branch is a sequence of commits in a project. From a7d05d059426d9ed23837768e1a75d398a1764b0 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 10:25:00 +0100 Subject: [PATCH 04/20] Purpose_of_Wireframe --- Wireframe/articles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/articles.md b/Wireframe/articles.md index 452ae9dc1..832bc4eb3 100644 --- a/Wireframe/articles.md +++ b/Wireframe/articles.md @@ -4,7 +4,7 @@ Its purpose is to tell other people information about why your project is useful 2. What is the purpose of a wireframe? -Its purpose is to create a schematic in the early stages of digital product design to help visualize and communicate the structure of a product or website. +Its purpose is to create a schematic in the early stages of digital product design to help visualize and communicate the structure of a website or different products. 3. What is a branch in Git? From 3f749df01418fe5665b77ad9f8e76d760ddb644a Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 21:44:25 +0100 Subject: [PATCH 05/20] add_column --- Wireframe/index.html | 31 ++++++++++++++++++++++++++--- Wireframe/style.css | 25 +++++++++++++++++++++++- Wireframe/test.html | 46 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 Wireframe/test.html diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..b918cf539 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -24,10 +24,35 @@

Title

Read more + +
+
+
+
+ +

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ Read more +
+
+ +

Title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ Read more +
+
+
+
+
+
-

- This is the default, provided code and no changes have been made yet. -

+

© Modified by iteddy16. All rights reserved.

+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..faada576f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,6 +16,29 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +* { + box-sizing: border-box; +} + +/* Create two equal columns that floats next to each other */ +.column { + float: left; + width: 50%; + padding: 10px; + height: 300px; /* Should be removed. Only for demonstration */ +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +.articles { + column-count: 2; +} :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); @@ -38,7 +61,7 @@ a { } img, svg { - width: 100%; + width: 50%; object-fit: cover; } /* ====== Site Layout ====== diff --git a/Wireframe/test.html b/Wireframe/test.html new file mode 100644 index 000000000..095d8408d --- /dev/null +++ b/Wireframe/test.html @@ -0,0 +1,46 @@ + + + + + + +

Create Multiple Columns

+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam + nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat + volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +

+ PlaceHolder +
+
+

Title

+ + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam + nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat + volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +
+ Read more +
+
+
+
+
+ PlaceHolder +

Title

+ + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam + nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat + volutpat. +
+ Read more +
+
+ + From 5bb3f436ea2c8346831b05a0e25fadb1597b1251 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Thu, 8 May 2025 21:57:33 +0100 Subject: [PATCH 06/20] add_content --- Wireframe/index.html | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index b918cf539..d6319dc2d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,37 +8,35 @@
-

Wireframe

+

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + Its purpose is to tell other people information.

- -

Title

+ placeholder +

ReadMe purpose

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Its purpose is to tell other people information about why your project is useful...

- Read more + Read more
-
-

Title

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

- Read more +

What is the purpose of a wireframe?

+

Its purpose is to create a schematic in the early stages of digital product design

+ Read more
-

Title

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

- Read more +

What is a branch in Git?

+

A branch is a sequence of commits in a project.

+ Read more
@@ -46,7 +44,7 @@

Title


-

© Modified by iteddy16. All rights reserved.

+

© Modified by iteddy16. All rights reserved.

- + \ No newline at end of file From 748501b636aaec3357a957be8143450ad5c04186 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Fri, 9 May 2025 11:08:36 +0100 Subject: [PATCH 08/20] Fix_lighthouse issue --- Wireframe/index.html | 16 ++++++++-------- Wireframe/style.css | 13 +++++++++++-- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 5eb3b22be..81d925b95 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,14 +8,14 @@
-

What is the purpose of a README file?

-

+

What is the purpose of a README file?

+

Its purpose is to tell other people information.

- placeholder + placeholder

ReadMe purpose

Its purpose is to tell other people information about why your project is useful... @@ -27,14 +27,14 @@

ReadMe purpose

- -

What is the purpose of a wireframe?

+ placeholder +

What is the purpose of a wireframe?

Its purpose is to create a schematic in the early stages of digital product design

Read more
- -

What is a branch in Git?

+ placeholder +

What is a branch in Git?

A branch is a sequence of commits in a project.

Read more
@@ -44,7 +44,7 @@

What is a branch in Git?


-

© Modified by iteddy16. All rights reserved.

+

© CYF Modified by iteddy16.
All rights reserved.

- - \ No newline at end of file + diff --git a/Wireframe/style.css b/Wireframe/style.css index 164ae6077..9b4767ac2 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -59,6 +59,7 @@ body { color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); @@ -81,11 +82,10 @@ main { footer { position: fixed; bottom: 0; -} - -footer p { text-align: center; + align-content: 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 From 006e5eeeff424d9af1ba7558c10d41bbdbf42ce5 Mon Sep 17 00:00:00 2001 From: Tewodros Bekere Date: Fri, 9 May 2025 12:05:09 +0100 Subject: [PATCH 10/20] final_edit --- Wireframe/index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index b9e1671c3..e8e7b320f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -50,12 +50,11 @@

What is a branch in Git?


-

- © CYF Modified by iteddy16. -
All rights reserved. +

+ © CYF Modifed by iteddy16:
All + Right Reserved.

-