CSS/SAAS Credit Card Payment Model

CSS/SAAS Credit Card Payment Model


Job Description

We are a market leading provider of online accountancy software in the UK and looking for a talented individual to get involved and join our design team as a contractor, with a view to hire the same individual regularly for similar work.

When replying please give an indication of how many days you think the task will take to complete.

The Task:
When invoked, the modal fades in and animates in from bottom to top (see http://tympanus.net/Development/ModalWindowEffects/ slide in bottom)

To move to the next state the modal animates on the y axis using CSS animations (see http://desandro.github.io/3dtransforms/examples/card-01.html)

CSS selectors named according to SUIT naming conventions (see: https://github.com/suitcss/suit/blob/master/doc/components.md for specs and http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ for background)

Use SASS preprocessor and sass syntax

Write CSS comments

For the lock icon, build an icon font from http://fontello.com/
Use source sans pro web font (https://edgewebfonts.adobe.com/fonts)

Ensure image assets are retina compatible

Ensure the layout also responds to mobile devices - use your own initiative for the layout (basic is fine)

Separate stylesheets rather than inline media queries would be preferred

Consider maintainability and scalability

Don't even think about using bootstrap