Welcome! 👋🏼

Frontend Mentor - NFT Preview Card

Frontend Mentor challenges help you improve your coding skills by building realistic projects

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This is an entry-level NEWBIE-Free challenge that uses only HTML & CSS

The challenge

• build out this NFT preview card component and get it looking as close to the design as possible.
• See hover states for interactive elements

Screenshot

• mobile-version

• desktop-version
  

Links

• Solution URL: Frontend Mentor Solution Page
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• with Visual Studio Code Editor

What I learned

I learned an uncommon CSS property while building this project

img {
  mix-blend-mode: *-css-keyword-*;
}

what this property does is, give us the accessibility to blend the parent element background with the using element's content.

Continued development

I never knew this property exists in CSS until one of my Frontend Mentor Community friends pointed that out. Until now whenever some blended effect had to be created in a project, I followed an ordinary element overlaying method. But thanks to this, it is less code & markup.

• special thanks to Lucas from Frontend Mentor Community

Useful resources

• developer.mozilla.org more about the 'mix-blend-mode' CSS property

Author

• Frontend Mentor - @M-lakshan
• Dev.to - @mlakshan