We would like you to code a single responsive page without any backend. Below are the specs, followed by the design.
- The design consists of 3 "views" small (320px to 640px), medium (641px to 1024px), large (1025px and above)
- The page content doesn't expand above 1400px and the minimum supported width is 320px
- On small view:
- The header stays always visible at the top of the page
- Clicking the download button reveals the download options menu/dropdown
- Clicking the "burger" menu reveals the navigation links
- All the links point to "#"
- Page should look acceptable on IE10/IE11.
- The page font is Roboto
- Element spacing doesn't have to be pixel perfect but it should be close to the design
- Social media icons can be replaced with different ones
You can find the design for the different views and interactions in the /design folder
You can find all the design assets in the /assets folder
- Please don't use any libraries or frameworks (jquery, bootstrap, angular, react)
- Please don't use any front-end template engines
- Usage of bundlers, CSS preprocessors and task runners is encouraged
- Please provide a short summary detailing anything you think is relevant, for example:
- Installation steps
- How to run your code
- What would you have done differently if you had had more time
- Etc.
- Please send your results as a git bundle.
When evaluating your test, the following things are especially important to us:
- How did you organize your CSS? Ideally, we'd like to see some methodology such as BEM.
- No HTML duplication for different views.
- Is the code "production ready"?
- Is your solution compatible with at least two rendering engines (let us know which ones they are).