ELC Coding Test

The ELC Brand Theming Coding Test is a way for you to demonstrate your strong UX and design sensibilities, while following pixel-perfect design specifications. PLEASE READ ALL INSTRUCTIONS BELOW BEFORE STARTING.

The Task

You have been provided the below link to the desktop and mobile designs for a Clinique Single Product Page:

https://www.figma.com/file/bDSoyAhNv8hhvEs0PPTS3v/ELC-Theming-Coding-Test

NOTE: To access this link, you must create a free Figma account, or use an existing Google account.

Your task is to use HTML/CSS/SCSS, including the BEM (Block Element Modifier) methodology (https://en.bem.info/methodology/), to translate these specs into a pixel-perfext UI.

Specifically, you are styling all of the following React components found in the starter code:

src/Product.js
src/ProductImage.js
src/ProductPurchase.js
src/ProductDesc.js

DO NOT STYLE OR MAKE ANY EDITS TO THE MENU. The navigation menu (src/Menu.js) has already been styled and is not included in the test.

Additional Notes:

THIS IS NOT A REACT/JAVASCRIPT CODING TEST. You should only need to use HTML/CSS/SCSS to accomplish this task.
In the Figma design, click on Code and then CSS, (in the top right of the page) to view the pixel dimensions for all elements.
Feel free to add additional DOM elements as needed.
All styles should be added to src/styles/product.scss, but feel free to create additional scss files as necessary.
All font files have been included under src/fonts and can be found in src/styles/fonts.scss. DO NOT USE ANY OTHER FONTS.
All necessary images and icons have been provided in the src/images folder. Feel free to re-export any images from Figma, but please use HTML/CSS/SCSS to style everything else.
Please make sure your submission is responsive. DO NOT build a separate mobile and desktop version.
Remember to use BEM!

Getting Started

Prerequisites

NodeJS >= 8.10
Yarn

Step 1 - Node Modules

The first thing you need to do to get this app working is to install the node modules with the following command:

yarn

Step 2 - Running the App

After installing the Node modules, you can run the app in development mode with this command:

yarn start

Open http://localhost:3000 to view the product page in the browser.

Additional Submission Guidelines

Please DELETE the node_modules folder prior to sending your code for review
If any additional commands are necessary to run your code, please make sure this is documented