Please build a responsive HTML page from the attached large and small screen designs.
- Form does not have to submit anywhere
- Animations are not required
- Submissions should score a 100 in a Google lighthouse accessibility scan
- Please build for modern browsers, don't worry about polyfills and legacy support
- Task runners are not required, but use if you’d like
- No UI libraries
- No JS libraries or frameworks
- No mixin libraries
- Please provide any needed build instructions
Below, you will find the technical information needed to complete the assignment. You do not have to use the specific pixels listed, translating to a relative unit is fine. Please add your solution into the
The error depicted in the design is meant to communicate a state, so this should be built as validation on each form field.
Feel free to update and change these files as your solution dictates.
- src/index.html: A blank HTML file for you to add your solution
- src/css/style.css: A blank CSS file to use
- src/js/script.js: A blank JS file to use
- src/images/image.png: The image required for the design
- designs/large-screen.png: The large screen version of the design
- designs/small-screen.png: The small screen version of the design
- Headings: 38px
- Copy: 16px
- Headings: 40px
- Copy: 24px
Roboto (400, 700)