From 2f7290ff35e5b5e6b0b0f61b99eb407386ef6c17 Mon Sep 17 00:00:00 2001 From: Ayodeji Ayorinde Date: Sat, 24 Jan 2026 15:29:30 +0000 Subject: [PATCH 1/5] Completd Form for Task 1 --- Form-Controls/index.html | 88 +++++++++++++++++++++++++++++----------- 1 file changed, 64 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..81159c144 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,67 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - + + + + + Shirt Order Form + + + + +
+
+

Please complete all required (*) fields.

+ +

+ + +

+ +

+ + + Format: name1@nnn.com +

+ +
+ What colour of shirt do you want?* + + + + + + + + +
+ +
+ What size of shirt do you want?* + + + + + + + + + + + + + + + + + +
+ +
+
+ + From a647e7aec787ea9d2936df5d1de6456caa3ec955 Mon Sep 17 00:00:00 2001 From: Ayodeji_Ayorinde26 Date: Thu, 5 Feb 2026 20:08:00 +0000 Subject: [PATCH 2/5] Update index.html Removed multiple 'Required' since it is not necessary to use required on every radio button in the same group. --- Form-Controls/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 81159c144..07a5289df 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -44,19 +44,19 @@ - + - + - + - + - + From 8aa6f3b91e28d48866757ef8b2094063d4d8741e Mon Sep 17 00:00:00 2001 From: Ayodeji Ayorinde Date: Sat, 7 Feb 2026 16:01:15 +0000 Subject: [PATCH 3/5] update html structure --- Form-Controls/index.html | 108 +++++++++++++++++++++++---------------- 1 file changed, 65 insertions(+), 43 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 07a5289df..4b4f6d511 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,67 +1,89 @@ + - + Shirt Order Form -
-
-

Please complete all required (*) fields.

+
+ +

Please complete all required (*) fields.

+ +

+ +

-

- - -

-

- - - Format: name1@nnn.com -

+

+ +

-
- What colour of shirt do you want?* - - +
+ What colour of shirt do you want?* - - + - - -
+ -
- What size of shirt do you want?* - - + +
- - +
+ What size of shirt do you want?* - - + - - + - - + - - -
+ - -
+ + + + + +
- + + \ No newline at end of file From 3866f893a3f55391580a3ad21f8dd3c73f416cd5 Mon Sep 17 00:00:00 2001 From: Ayodeji Ayorinde Date: Sun, 8 Feb 2026 16:24:41 +0000 Subject: [PATCH 4/5] Added Submit button, removed multiple required --- Form-Controls/index.html | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4b4f6d511..c520c1cfd 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -38,12 +38,12 @@ @@ -57,30 +57,31 @@ + From 227025e255c5b8f9e766387f41dae31ccc331b56 Mon Sep 17 00:00:00 2001 From: Ayodeji Ayorinde Date: Mon, 9 Feb 2026 14:23:20 +0000 Subject: [PATCH 5/5] Fixed issues with Wireframe code --- Wireframe/index.html | 93 +++++++++++++++++++++--------- Wireframe/style.css | 134 +++++++++++++++++++------------------------ 2 files changed, 123 insertions(+), 104 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7cb6b5131 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,70 @@ - - - - Wireframe - - - -
-

Wireframe

-

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

+
+

WIREFRAME IMPLEMENTATION

+

This is a sample of wireframe implementation

+
+
+ + + + + + +

WHAT IS THE PURPOSE OF A README FILE?

+

A README file exists to explain what a project is, why it matters, and how to use it. It’s the first place + someone looks when they encounter your repository, dataset, or codebase.

+ +

READ + MORE

+
+
+ +
+
+ + + + + + +

WHAT IS THE PURPOSE OF A WIREFRAME?

+

A wireframe exists to map out the structure and functionality of a page or product before any visual design or + coding begins. Think of it as the architectural blueprint of a digital experience.

+

READ MORE

+
+
+ + + + + + +

WHAT IS A BRANCH IN GIT?

+

A branch in Git is essentially a lightweight, movable pointer to a specific line of development. It lets you + work on new features, experiments, or fixes without affecting the main codebase.

-
-
-
- -

Title

-

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

- Read more -
-
-

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

-
- - + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d3cc8cabe 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,71 @@ -/* 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 */ +body { + margin: 0; + font-family: Arial, sans-serif; +} -/* ====== 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; +/* Generic wireframe box */ +.section, +.column { + border: 2px dashed #999; + padding: 20px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: flex-end; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); + +/* Single-line spacing */ +h1 { + font-weight: bold; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +p { + line-height: 1; + margin: 4px 0; } + +/* Top half layout */ + img, svg { - width: 100%; + width: 20%; object-fit: cover; } -/* ====== 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; -} -footer { - position: fixed; - bottom: 0; + +.top-half { + height: 50vh; 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; - } + +/* Title + subtitle block */ +.title-block { + margin-bottom: auto; + /* keeps title at the top */ +} + +.subtitle { + font-size: 0.9rem; + margin-top: 4px; + color: #555; } -/* ====== 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 block under title */ +.top-half .text-block { text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + margin: 0 auto; + width: 60%; } + +/* Bottom half layout */ +.bottom-half { + height: 50vh; + display: flex; + /* font-weight: bold; */ +} + +.column { + flex: 1; + margin: 10px; + text-align: left; + +} \ No newline at end of file