Four card feature section using HTML and CSS Grid

Community feedback

• 

  P

  Nikita Vologdin•470

  @NikitaVologdinPosted 2 months ago

  Hi @Soniawan!

  Great job on the design! The grid layout looks awesome. I have a few suggestions for improvement:

  1. Background: I noticed a difference in background color between the solution and the design. Designs – background-color: hsl(0, 0%, 98%);

  2. Font Imports: I noticed a difference in background color between the solution and the design slider. For the font family, instead of importing all styles, we can refer to the style guide (style-guide.md) to see which styles are needed for this project (200, 400, and 600). In Google Fonts, when you're embedding the font family, you can choose only the styles you need in the "Styles" section on the left side. This will prevent unnecessary downloads for users and improve initial load times.

  3. H1 Font Size: The H1 font size on the desktop version should be 36px, not 32px.

  4. Letter Spacing: I noticed some small letter spacings for the H1 and hero paragraph in the design (0.25px and 0.1px respectively).

  5. Border Radius: The top border radius might be a little tricky, but here's what I suggest:

  CSS border-top-left-radius: 10px 1%; border-top-right-radius: 10px 1%; Use code with caution.

  There's also a slight difference in the bottom border radius between the design and your development. You can use 8px for the bottom border radius (border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;).

  Here's some information about elliptical shapes for border radius if you're interested: link to Mozilla Developer Network article on border-radius

  Cool work with the root variables! I especially like your box-shadow values. In my tests, I added a bit more blur for a stronger effect.

  Thanks for your hard work, Soniawan!

  Best,

  Nikita

  Marked as helpful

  0