four-card-feature-section with #flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Oyasi! 👋

  Congratulations on completing this challenge! 🎉

  One suggestion I have is to learn how to use heading tags correctly.

  There's should not be two h1 in the page. If you want to move the text to the next line, wrap the text with span. Then, make the span as a block element.

  I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.

  That's it! I hope this information is useful!

  Marked as helpful

  0

  ---

  

  Oyasi Kelly Ogheneoghagha•200

  @OyasikellyPosted about 2 years ago

  @vanzasetia Thank you very much. I have changed it to one h1 element now, and then span it. You can check out the code. I appreciate your contribution and the correction.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Oyasikelly

  You are welcome! 👍

  I said to make the span element as a block element (display: block).

  Avoid using br elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation for br.

  Marked as helpful

  0

  

  Oyasi Kelly Ogheneoghagha•200

  @OyasikellyPosted about 2 years ago

  @vanzasetia Thanks once again. I have removed the (</br>) and set the (display : block).

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Oyasikelly It is not removed on the source code (and on the live site as well).

  Have you updated the code in the GitHub repository with the latest changes?

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Oyasi Kelly, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

  If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  ✌️ I hope this helps you and happy coding!

  0