CSS E-commerce App Assignment

A. CSS Basic Part

Objective

Design and style a simple e-commerce product page using CSS, covering the topics of CSS comments, selectors, variables, typography, box model, and card design.

Instructions

• How to do this assignment?
• first fork, then clone to your local machine

Start completing the requirements given below.

1. Setup the Project:

   • Create a new folder for the project.
   • Create an index.html and a styles.css files inside this folder.
   • Link the styles.css file to the index.html file.

2. HTML Structure:

   • Design a simple e-commerce product page with the following sections:
     • Header
     • Product Display Area
     • Footer

3. CSS Comments, Selectors, and Variables:

   • CSS Comments:

     • Add comments in your CSS to explain the purpose of each section.

   • Selectors:

     • Use different types of CSS selectors such as element, class, and ID selectors to style the elements.

   • Variables:

     • Define CSS variables for colors, fonts, and other reusable values.

4. Typography - Font, Text, Color:

   • Font:

     • Apply different fonts to headings and paragraph texts using Google Fonts.

   • Text:

     • Style text with different sizes, weights, and transformations.

   • Color:

     • Use the defined CSS variables for color.

5. Box Model (Margin, Border, Padding, Content):

   • Margin:

     • Add margins to separate elements.

   • Border:

     • Style borders around elements.

   • Padding:

     • Add padding inside elements to create space around the content.

6. Design a Card (Margin, Border, Padding, Content):

   • Card Design:
     • Create a card design to display product information with a margin, border, padding, and content area.

Submission

• Create the project as per the above requirements.
• Deploy the project on netlify and add the Deoployed link in the Pull Request (PR)