Each month Bespoke Post delivers new boxes to our subscribers. This exercise is your chance to show us your HTML, CSS, & JavaScript skills by creating part of a sample page that showcases some of our boxes. There is a mockup of the page fragment here.
To complete this exercise, begin by cloning this repository. Your assignment is to build out a production-ready implementation of this page using HTML, CSS, & JavaScript. Some notes:
- Keep in mind, our traffic is more than 50% mobile devices, so the design should be responsive. The mockup shows this content at 3 different breakpoints.
- The green bars overlaid on the mockup represent the grid system to be used for the layout.
- The top module is a basic "carousel" where the content can be cycled to feature 4 different products. Don't worry about implementing any sophisticated transition effects but the copy and images should change together.
- There are images for each of the products in the
imagesfolder. - There is copy provided for each product below.
- You are free to use other tools than Vanilla JS and regular CSS if you prefer so. If you do, please explain your choices.
- We've requested your solution be "production-ready". By that we mean your solution should look like the mockup and be crafted with code quality, maintainability, and re-usability in mind.
When you are done please follow these instructions:
- Zip up your git repository and send it to us at: [email protected] with "Web Engineer Test" as the subject line.
- If you've opted to use a tool like Sass or ES6, please provide both a folder with your source files (so we can review the code you’ve authored) and a folder with built files so we can view your solution in a browser.
- Do NOT post your work to a public GitHub repo and send us a Pull Request, we wouldn't want any other applicants to copy your work.
Good luck!
The copy to be cycled with the images:
- Alchemy: Stock your home bar with pro-level cocktail wares.
- Aged: A toast to the perfectly aged cocktail.
- Refresh: Bring some class to your morning routine.
- Weekender: Don't just get away from the crowds — stand out from them.