Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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 Card Component Challenge

darthTh0t 50

@darthTh0t

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


Hi fellow developers,

This is my second challenge. It helped me understand the fundamentals of CSS on a much deeper level. Please let me know if any error is left behind. Thanks and have a great day.

Community feedback

Oskar 330

@slothmast3r

Posted

Hi. Congrats on your second challenge!

.main-container .image-card div{
  ...
  top: 60;
  ...
}

you forgot to use any units on top attribute. what i recommend is using position: relative on parent class and position: absolute on child.

Please avoid using *{...} it makes code unreadable.

Add some animations to make it look cooler

Good luck!

Marked as helpful

0

darthTh0t 50

@darthTh0t

Posted

Hi @slothmast3r, thank you so much. I have followed tutorials where *{...} was used extensively. I will make sure not to include this line in the future.

And definitely more thank you for noticing the error.

0
Oskar 330

@slothmast3r

Posted

@arnav-sahoo okay sorry my bad, i didnt look in to your code that much 😅. In this case margin:0 and padding: 0 is reasonable.

*{
  margin: 0;
  padding: 0;
}

but in other cases you should be careful.

Just to be clear what i meant with positions

<div class="parent">
   <div class="child">
   <div />
<div />

.parent{
  position: relative;
} 
.child{
 position: absolute;
 top: 0;
}

it positions child relative to parent div.

0

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