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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • 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

Screenshot

Links

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

My process

I started creating all the variables I will use, after that I create HTML content and finally I created styles and hovering styles..

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Desktop-first workflow
• Google fonts

What I learned

I design a proper variables structure. I learn that z-index won't work if position is not set in the container elements. I lear how structure a proper READ.me

:root {
  /* Colors */

  /* Primary */
  --clr-soft-blue: hsl(215, 51%, 70%);
  --clr-cyan: hsl(178, 100%, 50%);

  /* Neutral */
  --clr-very-dark-blue-mainBG: hsl(217, 54%, 11%);
  --clr-very-dark-blue-cardBG: hsl(216, 50%, 16%);
  --clr-very-dark-blue-line: hsl(215, 32%, 27%);
  --clr-white: hsl(0, 0%, 100%);

  /* Typography */

  /* font family */
  --ff-outfit: "Outfit", sans-serif;

  /* font weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semi-bold: 600;
}

Useful resources

• Z-index use - This helped me to undestand z-index use.

Author

• Website - [Dina Rocio]
• Frontend Mentor - @dinarocio
• Twitter - @DinaRocio15

Acknowledgments

Front end mentor frienda that push me through.