NFT Preview Card using HTML and Pure CSS

👾Hello Babatunde, Congratulations on completing this challenge!

Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

1.It's not a best practice that you se the heightfor some elements, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

2.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

3.Use <main> to replace the div containing the whole content, its better to use <main> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

@media (max-width: 350px) {
.text .eth-details-and-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: column;
}
}

✌️ I hope this helps you and happy coding!

Hi Babatunde, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• use main tag to wrap the all content of page and improve the Accessibility
• also you can use article or div tag instead of main to the container card for improve the Accessibility
• use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😉