NFT preview card component

Hi Eddy

Use semantic HTML elements where appropriate, such as header, main, and footer for their respective sections.

Use descriptive and meaningful class and id names, such as img-card instead of just img.

Use CSS variables for repeated values, such as the background color and font family, to make it easier to maintain and change styles in the future.

Consider using CSS flexbox or grid for positioning elements instead of using floats.

Use descriptive class names, such as ".card-header" or ".card-body", to make your CSS code easier to read and understand.

Remove unused CSS styles to make the code cleaner and faster.

Use media queries to adjust styles for different screen sizes to ensure the layout is optimized for different devices.

Use shorthand properties, such as "margin: 10px" instead of "margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;", to make the code more concise.

Happy Coding

Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

To center .card on the page using flexbox, add add min-height:100vh; display: flex; align-items: center: justify-content: center; to the main

To center .card on the page using flexbox:
main{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING