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

Responsive card with image and title

P

@outerpreneur

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


I just created my first project on Frontendmentor. I have managed to do the most. I struggle to place the nested icons (the diamond and clock) in the center of its container. I would appreciate your feedback if possible, it will encourage me to continue with other projects. It also seems like I have a problem with Github and the images. I'm trying to find out why aren't they showing up on the browser. Thanks in advance

Community feedback

@mustafaalkhiat

Posted

one more thing you dont need to make the wrapper div flex , cause element already in column direction.

Marked as helpful

0

@mustafaalkhiat

Posted

Dear @outerpreneur , No you dont have issue with github i noticed in :

<link rel="stylesheet" href="style.css"> <img src="/images/image-equilibrium.jpg" alt="equilibrium-image"> <img src="/images/icon-ethereum.svg" alt=" "> and so on, You did not add a point "." that's why your images wont show up.try this <img src="./images/icon-ethereum.svg" alt=" "> but if add any image in stylesheet (css) you also need to add two points ".." And about the diamond and the clock it happend to everyone you can fix this with transform:translateY(-10px)

Marked as helpful

0

P

@outerpreneur

Posted

@mustafaalkhiat Thank you so much! all your feedback has been put into practice and is working well now. I appreciate your help!

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