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.

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

Users should be able to:

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

• Solution URL: My Git Repo
• Live Site URL: NFT Card Site

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

  <div class="card">
    <div class="header">
      <img 
        src="images/image-equilibrium.jpg" 
        alt="card image"
        class="cover">
    </div>
    <h2 class="title">
      Equilibrium #3429
    </h2>
    <p class="body">
      Our Equilibrium collection
      promotes balance and calm.
    </p>
    <div class="details">
      <p class="currency">
        <img 
          src="images/icon-ethereum.svg"
          alt="">
        0.041 ETH
      </p>
      <p class="time">
        <img
          src="images/icon-clock.svg" 
          alt="">
        3 days left
      </p>
    </div>
    <div class="author">
      <img 
        src="images/image-avatar.png" 
        alt="author pic"
        class="profile">
      <p>
        Creation of
        <span class="name">Jules Wyvern</span>
      </p>
    </div>

:root {
  --main-bg: hsl(217, 54%, 11%);
  --card-bg: hsl(216, 50%, 16%);
  --line-cl: hsl(215, 32%, 27%);
  --cl-soft: hsl(215, 51%, 70%);
  --cl-cyan: hsl(178, 100%, 50%);
  --cl-white: hsl(0, 0%, 100%);
  --overlay: hsl(178, 100%, 50%, .5);

  --fw-300: 300;
  --fw-400: 400;
  --fw-600: 600;

  --fz-base: 18px;

  --sm: 375px;
  --lg: 1440px;
}

• Created css variables from the style guide.
• Helps to create a consise and consistent look in the card
• Also kept my code more maintainable in the long run.

I would love to sharpen my skills creation of more UI Components like nav-bars menus dropdowns etc...

• Kelvin Powell's turning design to code video on youtube - This helped me gain more insight on how to approach the challenge. I really liked this pattern and will use it going forward.

• Linkedn - David Imafidon
• Frontend Mentor - @Davemafy
• Twitter - @david_imafidon8
• Facebook - David Imafidon

Giving a big shoutout to kelvin powell on his video about effectively turning figma design files to well wirttem css code.