From d784ae20f3d032fc575ecea9f5e654b0c27b9294 Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Tue, 16 Sep 2025 17:18:12 +0100 Subject: [PATCH 1/6] changin the html and css and add articles --- Wireframe/index.html | 62 ++++++++++++----------- Wireframe/style.css | 117 ++++++++++++++----------------------------- 2 files changed, 72 insertions(+), 107 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d42f24640 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,39 @@ - - - - Wireframe - - - -
-

Wireframe

-

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

-
-
+ + + + Sprint 1 - Task 07 + + + +
+

Definitions of README Files, Wireframes, and Git Branches

+

This page explains README files, wireframes, and Git branches.

+
+ +
+
- -

Title

-

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

- Read more +

What is the README file?

+

A README file introduces a project. It usually explains what the project does, how to install it, and how to use it.

+ Learn more
-
- - + +
+

What is the wireframe?

+

A wireframe is a simple visual guide for a webpage. It shows the layout and structure before adding design and content.

+ Learn more +
+ +
+

What is a branch in Git?

+

A branch is a separate version of a project. It allows you to work on new features without changing the main code.

+ Learn more +
+ +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d5615f740 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,48 @@ -/* 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); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --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; + margin: 0; + font-family: sans-serif; + background-color: #f9f9f9; } -img, -svg { - width: 100%; - object-fit: cover; + + +header { + background-color: #2c3e50; + color: white; + text-align: center; + padding: 20px; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ + + main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + padding: 15px; +} + + +article { + background-color: white; + margin-bottom: 15px; + padding: 15px; + border: 1px solid #ddd; + border-radius: 5px; +} + + + + +a { + color: #2c3e50; + font-weight: bold; + text-decoration: none; } + + footer { + background-color: #2c3e50; + color: white; + text-align: center; + padding: 10px; 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 -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; - } -} -/* ====== 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 { - 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; - } + width: 100%; } From 771e379b217579334325097369aa15a76867f7c3 Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Tue, 16 Sep 2025 17:21:52 +0100 Subject: [PATCH 2/6] add footer to html file --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index d42f24640..da9fc1f45 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -31,9 +31,9 @@

What is a branch in Git?

A branch is a separate version of a project. It allows you to work on new features without changing the main code.

Learn more - - - + From 050cad53bf576cb51f83d97c7ac77e3c0e796cb7 Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Tue, 16 Sep 2025 17:26:20 +0100 Subject: [PATCH 3/6] change the css file --- Wireframe/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Wireframe/style.css b/Wireframe/style.css index d5615f740..11c555208 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -28,6 +28,9 @@ article { } +article:first-child { + border: 2px solid #2c3e50; +} a { From 8cbc431d90375563e3ac7b63ca026cc36e0a5a9a Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Tue, 16 Sep 2025 19:19:29 +0100 Subject: [PATCH 4/6] following the Wirefram layout --- Wireframe/index.html | 71 ++++++++++++++++++++++++++------------------ Wireframe/style.css | 53 +++++++++++++-------------------- 2 files changed, 63 insertions(+), 61 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index da9fc1f45..0be804981 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,39 +1,52 @@ - - - - Sprint 1 - Task 07 - - - -
-

Definitions of README Files, Wireframes, and Git Branches

-

This page explains README files, wireframes, and Git branches.

-
+ + + + Sprint 1 - Task 07 + + + +
+

Definitions of README Files, Wireframes, and Git Branches

+

This page explains README files, wireframes, and Git branches.

+
-
- +
+

What is the README file?

-

A README file introduces a project. It usually explains what the project does, how to install it, and how to use it.

+

+ A README file introduces a project. It usually explains what the + project does, how to install it, and how to use it. +

Learn more
-
-

What is the wireframe?

-

A wireframe is a simple visual guide for a webpage. It shows the layout and structure before adding design and content.

- Learn more -
+ +
+
+

What is the wireframe?

+

+ A wireframe is a simple visual guide for a webpage. It shows the + layout and structure before adding design and content. +

+ Learn more +
-
-

What is a branch in Git?

-

A branch is a separate version of a project. It allows you to work on new features without changing the main code.

- Learn more -
-
- - +
+

What is a branch in Git?

+

+ A branch is a separate version of a project. It allows you to work + on new features without changing the main code. +

+ Learn more +
+ +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index 11c555208..d9a835652 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,51 +1,40 @@ - body { + font-family: Arial, sans-serif; margin: 0; - font-family: sans-serif; + padding: 0; background-color: #f9f9f9; } - -header { - background-color: #2c3e50; - color: white; - text-align: center; +header, footer { + text-align: center; /* centers text */ padding: 20px; + background-color: #f4f4f4; } - -main { - padding: 15px; +.container { + width: 90%; + margin: 20px auto; } - article { - background-color: white; - margin-bottom: 15px; padding: 15px; - border: 1px solid #ddd; - border-radius: 5px; + border: 1px solid #333; + margin-bottom: 20px; + background-color: #fff; } - -article:first-child { - border: 2px solid #2c3e50; +.row { + display: flex; + gap: 20px; /* space between bottom articles */ } - -a { - color: #2c3e50; - font-weight: bold; - text-decoration: none; +.row article { + flex: 1; /* each article takes equal width */ } - -footer { - background-color: #2c3e50; - color: white; - text-align: center; - padding: 10px; - position: fixed; - bottom: 0; - width: 100%; +/* Responsive for small screens */ +@media (max-width: 600px) { + .row { + flex-direction: column; + } } From bd1ac895f8254a4ae5fa138290325512a7b4c754 Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Wed, 17 Sep 2025 14:56:01 +0100 Subject: [PATCH 5/6] making sure the footer is fixed to the viewport --- Wireframe/style.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index d9a835652..539c7772f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -5,17 +5,32 @@ body { background-color: #f9f9f9; } -header, footer { +header { text-align: center; /* centers text */ padding: 20px; background-color: #f4f4f4; + } + .container { width: 90%; margin: 20px auto; } + +footer { + position: fixed; /*fixed the footer to the vieport*/ + + width: 100%; + background: #f4f4f4; + text-align: center; + bottom: 0; + left: 0; + padding: 20px; + z-index: 1000; /* Ensures the footer appears on top of other elements that might overlap it*/ +} + article { padding: 15px; border: 1px solid #333; From 97a13aea985b39fbab56f7ef51f39ab2581f879b Mon Sep 17 00:00:00 2001 From: shaghayeghfar <146011477+shaghayeghfar@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:54:31 +0100 Subject: [PATCH 6/6] online T-shirt project Done --- Form-Controls/index.html | 94 ++++++++++++++++++++++++++++++---------- 1 file changed, 70 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..7e0fdf479 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,73 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - + + + + + T-shirt Online Shopping + + + +
+ +
+ +

+ + +
+ +

+ + +
+ Please select your favourite color: + +

+ +

+ +
+
+ + +
+ Please select your size: + +

+ +

+ +

+ +

+ +

+ +
+
+ + +
+