From 3f222fc1c446cd319b9461de1257331c8423b2fb Mon Sep 17 00:00:00 2001 From: Abubakar-Meigag Date: Sun, 19 Feb 2023 21:18:39 +0000 Subject: [PATCH 1/4] form all done --- .DS_Store | Bin 0 -> 8196 bytes Form-Controls/index.html | 48 ++++++++++++++++-- Form-Controls/styles.css | 105 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c7de6260afada4cfff2c5aa3ebe0c1a7f11180fa GIT binary patch literal 8196 zcmeHM%Zd|06umtYoeqPN3<`1AAh^nC;*1h-6O$+|gh4atLM7%!(oCl-q&o%-fySk7 zT)FfI`~ktOAD}J-|HgBxDzTf)gv>^K)P<^3k9)gvP9=4xdWguXj5|f591+(&I#9_g05FANX=rD-0dzE$HAV_C1G7{pP=#9hieag6j62$|tT9rk z!pYK?4@<9X=^KhASI6@m=}uNzp{b1mMuBAo`0k#ftJEWx!o>YOQ_aWc2BKDLd7_0e z`&IY-w|ied-%ieVR?ZLmv3CR6w+N+kbe9B;Xh6GEMa!oUJwYA?tw}J{t9@(@JvRso zh40qJX6nq@Eqlw}wx8AeVp0#A;W(%?M^CtSD1_IVx0|g;Zg+| z7cNg9yM9MZDq`$+0vTIZ6L#88H!`{DbnkjG@9Y&yv%E7cmC)Y5adS3H+ZQiiyY;Yf z+_hbN1b*b>rgfCzl?~*{`)`T!+)f zCKSnj!N;X6y#!0<*#9`uH6sS<;o^dQowXKlT?K*H|yk@N|(0elo=~ z#f9;{Iw*`~jgdkg;&GXUfhPa6AjXUWe~|*5b6`2X|KB9s-KZYY`c?ab=3LE=H3S|hY#2*6aFaBYOwgXp=DQk=rVgzPh1V|Z7Wfb_W3j72> CxcbQe literal 0 HcmV?d00001 diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..94ddb083 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -9,19 +9,57 @@ +

Product Pick

+

T-shirts

-
- - -
+
+ +
+ + +
+ +
+

T-shirt details

+ + +
+ +
+

T-shirt Color

+ + + + +
+ +
+

T-shirt Size

+ +
+
+

Deliver Option

+ + +
+
-

By HOMEWORK SOLUTION

+

© By Abubakar-Meigag

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..5583dc16 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,105 @@ +:root{ + --dark : #293241; + --orang: #ee6c4d; + --sky: #e0fbfc; + --light: #98c1d9; + --gray: #3d5a80; + --white: #fff; + --balck: #000; +} + +body{ + background-color: var(--gray); +} +h1{ + color: var(--orang); +} +h3{ + color: var(--light); +} +h2{ + color: var(--white); +} + +header{ + display: flex; + flex-direction: column; + align-items: center; + padding-top: 20px; +} +header h2{ + padding-top: 3px; +} + +.form-box{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: var(--sky); +} + +.form-box label{ + padding: 8px; +} +.t-shirt{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 10px; + flex-direction: column; + color: var(--sky); +} +.t-shirt > label{ + padding-top: 5px; +} +.t-shirt > label > input{ + padding: 8px; +} +.color > h3{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 5px; +} +.color > label{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 5px; + color: var(--sky); +} +.size{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 5px; + flex-direction: column; + color: var(--sky); +} +.hero{ + margin: 0; + padding: 0; +} +.hero h3{ + display: flex; + align-items: center; + justify-content: center; +} +.hero > label{ + display: flex; + align-items: center; + justify-content: center; + padding-top: 5px; + flex-direction: row; + color: var(--sky); +} + +footer{ + display: flex; + align-items: center; + justify-content: center; +} +footer > h2{ + color:var(--orang); +} From faf2f224eb0707f11898a81195a9376b655d592f Mon Sep 17 00:00:00 2001 From: Abubakar-Meigag Date: Sun, 19 Feb 2023 21:22:47 +0000 Subject: [PATCH 2/4] edit footer edit footer --- Form-Controls/index.html | 2 +- Form-Controls/styles.css | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 94ddb083..d9f69632 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -59,7 +59,7 @@

Deliver Option

-

© By Abubakar-Meigag

+ © By Abubakar-Meigag
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 5583dc16..e686d000 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -99,7 +99,9 @@ footer{ display: flex; align-items: center; justify-content: center; + margin: 50px; } -footer > h2{ +footer > em{ + font-size: 1.4rem; color:var(--orang); } From 1edb61df180859cc7b30e9763f02f2e5fd6c314a Mon Sep 17 00:00:00 2001 From: Abubakar-Meigag Date: Thu, 23 Mar 2023 23:31:43 +0000 Subject: [PATCH 3/4] review edie it edie it color for lighthouse --- Form-Controls/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e686d000..bb45e796 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -3,7 +3,7 @@ --orang: #ee6c4d; --sky: #e0fbfc; --light: #98c1d9; - --gray: #3d5a80; + --gray: #143764; --white: #fff; --balck: #000; } From d460646c7a44493cfe6f00e7e2e6f71ac5ab935c Mon Sep 17 00:00:00 2001 From: Abubakar-Meigag Date: Thu, 23 Mar 2023 23:54:50 +0000 Subject: [PATCH 4/4] review fix lighthouse got 100 on lighthouse accessibility --- Form-Controls/index.html | 32 ++++++++++++++++++++++---------- Form-Controls/styles.css | 10 ++++++++-- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d9f69632..201d460b 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -18,22 +18,34 @@

T-shirts

- - + +

T-shirt details

- - + +

T-shirt Color

- - - - +
+ +
+
+ +
+
+ +
+
+ +
@@ -50,8 +62,8 @@

T-shirt Size

Deliver Option

- -
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index bb45e796..54c8c6fb 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -1,6 +1,6 @@ :root{ --dark : #293241; - --orang: #ee6c4d; + --orang: #eb9681; --sky: #e0fbfc; --light: #98c1d9; --gray: #143764; @@ -62,10 +62,15 @@ header h2{ justify-content: center; padding-top: 5px; } -.color > label{ +.color { display: flex; + flex-direction: column; align-items: center; justify-content: center; + padding-top: 10px; +} + +.color>div>label { padding-top: 5px; color: var(--sky); } @@ -100,6 +105,7 @@ footer{ align-items: center; justify-content: center; margin: 50px; + margin-top: 25px; } footer > em{ font-size: 1.4rem;