NFT Card using grid and flexbox

Community feedback

• 

  Adarsh Rai•560

  @AdarshRai0

  Posted about 3 years ago

  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 */
  
  

  00
• 

  Adarsh Rai•560

  @AdarshRai0

  Posted about 3 years ago

  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.

  01