Skip to content
Submitted over 2 years ago

NFT Card

Kaupaunha•70
@Kaupaunha
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

Community feedback

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

    Hello @Kaupaunha,

    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(image-equilibrium.jpg), Equilibrium #3429, Jules Wyvern`.

    • 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

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view,icon-ethereum, icon-clock ).

    -The avatar' alt text shouldn't be user avatar . set it to Jules Wyvern .

    • Tips for writing 'good' alt text.

    • 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 an unordered list<ul> to wrap class="eth-days" and in each <li>, there would be <img > and<p> .

    CSS

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>(remove position absolute )like this:
    
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;


    body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: hsl(217, 54%, 11%);
    font-family: "Outfit", sans-serif;
    color: hsl(215, 51%, 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

.container {
    /* position: absolute; */
    /* top: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* margin: auto; */
    padding: 2rem;
    width: 26rem;/*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: 47rem/*Also you would never want to set the ``height`` of the element. Let the content inside the card element dictate the height of it.*/
    background-color: hsl(216, 50%, 16%);
    border-radius: 1.3rem;
    text-align: left;
    box-shadow: 0 0 4rem hsl(216deg 53% 9%);
}

    A general point - try to put classes directly on anything you want to style.

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

    Marked as helpful
    1
    Kaupaunha•70
    @KaupaunhaPosted over 2 years ago

    @PhoenixDev22 Thank you so much for your feedbacks, it's really helpful ! Just learnt lot of things thanks to you ! I'll work on it !

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hay ! Kaupaunha Good Job on challenge

    1
  • -_RIkka•140
    @devsimocastlesPosted over 2 years ago

    great work

    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