Skip to content
OverviewSolutions
7
Comments
4
Mohamed Abdessamed
@Brivan-26

All comments

  • Mohamed Abdessamed•140
    @Brivan-26Posted almost 3 years ago

    Nice try @Kalim22, your work was great, but I see that you didn't respect design's guides:

    1. Try to add fonts that are provided in style-guide.md
    2. The main card and the image need to have a border-radius
    3. The main card needs to have more padding.
    4. You have extra padding on the bottom of the pricing div
    5. the profile image needs to have a border of 2px with white color
    6. In your CSS, you are using a lot of positions absolute and relative, especially to the photos; try to avoid using them. For the Accessibility issues:
    7. Wrap your main content inside <main> tag
    8. Add the challenging signature inside the <footer> tag and most of the problems will be solved.
    1
  • Mohamed Abdessamed•140
    @Brivan-26Posted almost 3 years ago

    Well done @al3xback, you did a great job, the result is nearly Pixel perfect, what I liked most is your creativity there where you added color toggles and shuffle, which was awesome. The shuffle feature caused a little responsive issue because when I clicked shuffle on the screen between 600px => 800px, the cards were small too much which causes the text's adhesion, check it out here: https://snipboard.io/OodPnk.jpg.

    Marked as helpful
    0
  • Mohamed Abdessamed•140
    @Brivan-26Posted almost 3 years ago

    You did a great job! I think it's better to make sure that the whole content doesn't overflow the100vh of the body because you have a little bit of scroll. I checked your solution code and I noticed that you didn't set <h1> element, where it says on my accessibility report that I need to have a level one heading "Page should contain a level-one heading". How could you fix this?

    0
  • Arnold Ho•20
    @arnoldboy123Submitted almost 3 years ago
    • I am not sure how to get the active state image to display the view icon svg (The little eye icon)
    • Not sure how to accurately filter the card image to display the correct cyan color while in active state

    NFT preview component page

    2
    Mohamed Abdessamed•140
    @Brivan-26Posted almost 3 years ago

    To get the active state image, I can suggest you the following structure: -You will have a div (by name of header as an example) that contains an image(the NFT image) and another div by name active(inside this last div, you will have an eye icon). -In CSS: 1/target the header dive and add position: relative; 2/target the active div and make its position absolute, opacity set it as 0 by default, and when this div is hovered, make opacity: 1; to Center the icon, you can either use flexbox trick or top,left,right,bottom properties as we set position absoule

    Marked as helpful
    1