Skip to content

Lentumunai-Mark/NFT-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

  • Challenge rontend mentor to build an NFT card.

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

Active State Image

active state image

Normal State Image

normal state image

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Vanilla Javascript
  • Styled Components - For styles

What I learned

  • This section goes over what i learnt while building this project.
  • Here are the key highlights that am very proud of.
<h1>My learnings</h1>
.proud-of-this-css {
  color: papayawhip;
  box-shadow : box-shadow: 0 3rem 2rem -1.5rem var(--bg-color-secondary),
      0 1.5rem 1.5rem 3rem var(--bg-color-secondary);
      /**positioning **/
  position: relative;
  position: absolute;
}
const proudOfThisFunc = () => {
  console.log('Yaay, High Order functions🎉')
}

Useful resources

  • Frontend Masters - This helped me for learn Javascript fundamentals. I really liked the way the teach and you should try it out.
  • CSS Tricks - This is an amazing site which helped me finally understand the various CSS properties. I'd recommend it to anyone still learning this concept.

Author

About

Frontend challenge by frontend mentor

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published