Frontend Mentor - NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

The job is to replicate a webpage with one's own style of approach.

The challenge

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

My process

I Started with HTML structure and the proceeded to the CSS whereby I styled it based on the 1440px screen size first. Then I styled it for the 375px optimal screen size.

Built with

• HTML5 markup
• CSS properties

Continued development

I have challenge with box model properties in the css so positioning and arrangment are areas I want to focus on more. So I would like to refine that more so that I can create better designs.

Useful resources

• Example resource 1 - This helped me for any HTML or CSS tags or properties that I was looking for. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @ambmamo
• Twitter - @yourusername