Submitted over 2 years ago

flexbox

Laxman Jonchhen• 50

@LaxmanJonchhen12

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hoping for review and feedback on challenge solution

Community feedback

Web Wizard• 5,690

@rsrclab

Posted over 2 years ago

Hi, @LaxmanJonchhen12~ Congratulate on your solution to the project. I have studied your work, and it looks good overall. Here are some of the tips I like to provide.

Some font sizes and spacings on this card doesn't match design. It is important to implement pixel-perfect requirement.
I hope you to try hover transition effects. That will make things greater.
Image hover effect doesn't work. I think that's because there is no position: relative property at parent of overlay element.

https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

Here is my solution to this challenge, and if it can help you even a bit, it would be great happy to me.

Cheers ~

Marked as helpful

Laxman Jonchhen• 50

@LaxmanJonchhen12

Posted over 2 years ago

Thanks for suggestion will implement the suggestions

PhoenixDev22• 16,950

@PhoenixDev22

Posted over 2 years ago

Greeting Laxman Jonchhen,

Well done on this challenge !I think you did a great job. To get rid of accessibility issues, I would suggest to :

• Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more • Have at least one <h1> in your code. You should have used <h2> instead of <h3> <h3 id="main__title">Equilibrium #3429</h3> Click here to read more

• Set the alt text for the images class="img__size", id="view" to an empty string. That's because the purpose of those images are mostly decorative and need not be announced by assistive technology like screen readers.

• Use an anchor tag to wrap the content of these <h3 id="main__title">Equilibrium #3429</h3> <span id="creator__info">Jules Wyvern</span> `(You need an interactive element around them. Anything with a hover style in a design means it’s interactive).

• Use classes rather than ids for styling because of the high specificity of ID's .

Perhaps looking into the BEM methodology to better name and organize your classes. read more about BEM.

I really hope hope this feedback helps. Happy coding

Laxman Jonchhen• 50

@LaxmanJonchhen12

Posted over 2 years ago

Sure would improve the solution by feedback mentioned Thanks for the feedback

Please log in to post a comment

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