/FM-NFT-preview-card-component

This repo is for a frontend mentor challange based around NFT preview

Primary LanguageSCSS

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

Users should be able to:

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SCSS custom properties
  • Flexbox
  • JS animate method
  • Cursor follower
  • Desktop-first workflow
  • SCSS - CSS Preprocessor

What I learned

I've had some/many problems with making the events on image click but in the end, I guess I managed. I also wanted to have a try with mouse follower for the first time as it seemed to me that the vibe od the website suits it.

enlarged.animate([
  {
    transform: 'translateY(-150px)',
    opacity: 0
  },
  {
    transform: 'translateY(0)',
    opacity: 1
  }
], animateParams)

Author

Acknowledgments

Hyperplexed's blob cursor follower - An awesome cursor follower from Hyperplexed. I VERY HEAVILY inspired mine from his.