In this challenge you are to build out a very basic e-commerce product page which displays a product with three (3) variants. You are free to use any tools, languages, frameworks, and packages that you see fit to get the job done. The final result can be anything from a full fledge application using the MVC pattern, down to it being a simple static HTML file. There are only two (2) requirements on that front, which are that you:
- Include instructions on how to build and display the final product locally or host it somewhere and can provide a link.
- Give a brief statement of why you chose the technology you did.
- The frontend must have a product page that displays the product.
- The product page must look as closely as possible to the provided design: (Figma link) (JPG at 1x) (JPG at 2x).
- Clicking on one of the fabric thumbnails must update the main product image with the clicked variants image.
- The page must be responsive for mobile view. A mobile design has intentionally been left out and you are free to implemented it in any way that you think would be most beneficial for the customer.
The design makes use of two fonts, a headline font and a paragraph font.
The headline font is called Bungee and can be included in two different ways.
- Link:
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet"> - CSS import:
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');CSS rule to specify familiy:font-family: 'Bungee', cursive;
You do not need to specify a specific font for the paragraph font, use whatever is the standard font for your operating system or use the following CSS font-family:
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- Amber: https://helixsleep-code-challenge.s3.amazonaws.com/sofa-amber.jpg
- Charcoal: https://helixsleep-code-challenge.s3.amazonaws.com/sofa-charcoal.jpg
- Red: https://helixsleep-code-challenge.s3.amazonaws.com/sofa-red.jpg
The Allday logo
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/logo.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/logo.png
Padlock
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/padlock.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/padlock.png
Free Shipping
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/free-shipping.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/free-shipping.png
365 Day Trial
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/trial.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/trial.png
Made In America
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/made-in-america.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/made-in-america.png
10 Year Warranty
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/warranty.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/warranty.png
Super Easy Assembly
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/assembly.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/assembly.png
High Quality Materials
- SVG: https://helixsleep-code-challenge.s3.amazonaws.com/materials.svg
- PNG: https://helixsleep-code-challenge.s3.amazonaws.com/materials.png
When you are done, please push your application up to either GitHub, GitLab, or, BitBucket. Then notify Kristoffer via email (kristoffer@helixsleep.com) with the subject Helix Sleep Code Challenge and the link to the repository. Please include:
- Instructions on how to build and display the page locally or a link to where the page is hosted.
- Give a brief statement of why you chose the language and technologies your did.
- Anything else you think Kristoffer should know in order to view the challenge.
Kristoffer is available for any questions you may have via email at kristoffer@helixsleep.com.
