Technology-Cards

In this project, let’s build Technology Cards by applying the concepts we have learned till now.

Refer to the image below:


simple-cards-app-output


Design Files

Click to view - [Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px)](https://assets.ccbp.in/frontend/content/react-js/technology-cards-sm-output.png) - [Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/technology-cards-lg-output.png)

Set Up Instructions

Click to view - Download dependencies by running `npm install` - Start up the app using `npm start`

Completion Instructions

Functionality to be added
The app must have the following functionalities - The App is provided with `cardsList`. It consists of a list of cardItem objects with the following properties in each cardItem object | Key | Data Type | | :---------: | :-------: | | id | Number | | title | String | | description | String | | imgUrl | String | | className | String | - The value of the key `id` should be used as a key to the `CardItem` component. - The value of the key `className` should be used for the HTML list item in the `CardItem` component.
Implementation Files
Use these files to complete the implementation: - `src/App.js` - `src/App.css` - `src/components/CardItem/index.js` - `src/components/CardItem/index.css`

Important Note

Click to view
**The following instructions are required for the tests to pass** - Each `CardItem` should have an HTML image element with `alt` attribute value as the value of the key **title** in `cardsList`

Resources

Colors
Hex: #f4faff
Hex: #64748b
Hex: #ffffff
Hex: #ff4f64
Hex: #00a8e7
Hex: #44c4a1
Hex: #fcc200
Hex: #171f46
Font-families - Roboto

Things to Keep in Mind