Skip to content
Submitted almost 3 years ago

Responsive NFT Preview Card using Flexbox

Oliver•40
@OliverNikolovski
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

Tried to make it look as closely to the original as I could. I put the svg and avatar icons with the CSS ::before element, instead of putting them as HTML tags. I don't know if that's the correct solution. Also, couldn't quite get that horizontal line to look engraved like in the picture. If you have any suggestions about improving the HTML or CSS I'd like to hear them out. :)

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @OliverNikolovski ,

    I have some suggestions regarding your solution:

    • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image `Equilibrium #3429, Jules Wyvern

    • For any decorative images, each img tag should have empty alt="" ( as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view ). I see the other decorative images you have used css for them , I recommend to use an unordered list<ul> to wrap class="card-status card-item and in each <li>, there would be <img > and<p> . Then use flexbox properties to align them centrally

    • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden:true or role presentation with empty alt

    • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • you can use border-top: to the class="card-footer card-item" , no need to use <hr class="card-item"/>

    CSS

    • Add this to the overlay as borders are not rounded. .overlay { border-radius: 0.4rem; }

    • Use min-height: 100vh; for the <body> using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page

    • width: 19.5rem; an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • height: 33rem;Also you would never want to set the height of the element. Let the content inside the card element dictate the height of it. You can a look at my solution , you might have an idea.

    Overall, your solution is good, Hopefully this feedback helps.

    Marked as helpful
    1
    Oliver•40
    @OliverNikolovskiPosted almost 3 years ago

    @PhoenixDev22 Hey, thanks for the suggestions, will definitely improve my code and have those in mind. Also, I will check out your solution, too. Cheers!

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Oliver Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    Marked as helpful
    1

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