Skip to content
Submitted about 2 years ago

Nft Preview Card solution

Tanguy•140
@OignonFugace
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

I am pretty satisfied with the outcome, but unsure whether I have used proper or common approches on these three subjects :

  • Styling <hr> elements : the problem being that mine without the opacity: 30% seems too wide (in comparison to the design expectations) even after reducing its height to the minimum of 1px. So I am wondering is there exists some sort of a css one liner that would render a thin line (thinner than 1px ?) without having to use all those border and opacity properties.
  • Adding the hover effect on the image (background + icon triggering on hover).
  • The circle around the avatar.

Any feedback on those or any other part of the challenge is welcome !

Thank you all.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Tanguy,

    Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution, if you don't mind:

    • Page should contain <h1>. In this challenge, you may use<h1> visually hidden with class=”sr-only”. You can find it here
    • For any decorative svgs, each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those svgs
    • Profile images like that avatar are valuable content. The alternate text should not be avatar.You can use the creator's name Jules Wyvern. Read more how to write an alt text .
    • If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <hr>, you can use border-top: to the avatar's part. You can read more in mdn
    • There are so many ways to do the hover effect on the image, The one I would use is pseudo elements::before, ::after. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's no need for extra clutter in the HTML.
    • The icon view svg does not really need to be in the HTML. You can use CSS for it.
    • Remember a modern css reset on every project that make all browsers display elements the same.

    Overall, Excellent work! Hopefully this feedback helps.

    Marked as helpful
    1
    Tanguy•140
    @OignonFugacePosted about 2 years ago

    Hi @PhoenixDev22,

    I am amazed at how valuable those feedbacks are. Thank you very much and I'll give them a try real soon!

    0

Please log in to post a comment

Log in with GitHub

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