Contact Form
Description
Fork this pen of a contact form and create and style an appealing contact form. There's plenty of inspiration in the resources section.
Requirements
Using a great web font style the contact form to be usable for both mobile and larger displays. Experiment with background images on your body or a clean simple look. Contact forms drive a lot of commercial business and need to be successful in the field.
CSS Reset
Check-mark the CSS-Reset option in the settings for CodePen CSS editor.
Hard Requirement -> Mobile-view is up to 35rem wide and (Guideline -> )font-size is 1rem. Hard Requirement -> Margin around the form is 1rem.
Hard Requirement -> Tablet-view is between 35rem and 60rem wide and font-size is (Guideline) 1rem. Margin (Hard Requirement) around the form is (guideline->) 2rem.
Hard Requirement -> Desktop-view is 60rem and wider. Font-size is (guideline) 1.5rem. Hard Requirement -> Max-width of the form is 80rem. Hard Requirement -> Margin around the form is (guideline) 3rem.Hard requirement - > When the form reaches width of 80rem, it becomes aligned in the middle of view-port.
Rubric
| Criteria | Pts |
|---|---|
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Criteria Description | 3 |
| Total | 30 |
Submission
Submit CodePen URL