From 00823141fc644573c0b0b19d7a830e20e879e8b6 Mon Sep 17 00:00:00 2001 From: phonenaing <51868037+Mgphone@users.noreply.github.com> Date: Mon, 7 Oct 2024 05:30:53 +0100 Subject: [PATCH 1/3] Create index.html --- index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..9cea608 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + Learning Wireframe + + + +
+

My Learning Page

+

Welcome to my wireframe demo page

+
+ + + +
+
+

Home

+

This is the home section where the main content will be displayed.

+
+ +
+

About

+

This section describes what the page or website is about.

+
+ +
+

Services

+

Details of services offered can go here.

+
+ +
+

Contact

+

This section provides contact information or a form for users to reach out.

+
+
+ + + + From 919817a031289d2856fe79b7495112c17231c9f7 Mon Sep 17 00:00:00 2001 From: mgphone Date: Sat, 12 Oct 2024 07:12:35 +0100 Subject: [PATCH 2/3] initial commit with some codes --- FormControls/formcontrolchecklist.md | 18 ++++++++ FormControls/index.html | 66 ++++++++++++++++++++++++++++ FormControls/styles.css | 44 +++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 FormControls/formcontrolchecklist.md create mode 100644 FormControls/index.html create mode 100644 FormControls/styles.css diff --git a/FormControls/formcontrolchecklist.md b/FormControls/formcontrolchecklist.md new file mode 100644 index 0000000..47fce4f --- /dev/null +++ b/FormControls/formcontrolchecklist.md @@ -0,0 +1,18 @@ +# Developers must test their work + +## Let's write out our testable criteria: + +### HTML +- [X ] I have used **HTML** and **CSS** only. +- [ ] My form is **semantic HTML**. +- [ ] All inputs have associated **labels**. +- [ ] My **Lighthouse Accessibility** score is **100**. +- [ ] I require a **valid name**. I have defined a valid name as a text string of two characters or more. +- [ ] I require a **valid email**. +- [ ] I require one **colour** from a defined set of 3 colours. +- [ ] I require one **size** from a defined set of 6 sizes. +- [ ] I require one **date** from a constrained date range. + +### CSS +- [ ] I show which element is **focused**. +- [ ] My **Lighthouse Accessibility** score is **100**. diff --git a/FormControls/index.html b/FormControls/index.html new file mode 100644 index 0000000..fa0b804 --- /dev/null +++ b/FormControls/index.html @@ -0,0 +1,66 @@ + + + + + + T-Shirt Order Form + + + + + +
+

T-Shirt Order Form

+
+
+
+ + +

T-Shirt Order Form

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/FormControls/styles.css b/FormControls/styles.css new file mode 100644 index 0000000..1d2d87d --- /dev/null +++ b/FormControls/styles.css @@ -0,0 +1,44 @@ +header h1{ +width: 100vw; +display: flex; +justify-content: center; +} +form{ + display: flex; + flex-direction: column; /* Arrange items vertically */ + background: #fff; + padding: 20px; + border-radius: 10px; + max-width: 500px; + margin: 0 auto; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + gap:10px +} +h2 { + text-align: center; +} + +label { + margin-top: 10px; + font-weight: bold; +} + +input, select { + width: 100%; + padding: 10px; + margin-top: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} + +input[type="submit"] { + background-color: #28a745; + color: white; + cursor: pointer; + border: none; + margin-top: 20px; /* Space before the submit button */ +} + +input[type="submit"]:hover { + background-color: #218838; +} From 31de5c78e3e0d6e0b81001fca2c76446321f18c8 Mon Sep 17 00:00:00 2001 From: mgphone Date: Sat, 12 Oct 2024 09:23:41 +0100 Subject: [PATCH 3/3] Complete checklist form control --- .DS_Store | Bin 0 -> 6148 bytes FormControls/formcontrolchecklist.md | 20 ++++++++++---------- FormControls/index.html | 5 ++++- FormControls/styles.css | 19 ++++++++++++++----- 4 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7fa8c4aada912aaf5a2298dd12676dd320e1681a GIT binary patch literal 6148 zcmeHKyH3ME5S)b+k)TLPdB4CPoI>CS@&gn|G{KR~qjr_=;?tOY2+6WQX=u=_v^#fu zJ7;+cuNQ!A-=A)Q4S+S>5ho8z^Kx8ikOERb3P=Gd@T&sedui*dL`5ke1*E{Y0{(qybjMyeCB~+}W0oK`PY`?Il*kOtl1faf)ret9XTDWkFPsvS4y)nA>d96UipA4;e~WThPgIlw zQedvYWo|d#|L^HP%>Q$ec2YnJ{3``)wcGEue5LBGiT-Shirt Order Form - +
+ + +
diff --git a/FormControls/styles.css b/FormControls/styles.css index 1d2d87d..ebb5500 100644 --- a/FormControls/styles.css +++ b/FormControls/styles.css @@ -5,7 +5,7 @@ justify-content: center; } form{ display: flex; - flex-direction: column; /* Arrange items vertically */ + flex-direction: column; background: #fff; padding: 20px; border-radius: 10px; @@ -24,21 +24,30 @@ label { } input, select { - width: 100%; + padding: 10px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; } - +.button-order{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} input[type="submit"] { - background-color: #28a745; + background-color: #1e7e34; color: white; cursor: pointer; border: none; - margin-top: 20px; /* Space before the submit button */ + /* margin-top: 20px; + width:20vw; */ } input[type="submit"]:hover { background-color: #218838; } +input[type="submit"]:focus{ + outline: 2px solid black; +}