Blog preview

Community feedback

• 

  P

  Daniel 🛸•44,810

  @danielmrz-dev

  Posted over 1 year ago

  Hello @ivi-developer!!

  Your solution looks excellent!

  I have a couple of suggestions:

  • First: Use <main> to wrap the main content instead of <section>.

  📌 The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  • Second: - Check the style guide file to see what is the recommended font-family for the project. Then you can import it from Google Fonts and use it. If I'm not mistaken, the font-family for this project is Figtree.

  I hope it helps!

  Other than that, you did an excellent job!

  11

  Marked as helpful
• 

  Sasha Herman•270

  @SashaH62

  Posted over 1 year ago

  Great job with the project. 👍

  Some suggestions to assist with the layout:

  • Instead of placing the SVG directly into the markup, you can use an <img /> tag and set the source to the image in your assets folder. This will allow you to add a container around the <img /> tag so that you can contain the image (use 'object-fit: contain' on the <img /> tag) and add a border radius to the container.

  • Instead of adding margin to the individual elements to create space inside the container, add padding to the container itself so that the elements share the same padding relative to the container.

  • To achieve the same box-shadow that is in the example, set the blur to 0 and the opacity to 1 (try box-shadow:8px 8px 0px 0px rgba(0,0,0,1)).

  Hope some of this can help. 👋

  11

  Marked as helpful