Responsive NFT preview card component

Hey Abhilash, good job

Keep up the good work

Your solution looks great however I think that the hr that you are using needs a bit more size or opacity, as its not visible properly. And try to use other units instead of % on your main container, as % changes based on the parent element, in this case parent element is the body and change in its width changes your components width.

@ccreusat has given a good solution of that.

I hope this helps you in your coding journey

Cheers

Happy coding 👍

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the user information needs some margin from the bottom using margin-bottom. Secondly the divider line needs a bit more opacity

I hope this helps

Cheers

Happy coding 👍

Hello ! Good job :)

It looks nice but you can improve your solution if you wants :

• about your markup, try to stick to the same convention (Title, active, Image, ...): title, active, image, .. Take a look at BEM, OOCSS methodologies
• Get rid of your width % for your component .container, make it with max-width: 350px and remove height so it could breathe :)
• max-width: 100% on your main image is a better practice than width: 90%
• For better UI, you could put your <div class="active"> element inside your <div class="image"> and modify the CSS to :

.active {
cursor: pointer;
    background-color: hsl(178, 100%, 50%,50%);
    border-radius: 5%;
    text-align: center;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    display: none;
}

• Take it in consideration than your .active element could be a link and leads to another page (maybe change the div to a <a>)

And when hovering it, change display:none by display:flex > .Image:hover .active

• Replace all your border-radius with other unit (rem/em/px) but % has a weird behavior .

Hope it helps and Enjoy Coding!