Frontend Mentor - NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements: the "Equilibrium" photo, the article section heading and the name of the author (in the footer).

Screenshots

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Built with

• HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I have to say that I am doubly pleased as i've refreshed on many aspects on CSS amongst which "position" in combination with "z-index" properties which i feel that only looks easy at first.

Continued development

When it comes to design, there are many guidelines to follow in terms of layout & size which I intent to fortify. Currently my primary focus is on Java Script and even though it wasn't a main theme of this project, there were a lot of instances that I could've solved in quarter of the time by using JS.

Useful resources

• Vital resource

Author

• Frontend Mentor - @Nele82

Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.

Acknowledgments

Even though this is my very first public project carried out without any kind of direct tutoring, i have to praise a developer from the above mentioned YouTube video resource. I would go as far as saying that it made this project possible seeing how i did not have prior knowledge in using Git in conjunction with GitHub.