Skip to content
Submitted over 1 year ago

Static NFT card placement using flex and position

alphaura•80
@alphaura
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

It was an interesting project to work on. Gave me some mental spark to actually place the card itself spot-on in the middle, and decided to give it a day while I was reflecting on the design itself.

Come the next day, I understood what I was doing incorrect, visualised the designed and structured the HTML accordingly, and used flex to position the card in the center.

Found a bit of difficulty on how to put the background and svg on the image upon hover due to not being used to this animation, but after some research and according changes, I understood how I could do it, and seems like I managed.

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi, some of this may interest you:

    HTML | ACCESSIBILITY:

    • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.
    • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.

    CSS:

    • In addition to resetting the box-sizing like you did, it is also good practice to remove margins and padding to have a clean starting point and reduce differences between browsers:
    * {
box-sizing: border-box;
margin: 0;
padding: 0;
}

    If you are setting margin and padding to 0 for the <body> wanting to do that reset, note that it will only apply to that element as these properties are not inherited by default.

    • Think about using relative units like rem for the font-size as well, since they are better for scalable layouts.

    Let me know if you want more info on any of these topics.

    I hope it’s useful : )

    Regards,

    0
    alphaura•80
    @alphauraPosted over 1 year ago

    @fernandolapaz

    Thank you for the information, please find below some further clarification about your comment;

    • Why should Equilibrium #3429' and 'Jules Wyvern' be wrapped with the <a> tag? I understand the interactive part of the content changing state, however, in this case it is not taking the user anywhere and is simply an extra decoration to be viewed, should it be hovered on.

    • I understand the alt part, since it's only providing bare minimum information, and is mostly there as a decoration, it doesn't need to be read by screen-readers

    • I don't do reset of margins using the * CSS rule, because in this case, their natural padding was just what I needed to space out the content. I also don't use this reset rule, as throughout my project I still use margin, so and tend to reset unwanted margins manually.

    Are you saying that by doing this reset of the margins and padding throughout the whole document, this could provide like a clean slate, which still enables me to set margins and padding where needed?

    • Regarding the usage of px and rems, I use pixels in these projects to keep consistency with what is provided in the READme file, because as you can see, I am doing my best to practice and use responsive units such as rem, max/min width and height and %, and only use px where a very specific size is needed

    Looking forward to hearing from you again!

    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