Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card component with Box-shadows and Hover effects

@Himanshu-196018

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Used Box-shadow properties to add multiple shadows.

From my solution:

  • You can understand how to center a component with just position and transform properties.
  • cool hover effect on images using pseudo classes/elements selectors

Feedbacks and general tips are welcome..

(Note: contains no animation, built with HTML and CSS only)

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. Just a few tips

  • You don't need to add width: 100%; on the body. By default the width of the body is always 100%.
.section {
  display: flex;
/*   flex-wrap: wrap; */ /* you don't need this */
  column-gap: 10px;
  align-items: center; /* add this line to horizontally align the content */
}

Marked as helpful

1

@Himanshu-196018

Posted

@hitmorecode thanks for the tips.

  • I will remember to not include width on the body
  • Actually I always try to use align-item property first, if its not working only then I try other ways to center the elements.

I would like if you guide me more like this in future.

0
hitmorecode 6,230

@hitmorecode

Posted

@Himanshu-196018 glad I could help. I'll do my best to help 👍

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord