From 00de6769bc8ba2362f95d75855ebb7c5525fd0f0 Mon Sep 17 00:00:00 2001 From: Mohsen Zamani Date: Thu, 8 Jan 2026 17:55:10 +0000 Subject: [PATCH 1/4] Add max-width property to img --- Wireframe/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..31a5a7b5f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -85,5 +85,6 @@ article { } > img { grid-column: span 3; + max-width: 100%; } } From 8d62c98f125dd2fe8c150263b2d29c44d5c324e3 Mon Sep 17 00:00:00 2001 From: Mohsen Zamani Date: Thu, 8 Jan 2026 18:11:19 +0000 Subject: [PATCH 2/4] Change the wireframe --- Wireframe/index.html | 15 ++++++++------- Wireframe/style.css | 21 ++++++++++++++++++--- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..161b8cae5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,12 +8,15 @@
-

Wireframe

-

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

+

Mohsen Zamani Wireframe

+

This will be my portfolio.

+

Title

@@ -25,9 +28,7 @@

Title

-

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

+

Copyright Mohsen Zamani - ITP Jan 2026

diff --git a/Wireframe/style.css b/Wireframe/style.css index 31a5a7b5f..3ec74760e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -20,6 +20,7 @@ As well as useful links to learn more */ --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; + --hover: 50%/2.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; @@ -63,11 +64,25 @@ https://gridbyexample.com/learn/ */ main { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 4fr; gap: var(--space); - > *:first-child { + /* > *:first-child { grid-column: span 2; - } + } */ +} + +aside { + display: flex; + flex-direction: column; + background-color: rgb(219, 222, 225); + border: var(--line); +} +a { + text-decoration: none; + border: 0; +} +a:hover { + color: var(--hover); } /* ====== Article Layout ====== Setting the rules for how elements are placed in the article. From a4bd668778926c3d82f07876c6be83f339d3079d Mon Sep 17 00:00:00 2001 From: Mohsen Zamani Date: Sat, 17 Jan 2026 22:26:45 +0000 Subject: [PATCH 3/4] Answered 3 questions --- Wireframe/explain.html | 53 ++++++++++++++++++++++++++++++++++++++++++ Wireframe/style.css | 2 +- 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 Wireframe/explain.html diff --git a/Wireframe/explain.html b/Wireframe/explain.html new file mode 100644 index 000000000..e5ca5f4cc --- /dev/null +++ b/Wireframe/explain.html @@ -0,0 +1,53 @@ + + + + + + Wireframe + + + +
+

Here find the answer to the below questions:

+
+
+
+ +

What is the purpose of a README file?

+

+ It is the billboard of the repository, it give some general and + technical information about the repo such as: +

+
    +
  1. What the repo is about.
    2. +
  2. What problem it solves.
    3. +
  3. How to install and use it.
    4. +
  4. how to contribute.
    5. +
+

+ Basically, all the data a person using the repo should know, can go + here. +

+
+
+ +

What is the purpose of a wireframe?

+

+ It specifies the structure of a page and how different sections get in + place next to each other. +

+
+
+ +

What is a branch in Git?

+

+ It is an absolute separate line from the main branch of a project, + which can be changed without affecting the main branch. +

+
+
+
+

Copyright Mohsen Zamani - ITP Jan 2026

+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index 3ec74760e..f6c1217a0 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -64,7 +64,7 @@ https://gridbyexample.com/learn/ */ main { display: grid; - grid-template-columns: 1fr 4fr; + grid-template-columns: 1fr 1fr; gap: var(--space); /* > *:first-child { grid-column: span 2; From 2d645f33a72bb687a11b7b06ebe137db02f36553 Mon Sep 17 00:00:00 2001 From: Mohsen Zamani Date: Tue, 20 Jan 2026 20:53:40 +0000 Subject: [PATCH 4/4] Aplly comments by the reviewer --- Wireframe/explain.html | 53 ---------------------------- Wireframe/index.html | 47 +++++++++++++++++-------- Wireframe/style.css | 78 +++++++++++++++--------------------------- 3 files changed, 61 insertions(+), 117 deletions(-) delete mode 100644 Wireframe/explain.html diff --git a/Wireframe/explain.html b/Wireframe/explain.html deleted file mode 100644 index e5ca5f4cc..000000000 --- a/Wireframe/explain.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - Wireframe - - - -
-

Here find the answer to the below questions:

-
-
-
- -

What is the purpose of a README file?

-

- It is the billboard of the repository, it give some general and - technical information about the repo such as: -

-
    -
  1. What the repo is about.
    2. -
  2. What problem it solves.
    3. -
  3. How to install and use it.
    4. -
  4. how to contribute.
    5. -
-

- Basically, all the data a person using the repo should know, can go - here. -

-
-
- -

What is the purpose of a wireframe?

-

- It specifies the structure of a page and how different sections get in - place next to each other. -

-
-
- -

What is a branch in Git?

-

- It is an absolute separate line from the main branch of a project, - which can be changed without affecting the main branch. -

-
-
-
-

Copyright Mohsen Zamani - ITP Jan 2026

-
- - diff --git a/Wireframe/index.html b/Wireframe/index.html index 161b8cae5..11acb0e68 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -8,23 +8,42 @@
-

Mohsen Zamani Wireframe

-

This will be my portfolio.

+

Wireframe to Web Code

+

Part of Module On Boarding

- -
- -

Title

+
+ Placehoder Image +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + It is the billboard of the repository, it provides with some general + and technical information about the repo such as:

- Read more +
    +
  1. What the repo is about.
    2. +
  2. What problem it solves.
    3. +
  3. How to install and use it.
    4. +
  4. How to contribute.
    5. +
+ Read more +
+
+ Placehoder Image +

What is the purpose of a wireframe?

+

+ It specifies the structure of a page and how different sections get in + place next to each other. +

+ Read more +
+
+ Placehoder Image +

What is a branch in Git?

+

+ It is an completely separate line from the main branch of a project, + which can be changed without affecting the main branch. +

+ Read more