Skip to content
OverviewSolutions
10
Comments
14
Kunal Munda
@ryu-kamiski

All comments

  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    I really love ❀ all the solutions you have posted and how pixel perfect and so close it to the design. It's just amazing.

    And if you don't mind I have a few questions in mind. Please do answer if you have time for it.

    1. How do you make it so close to design and pixel perfect? πŸ‘Œ I have seen the code of this solution on Github and was wondering how the numbers were in decimals and even in three decimal digit numbers.
    2. Also if have read it till here then please do share your process in detail like what you do first ; or if you use naming convention like BEM.

    Thanks if you have read till here πŸ“Œ and happy coding. 😁

    2
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    I also have completed this challenge and I don't know if have noticed it or not the design has the social icons at the bottom right of the screen and the illustration takes almost all the left portion of the page. This issue may be caused by how the html is setup or the css is having some issues. Sorry to not give actual feedback but I am also facing this same issue.

    1
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    As @skyv26 said they are the issues and if you have noticed it or not but the last text has some letter-spacing to it and the grey text are smaller in size.

    Marked as helpful
    1
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    WOAH! That is very nice they are very similar and I think if you had the figma files then you could have made the design even more better and to the point.

    0
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    First problem if you are using css to add the svgs then you have not given your the images a div element to the html and if you have given the img tag in html then you are having problem with the github repository. Also define a height to the cards and use flex or grid.

    0
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    Nicely done! I can see you have not given line height property to the paragraph and the last line of the design. They feel compact and is not similar to the design.

    1
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    This is what I don't like about Bootstrap, it limits what you can create with css. I recommend Tailwind CSS if you like using utility based css. It is more flexible in use and gives you more options to customize your code with css. Check it out!

    0
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    That is one of the closest design I have seen so far. And do share what you did to the icons to center them with the text.

    Marked as helpful
    0
  • Damilola Ajewoleβ€’10
    @abbie34Submitted almost 3 years ago

    How do I make this responsive? Does anyone have any course that would teach me how to make responsive websites? How is the accessibility of this webpage? How do I make the hover effect work on the equilibrium image?

    NFT-Preview Card Component

    2
    Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    I recommend using flexbox or grid and don't set the height of the card as the items inside the container will fit items relative to the container.

    0
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    You could improve the responsive side of this challenge by using flexbox and grids. You should use rem values for font as rem uses values of the root of the webpage that is the value set by the user's browser and adjusts its value accordingly. These three things helped me greatly in my codes.

    1
  • Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    You should probably use flex as it is easy to implement and use. I recommend learning grid for these types of layout as it would be easy to swap from desktop to mobile view with these properties and you will not face irregularities in your layout.

    0
  • vishwa3β€’250
    @vishwa3Submitted almost 3 years ago

    I was not able to implement active state for image-equilibrium(top image) as not sure how to change color of image on hover . Also didn't add any code for Mobile design as I think in mobile view it is displaying as expected

    nft-preview-card-component using html and css

    2
    Kunal Mundaβ€’200
    @ryu-kamiskiPosted almost 3 years ago

    You are right I'm also having problems with the hover state. Also you forgot to link the required font. Other than these no issue.

    0