SF-codes/nft-preview-card-component-main

A fully responsive NFT project card with scroll over features

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-nft-card-w-flexbox-pseudoclasses-etc-no-css-framework-mqZblpHNK
• Live Site URL: https://sf-codes.github.io/nft-preview-card-component-main/

Screenshot

My process

My game plan was first and foremost setting up HTML, and :root of CSS with the colors and typography provided from the style guide. Afterwards, I set the proper displays/positions for each, careful not to overcowd with unnecessary inputs. Placed all the colors, then margins/padding, followed by hoverings, transitions, opacities and shadows.

Built with

• Custom CSS ( No frameworks this time )
• Custom HTML
• Flexbox
• Google Fonts
• A good eye!

What I learned

This was a fantastic CSS refresher, I learned even more about Flexbox as well as finetuned some of it ( Always, right? ) I learned that looking deeply at something can help you pinpoint exactly what you need to do in a lot of cases.