Submitted over 1 year ago

NFT preview card component

Dinael Domingos Santos• 40

@DinaelDomingos

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is a solution for the NFT preview card component challenge in Frontend Mentor](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U). This is my second challenge and they have helped me a lot to improve my HTML and CSS skills.

I tried to adopt semantic HTML5 markup, CSS custom properties and used Flebox in almost all DIV elements.

My biggest difficulty was with the overlay effect for DIV .image . I didn't remember how to apply the effect and it was necessary to research other ready-made solutions to be able to deliver the final project. But in the end it was a great learning experience.

Please feel free for any comments and feedback.

Community feedback

Nadun Dhananjaya• 210

@nadun-dhananjaya

Posted over 1 year ago

Hello 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will greatly interest you

HTML and CSS

The NFT card is not center align

You can centralize your NFT card by centralizing the items inside the main tag.

You can center the items inside the main tag using display: gird

main{
    display: grid;
    place-items: center;
    height: 100vh;
}

using display: flex as below

main{
    display: flex;
    place-items: center;
    height: 100vh;
}

Marked as helpful

Dinael Domingos Santos• 40

@DinaelDomingos

Posted over 1 year ago

@TechySky Thank you my dear! I adopted your second suggestion. Now the project is much better. Thanks again!

C H A R A N 🎯• 2,690

@0xabdul

Posted over 1 year ago

Hey there 👋 first Congratulations you finished the NFT Card project doing very well..

but some issues in NFT Card project
Problem

the NFT card is not center align

Solution
note the point
In CSS :🎨

body {
display : flex;
align-items: center;
justify-content : center;
height : 100vh;
width : 100%;
}

for center align
first problem solving🥳
Peace be upon Allah Mercy and Love...

Marked as helpful

Please log in to post a comment

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