Using the files in the /designs folder of this repo, recreate the webpage to support responsive design for desktop, tablet, and mobile.
While there should be HTML structure to represent the shaded area, only do the minimum amount of work necessary in the shaded section to support the section that isn’t shaded (aka: don’t build the carousel). Focus on the non-shaded section of the flats (the three-item content grid).
Add functionality using JavaScript to allow a user to swap images between any of the other images in the non-shaded section. For example, a user should be able to drag the image of the man in front of the computer over the image of the girl being handed a credit card, and when the let go of the mouse, the two images should swap places.
A basic build system should be used that contains two tasks. The first task should start a local server with a watch to rebuild on save. The second task should output minified distribution assets.
- Google Chrome support
- Semantic HTML
- WCAG Accessible (as much as possible, don’t spend too much time)
- No CSS framework should be used
- ES6+ JavaScript (frameworks are ok to use)
- SASS (or other CSS preprocessors)
- Responsive
- Build Process (Gulp, Grunt, Webpack, etc)
Fork this repository and create a Pull Request with your code for review along with with instructions on how to run/build the solution.
Estimated 3-4 hours
Feel free to use an existing build system you have if it meets the requirements above. If you need assistance with getting a build system up and running, check out the Webpack Getting Started page.
Use Vue.js to build your solution.