roficoder/frontend-mentor-3rd-project

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

• Frontend Mentor - NFT preview card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
• Body Section
  • Create a main section
    • 1. Image-Box
    • 2. h1
    • 3. paragraph
    • 4. time and price
    • 5. hr
    • 6. div
    • Built with
    • What I learned
  • Author

Overview

The challenge

I was challanged to make a card which should have some hover effects

Screenshot

Links

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

My process

Body Section

Properties

width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: hsl(217, 54%, 11%);

Create a main section

Properties

background: hsl(216, 50%, 16%);
width: min(350px, 92%);
border-radius: 20px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;

1. Image-Box

border-radius: 10px;

Image

width: 100%;

2. h1

3. paragraph

4. time and price

5. hr

6. div

• img
• span
• span name

Built with

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

What I learned

I learned a lot from here because the previous project was very helpful I made some mistakes and got solved by the help of community like

• using semantic tags for accessibility
• using right width and height

.proud-of-this-css {
  width: 100%;
}

instead of

 {
  width: 100vw;
}

because it creates scrolling

Author

• Frontend Mentor - @AbdulRaouf33
• Twitter - @AbdulRaouf33