Create a responsive landing page.
We invite you to develop a mock landing page, using the three PSD mockups attached. The requirements for it are as follows:
- Fully responsive (100% fluid), not adaptive (snapping between fixed-width sizes)
- 2x Retina support
- HTML based, no PHP or anything server-side (with 1 exception)
- Banner text should be in actual HTML, not image based -Icons should be inside of an image sprite for performance (or use SVGs)
- Mobile-First CSS
- Avoid using a CSS framework
- The live site's form in reality will be submitting an AJAX POST request to a university form system. For this assessment, create a dummy "response" PHP script that will post back the submitted variables in the place of the form without refreshing the page. Use AJAX system to accomplish this. Also, use the script to accomplish the following:
- Include client-side validation
- Validate proper email format name@domain.TLD
- Force the phone number field's format to be (###) ###-####
- Use the Picture element or srcset attributes on photos when applicable for performance
- Site should function well in IE11+
- You do not have a mobile or tablet design for the videos section. Come up with your own mobile/tablet styling for them, and suggest and implement a cross-browser compatible and attractive way to view the videos
- Make the compiled version of the site production-ready and as performant as possible on every device/size/screen density without sacrificing quality. Test download size and requests with Chrome's developer tools.
- Deliverables are: your whole project folder, and the compiled version of the site.
- There is a .zip file in the "Files" section that contains artwork
- Feel free to ask questions. We don't work inside of caves, so questions are expected on functionality and how things should work.