From 93c0efa5aba83c6d6c5d69e32d96188b480e6037 Mon Sep 17 00:00:00 2001 From: AhmadHmedan1 Date: Tue, 27 May 2025 21:03:25 +0100 Subject: [PATCH 1/8] I need to make a few CSS changes to the homepage to style it properly. --- Wireframe/Ahmadhmedan.html | 52 +++++++++++++ Wireframe/style.css | 152 +++++++++++++++++++------------------ 2 files changed, 132 insertions(+), 72 deletions(-) create mode 100644 Wireframe/Ahmadhmedan.html diff --git a/Wireframe/Ahmadhmedan.html b/Wireframe/Ahmadhmedan.html new file mode 100644 index 000000000..93ac4919d --- /dev/null +++ b/Wireframe/Ahmadhmedan.html @@ -0,0 +1,52 @@ + + + + + + Semantic In HTML + + + +
+

Welcome to Ahmad Hmedan's wireframe

+ + +
+
+
+ +
+ Placeholder Image +

What is the purpose of a README file?

+

A README file is a text file that contains information about a project, such as its purpose, how to install and use it, and any other relevant details. It is typically the first file a user will see when they visit a project repository.

+ Read more +
+
+
+
+ Placeholder Image +

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.

+ Read more +
+
+
+
+ Placeholder Image +

What is a branch in Git?

+

A branch in Git is a separate line of development that allows you to work on different features or fixes without affecting the main codebase. It enables parallel development and helps manage changes effectively.

+ Read more +
+
+
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4c16e711a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,21 +1,4 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); @@ -24,66 +7,91 @@ 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 { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + .c-site-header{ + line-height: 1.5em; + + padding: 25px; + } +h1{ + font-size: 2em; + margin: 0.5em ; + color:rgb(27, 28, 33); + text-align: center; } -img, -svg { - width: 100%; - object-fit: cover; +h2{ + font-size: 1.5em; + margin: 0.5em ; + /* color:blueviolet; */ + } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { + +main{ + display: grid; + grid-template-columns: 1fr 1fr; + gap:var(--space); max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto calc(var(--space) * 4); } -footer { - position: fixed; - bottom: 0; - text-align: center; +main>section{ + background-color:rgb(239, 224, 224); +font-size: 1.2em; +color :var(--ink); + border: var(--line); + padding: var(--space); + text-align: left; + } -/* ====== 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 -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } +main> section:first-child{ + grid-column: 1 / -1; + background-color: rgb(229, 216, 216); } -/* ====== 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. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { +.read_more{ + display: inline-block; + padding: var(--space); border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + text-decoration: none; + font-weight: bold; + color: inherit; + background-color: rgba(97, 52, 174, 0.628); + margin-top: var(--space); +color:wheat; +} +nav ul { + list-style: none; + padding: 3px;; + display: flex; + gap: 200px; + justify-content: center; + border: var(--line); +font-weight: bold; +font-size: x-large; +/* nav li a { + color: red; + text-decoration: none; + font-weight: bold; + padding: var(--space); + border: var(--line); +} */ + +body { + background: var(--paper); + color: var(--ink); + font: var(--font); +} + +a:hover{ + background-color: rgb(106, 20, 32); } + + +footer { + /* position: fixed; */ + text-align: center; + border-top: var(--line); + width: 100%; + background-color: var(--paper); + color: red; + padding: var(--space); + margin-top: var(--space); + +} \ No newline at end of file From a8c1acbd00a6f38e071cfa4037c5197cdc677c43 Mon Sep 17 00:00:00 2001 From: AhmadHmedan1 Date: Tue, 27 May 2025 21:08:27 +0100 Subject: [PATCH 2/8] Add '}' to css --- Wireframe/style.css | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 4c16e711a..a9e075ae7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -65,13 +65,7 @@ nav ul { border: var(--line); font-weight: bold; font-size: x-large; -/* nav li a { - color: red; - text-decoration: none; - font-weight: bold; - padding: var(--space); - border: var(--line); -} */ +} body { background: var(--paper); @@ -84,14 +78,13 @@ a:hover{ } -footer { - /* position: fixed; */ - text-align: center; +.c-site-footer +{ +text-align: center; border-top: var(--line); width: 100%; background-color: var(--paper); color: red; padding: var(--space); margin-top: var(--space); - } \ No newline at end of file From 9fff03474fa20ae852c5349a142156d54baaf0b5 Mon Sep 17 00:00:00 2001 From: AhmadHmedan1 Date: Tue, 27 May 2025 21:10:09 +0100 Subject: [PATCH 3/8] adjust font size and font weight for footer --- Wireframe/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index a9e075ae7..cf8efee2c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,4 +87,6 @@ text-align: center; color: red; padding: var(--space); margin-top: var(--space); + font-weight: bold; + font-size: 1.2em; } \ No newline at end of file From 42a52da001d66efe89a3cc22325c3f64b286cb00 Mon Sep 17 00:00:00 2001 From: AhmadHmedan1 Date: Tue, 27 May 2025 21:16:48 +0100 Subject: [PATCH 4/8] make the footer fixed due to acceptance criteria --- Wireframe/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index cf8efee2c..d698eff69 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -80,6 +80,8 @@ a:hover{ .c-site-footer { + position:fixed; + bottom: 0; text-align: center; border-top: var(--line); width: 100%; From 71cbdde9ce1e86ed9ff48e1ec686357d7d6665ac Mon Sep 17 00:00:00 2001 From: AhmadHmedan1 Date: Tue, 27 May 2025 21:27:42 +0100 Subject: [PATCH 5/8] Add a description for the header --- Wireframe/Ahmadhmedan.html | 2 +- Wireframe/style.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/Wireframe/Ahmadhmedan.html b/Wireframe/Ahmadhmedan.html index 93ac4919d..b4165c990 100644 --- a/Wireframe/Ahmadhmedan.html +++ b/Wireframe/Ahmadhmedan.html @@ -9,7 +9,7 @@

Welcome to Ahmad Hmedan's wireframe

- +

Practice on HTML, CSS and Wireframe by made a webpage has three articles explain the purpose of Readme file in repo, Wireframe and Git branch. paraphrase this sentence