Frontend Mentor NFT Preview card component

Community feedback

• 

  Efosa Collins EVBOWE•365

  @efecollinsPosted about 2 years ago

  Hello Alozie, great job you did here. Congrats!

  1. To make it mobile (responsive), you have to use media query which works in this format:

  @media screen and (max-width: 375px) {
            /* your code goes here */
  }
  

  For more study on Responsive Web Design, visit W3Schools. Don't forget to google search for queries like how to make your website responsive. You can also visit the Resources page on Front-End Mentor.

  2. This is an explanation of the style guide.

  • Layout: Your viewport for desktop should be 1440px and for mobile 375px.

  • Colors: The colors for your project begin from the hsl keyword e.g Soft blue: hsl(215, 51%, 70%) means hsl(215, 51%, 70%).

  • Font size: Your paragraph should have a font size of 18px.

  • Font: Go to the URL https://fonts.google.com/specimen/Outfit and select the font weights: 300, 400 and 600. Link the font to your CSS as such @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap'); at the top of your CSS page. Then do this:

  body {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  }
  

  Note: Change your font-weight where applicable.

  I hope I was able to answer your questions to a helpful level. Do enjoy your coding journey

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  Congrats on submitting your solution there's always room to improve You can replace you section rule in the CSS with the below to center the card on the page.

  section {
      padding: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  You can add the following to the body tag:

  body {
      font-family: Arial, sans-serif;
  }
  

  You're currently using a serif font in the style guide in the challenge there's a link to the font that should be used.

  You can look at my solution below to see which HTML element I used and how I structured my HTML:

  my nft card

  0