Dan

Latest comments

• 

  Adithya•80

  @Adithya2907

  Submitted over 2 years ago

  

  NFT preview card using HTML and CSS

  2

  30
  

  Dan•150

  @igafshell

  Posted over 2 years ago

  Hey Adithya!👋

  Congrats on your solution! 🎉🎉

  It's very impressive how you made it look exactly like the design! However, try to customize your next projects with elements of your own, like animations, glow effects, etc.

  • Avoid using width, and instead opt for min-width or max-width to ensure responsiveness ( change the width: 100% to `min-width: 100vh' in the body selector )
  • Try reducing the number of containers - you don't need the article element
  • Semantics: everything is perfect; instead of the main you could've used a div, because it's just a component, not a whole page

  That's about all, have a great day!

  Happy coding!

  0
• 

  Marcin•80

  @mmiskiewicz99

  Submitted almost 3 years ago

  

  QR card component challenge

  1

  50
  

  Dan•150

  @igafshell

  Posted almost 3 years ago

  Hey Marcin!

  Congratulations on completing your first challenge on Frontend Mentor!🎉🎉

  I see that you've put much effort into your project and written nice code. I got some tips for you:

  • Use font-size: 15px on the .card, font-weight: 400 on the <p> and font-weight: 700 on the <h1>.
  • Simplify the html structure by removing the .main-screen div, and apply its styling to the body instead. And to keep the footer stuck to the bottom put margin: auto on the .card. This will keep the footer down and center the card at the same time. I advise you to read this article if you want to learn more about that.
  • Add box-content: border-box to the css reset. This will make sizing easier. Read more about it here.
  • This is optional, but you could add some padding, margin and border-radius to the footer to make it more stylish.

  That's about it. Good luck in your next projects.

  Happy Coding!

  0

  Marked as helpful
• 

  Heather Stout Svanidze•30

  @heathersvanidze

  Submitted almost 3 years ago

  

  HTML, CSS

  2

  10
  

  Dan•150

  @igafshell

  Posted almost 3 years ago

  Hey Heather!

  Congratulations on completing your first challenge on Frontend Mentor! 🎉🎉

  I would suggest that you add a few details to your code:

  • You can leave the attribution, but make sure to respect the HTML5 semantics and use the <footer> tag instead of <div>. If you want, you can make it stick to the bottom by putting the following css: body {display: grid; grid-template-rows: auto 1fr; place-items: center}. This will make the card push the footer to the bottom and occupy the rest of the space, and also center horizontally and vertically the elements.
  • Set max-width: 20rem to card body to match the size of the design and also make sure to use rem instead of px. And set width: 100%; to the .img to make it fit the card.
  • Add a box-shadow attribute to the card. You can read more about this attribute in this article.
  • Add an empty <h1> to resolve the accessibility issue. Although this is just a component, you still need to put it in.

  Well, that's about it. Happy coding!

  0

  Marked as helpful