diff --git a/Form-Controls/README.md b/Form-Controls/README.md index a163d4de..df108f6d 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -31,23 +31,23 @@ Do not write a form action for this project. Let's write out our testable criteria: -- [ ] I have used HTML and CSS only. +- [x] I have used HTML and CSS only. ### HTML -- [ ] 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. +- [x] My form is semantic html. +- [x] All inputs have associated labels. +- [x] My Lighthouse Accessibility score is 100. +- [x] I require a valid name. I have defined a valid name as a text string of two characters or more. +- [x] I require a valid email. +- [x] I require one colour from a defined set of 3 colours. +- [x] I require one size from a defined set of 6 sizes. +- [x] I require one date from a constrained date range. ### CSS -- [ ] I show which element is focused. -- [ ] My Lighthouse Accessibility score is 100. +- [x] I show which element is focused. +- [x] My Lighthouse Accessibility score is 100. ## Extension Task diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..03c0f6d6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -9,20 +9,74 @@ +

Product Pick

-
- - + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- \ No newline at end of file + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..eacc74df 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,151 @@ +/* Basic Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Body styling */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #FBFDFC; /* Light background */ + color: #333; /* Dark text for readability */ +} + +/* Container */ +.container { + width: 80%; + margin: 0 auto; + overflow: hidden; +} + +/* Header styling */ +header { + background: #c4c4c4; /* Darker gray for better visibility */ + color: #1a1a1a; /* Darker text for contrast */ + padding: 20px 0; + text-align: center; +} + +/* Main content */ +main { + padding: 20px; + background: #ffffff; /* White for main content */ + margin-top: 20px; + border-radius: 5px; +} + +form { + display: flex; +} + +.field-wrap { + margin-bottom: 40px; +} + +.formbox { + display: flex; + flex-direction: column; + gap: 20px; /* Better than justify-content for consistent spacing */ + padding: 20px; /* Adds spacing inside the container */ + border: 1px solid #ccc; /* Optional: adds a border for a defined area */ + border-radius: 5px; /* Rounded corners for a more modern look */ + background-color: #f0f0f0; /* Optional: background color for better visibility */ + width: fit-content; +} + +input, select, button { + color: #1a1a1a; /* Darker text for better contrast */ + background-color: #ffffff; /* White background for form controls */ + border: 1px solid #999999; /* Darker border for better definition */ +} + +button { + background-color: #0056b3; /* Darker blue button */ + color: #ffffff; /* White text for contrast */ + width: 70%; + margin-left: 50px; + padding: 10px; /* Adjust padding for better size */ + height: auto; /* Use auto to ensure the button is responsive */ + border: none; /* Remove border for cleaner look */ + border-radius: 5px; /* Rounded corners for button */ +} + +.address { + display: flex; + gap: 10px; /* Creates space between address fields */ + align-items: center; /* Align items vertically in the middle */ + flex-wrap: wrap; /* Allows wrapping on smaller screens */ +} + +.postcode { + flex: 1; /* Flex-grow:1 allows this to take up available space */ + min-width: 100px; /* Optional: sets a minimum width to maintain layout */ +} + +/* Label styling */ +label { + transform: translateY(6px); + transition: all 0.5s ease; + pointer-events: none; + font-size: 18px; + padding-left: 10px; + color: #1a1a1a; /* Darker label text for better contrast */ +} + +input, textarea { + font-size: 22px; + display: block; + width: 100%; + padding: 5px 10px; + background: none; + border: 1px solid #888888; /* Darker border for better visibility */ + color: #1a1a1a; /* Darker text color for better readability */ + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} + +form { + padding: 40px; + max-width: 600px; + margin: 40px auto; + border: 4px solid #f9e3c2; /* Light border */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */ +} + +input:focus, textarea:focus { + outline: 0; + border-color: #1ab188; /* Highlight border on focus */ +} + +/* Footer */ +footer { + background: #c4c4c4; /* Darker gray for footer */ + color: #1a1a1a; /* Dark text for contrast */ + text-align: center; + padding: 10px 0; + margin-top: 20px; +} +button#choose { + background-color: #0056b3; /* Darker blue for better contrast */ + color: #ffffff; /* White text for readability */ + width: 70%; + margin-left: 50px; + padding: 10px; /* Ensures a comfortable touch target */ + height: auto; /* Responsive height */ + border: none; /* Removes default border */ + border-radius: 5px; /* Rounded corners */ + font-size: 16px; /* Readable font size */ + transition: background-color 0.3s, border-color 0.3s; /* Smooth transition effects */ +} + +/* Optional: Add hover effect */ +button#choose:hover { + background-color: #004494; /* Even darker blue on hover for better visibility */ +} + +/* Optional: Add focus effect for accessibility */ +button#choose:focus { + outline: 2px solid #1ab188; /* Green outline for focus state */ + outline-offset: 2px; /* Space between outline and button */ +}