From ffb9dc8fbd8b123bbf0c59aca84df48c5acba87f Mon Sep 17 00:00:00 2001 From: Mohammad Al-Dally Date: Wed, 14 May 2025 11:14:15 +0100 Subject: [PATCH 1/3] update html and css for wireframe structure and style --- Wireframe/index.html | 41 ++++++++++++++++++++++++++++++++++------- Wireframe/style.css | 4 ++++ 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e53..89fa9935 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,23 +10,50 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + “A wireframe is a basic visual guide used
to plan the layout and structure of a webpage or app.
It shows the placement of elements like headers,
+ buttons, and content without focusing on colors or design details.”

+
- -

Title

+ pic of drown wireframe +

wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + “A wireframe is a basic visual guide used
to plan the layout and structure of a webpage or app.
It shows the placement of elements like headers,
+ buttons, and content without focusing on colors or design details.”

- Read more + Read more
+
+
+ pic about example of html5_semantic_elements +

semantic html

+

+ Semantic HTML uses meaningful tags (like header, article, footer) to describe the structure and purpose of web content. + It improves accessibility, SEO. +

+ Read more +
+
+
+
+ first-child pic +

first childe

+

+ :first-child is a CSS pseudo-class that targets the first child element inside its parent. +

+ Read more +
+
+ + + +
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c..bf8f889a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -39,6 +39,7 @@ a { img, svg { width: 100%; + height: 400px; object-fit: cover; } /* ====== Site Layout ====== @@ -87,3 +88,6 @@ article { grid-column: span 3; } } +header{ + text-align: center; +} \ No newline at end of file From a64843f85a8bbc2acc8a4f66bca3f210620ca39b Mon Sep 17 00:00:00 2001 From: mohammadaldali Date: Mon, 19 May 2025 18:14:57 +0100 Subject: [PATCH 2/3] fix: updated footer position and adjusted article --- Wireframe/index.html | 27 +++++++++++++-------------- Wireframe/style.css | 16 +++++++++++----- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 89fa9935..de012bf9 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,33 +17,32 @@

Wireframe

- pic of drown wireframe -

wireframe

+ pic of drown readme-file +

What is the purpose of a README file?

- “A wireframe is a basic visual guide used
to plan the layout and structure of a webpage or app.
It shows the placement of elements like headers,
- buttons, and content without focusing on colors or design details.” + 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 + Read more
- pic about example of html5_semantic_elements -

semantic html

+ pic about example of html5_semantic_elements +

What is the purpose of a wireframe?

- Semantic HTML uses meaningful tags (like header, article, footer) to describe the structure and purpose of web content. - It improves accessibility, SEO. + A wireframe is a basic, two-dimensional visual representation of a web page,
app interface, or product layout. You can think of it as a low-fidelity, functional sketch.

- Read more + Read more
- first-child pic -

first childe

+ first-child pic +

What is a branch in Git?

- :first-child is a CSS pseudo-class that targets the first child element inside its parent. + : + A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git is master .
As you start making commits, you're given a master branch that points to the last commit you made.

- Read more + Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index bf8f889a..d9b6b8c6 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -50,11 +50,16 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } -footer { - position: fixed; - bottom: 0; - text-align: center; -} + footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: #333; + color: white; + text-align: center; + padding: 10px; + } /* ====== 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 @@ -89,5 +94,6 @@ article { } } header{ + text-align: center; } \ No newline at end of file From 1ab604ea9a4055668eaa9455d41c3d94a68696c8 Mon Sep 17 00:00:00 2001 From: mohammadaldali Date: Tue, 20 May 2025 11:27:52 +0100 Subject: [PATCH 3/3] i change the code as required --- Wireframe/index.html | 22 +++++++++++-------- Wireframe/style.css | 50 ++++++++++++++++++++++++++++++++++++-------- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index de012bf9..797cbcf7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,7 +16,8 @@

Wireframe

-
+ +
pic of drown readme-file

What is the purpose of a README file?

@@ -24,19 +25,20 @@

What is the purpose of a README file?

Read more
-
-
- pic about example of html5_semantic_elements + + +
+ pic about wireframe example

What is the purpose of a wireframe?

A wireframe is a basic, two-dimensional visual representation of a web page,
app interface, or product layout. You can think of it as a low-fidelity, functional sketch.

Read more
-
-
-
- first-child pic + + +
+ drown branch in Git

What is a branch in Git?

: @@ -44,7 +46,9 @@

What is a branch in Git?

Read more
-
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index d9b6b8c6..24bd28c8 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -27,14 +27,17 @@ As well as useful links to learn more */ /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); + background: rgb(191, 189, 189); color: var(--ink); font: var(--font); + padding-bottom: 80px; } a { padding: var(--space); border: var(--line); max-width: fit-content; + background-color: rgb(159, 107, 107); + text-decoration: none; } img, svg { @@ -50,15 +53,16 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } - footer { + footer { position: fixed; - bottom: 0; - left: 0; + bottom: 0%; width: 100%; - background-color: #333; - color: white; + color: red; text-align: center; - padding: 10px; + + + + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -80,8 +84,18 @@ Setting the rules for how elements are placed in the article. Now laying out just the INSIDE of the repeated card/article design. Keeping things orderly and separate is the key to good, simple CSS. */ + + + .wireframe h2:hover{ + color: lime; + +} +.branch h2:hover{ + color: chartreuse; + +} article { - border: var(--line); + border: solid rgb(34, 189, 221); padding-bottom: var(--space); text-align: left; display: grid; @@ -96,4 +110,22 @@ article { header{ text-align: center; -} \ No newline at end of file +} +header p { + color: rgb(3, 79, 28); +} +.readme-file{ + background-color: aliceblue; + font-size: large; +} +.wireframe { +background-color: antiquewhite; +} +.branch { + background-color: antiquewhite; + } + span{ + color: rgb(170, 125, 213); + + + } \ No newline at end of file