Skip to content
Submitted over 2 years ago

nft-preview-card-component-main

kluvert•40
@hakime17
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

I had some trouble with the card and view icon positioning. I'm unsure of my methods . No.

Community feedback

  • Miguel Chavez•210
    @toonchavez8Posted over 2 years ago

    Hey good morning, first of all, I want to congratulate you for submitting a solution I know firsthand how much of a task it can be! so great job for accomplishing it.

    I took the liberty of pulling your code and I've reviewed it. and here are my suggestions in order to make some improvements.

    • in terms of expected markup language for HTML your missing <title>Your title </title> in the <head></head> section at the top of your index.html

    • there's a small error in your img that while it would make it work, some browsers might not detect the source linking, The error is a Backslash () <img class=img src=images\image-equilibrium.jpg`` and the best practice would be <img class=img src=images/image-equilibrium.jpg

    • In terms of accesability - you have a <div class="content"> rest of your code</div> wrapping your content you could easliy fix the accessability issues by swaping it for <main class="content"> rest of your code </main>

    • also all pages should have an <H1></H1> i would swap out your <h2>Equilibrium #3429 </h2> in line 31 for h1 and that would also fix the other accessibility issues

    if you want to read more on accessibility and semantic HTML I will provide a link Semantic HTML

    Now onto the fun part styling

    • You have display flex on your .content and that's great for adjusting most things but in this case, you wanted to center the card on the page and forgive me if I'm wrong but i haven't managed to make it work in the past with flex, however with position:absolute; I've managed to center it perfectly.
    position: absolute; /* this will activate top right left and bottom functions */
top: 50%; /* what this is doing is linking the content to 50% of the top and sending it to the bottom it's inverse i know */
left: 50%; /* this is the same as above but to send it to the right */
transform: translate(-50%, -50%); /* this is is negating top and left making stick to the center of the page*/
}

    • in terms of landing the design you got very close, however i was to knit pick i would reduce the dropshadow by adding rgba like this to make it more subtle box-shadow: 0px 10px 10px 5px rgba(0,0,0,0.1);

    • similar to the way that we centered your card, we can place your attribution to the bottom of the page and have it stick there. footer{ position: absolute; /* this will activate top right left and bottom functions */ bottom: 0; /* this is sending it to the bottom */ left: 25%; /* lightly to right */ width: 50%; /* this is the width of the footer */ height: 50px; /* this is the height of the footer */ text-align: center; /* this is aligning the text to the center */ font-size: 15px; color: hsl(215, 51%, 70%); }

    • also general recommendation on your css i see you are using display:flex; however im not seeing any other sub-tags like align, flex-direction to name a few, sometimes it's not necessary of course, but in this case, there's a couple of instances where you could incorporate them to make sure if the user adjusts their screen that everything moves like you want it to. I would highly recommend you play Flexbox Froggy it definitely helped me grasp flex

    There are a lot of other ways to do these cards but this is what worked for me and it might work for you. Give it a shot and good luck!

    btw some of the code blocks on here look immense without the vscode styling, i highly recommend copying and pasting them onto a code editor and giving it formating, if you are using VSCode with Shift+Alt+F Format document or Ctrl+K Ctrl+F Format selection and it will make it more readable as I included comments in the code block that will describe what each css style will do to the best of my ability

    Marked as helpful
    0
    kluvert•40
    @hakime17Posted over 2 years ago

    @toonchavez8 Thank you very much sir, it means a lot to me.

    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