NFT Card using grid and flexbox

Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.

I usually reset all the styles and I start from scratch.

Here is my styles.css

:root{
  /* colors and fonts */
  --font: "Montserrat", sans-serif;
  --white: #ffffff;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

html, body{
  height: 100%;
}

body{
  width: 100%;
  font-family: var(--font);
}

/* Other rule-sets */

Hi Bismeet congratulations on your new challenge!

I took a look at your code and I have some tips for you.

The ripple background was missing, in this case it is better to import it in the body with background-image and put a media query to change mobile / desktop or use the <picture> tag in the HTML.

I saw that you used id as a selector, but a good practice would be to handle the entire design with classes and leave the id for forms and Javascript.

Congratulations, since your first project, your challenges have gotten better and better.