[147] Style the Product Details Page using CSS - Fullstack

[kemiojo]

As a customer, I want to see a product page for the product I a looking to buy so I can see more details about this product

Acceptance Criteria

1. Style your product page to look like the shared mockup https://zpl.io/bLzJGoD

2. Ensure that this page is seen when the user clicks on the Product Page link on the header

3. Ensure the page is mobile responsive ie

a. It should look like this when viewed on a tablet https://zpl.io/aNgY539

b. It should look like this when viewed on mobile phones. https://zpl.io/amkR7me

4. Ensure that the quantity field is a text input field type

5. For this product page, you are free to use your own currency type, product description text, product name, product images.

6. Your CSS should be saved in a folder named css. This folder should be in the folder you created for yourself inside your submissions folder

7. Add screenshots of the implementation to your PR. You can add them by dragging and dropping them to the PR description box or include a link to the screenshot when creating your PR

NB - Your developed UI must follow the designed layout, and use the font style shown, however, you are free to
i. use your own logo in the header

ii. choose your own colour scheme (ie, rather than the blue and white, you can use any other colour of choice with white).

iii. change the site name (yoursite.com) in the footer copyright text to your own site name

iv. Your chosen site name, logo and colour scheme must be the same for all the site pages"