Usei CSS FlexBox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @guthierryschiavo ,

  I have some suggestions regarding your solution:

  You can use a landmark footer for the attribution.<Footer>should not be in the<main >. HTML5 landmark elements are used to improve navigation .

  • About<h1>it is recommended not to have more than one h1 on the page . You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). THen swap those <h1> by<h2>.

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  

  • width: 290px;an explicit width is not a good way . consider using max-width to the container that wraps the three cards.

  • height: 450px;It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

  • border-radius and overflow hidden to the container that wraps the three cards.

  • use width: 100%;instead . If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.

  • In line-height: 25px;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

  On the hover on the links , they go up . it's not normal . so for that you can use border:2px solid transparent ; for <a> and on the hover they will be border:2px solid white;. It's better to use

  Overall , your solution is good . Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Guthierry Schiavo Lima•120

  @guthierryschiavoPosted over 2 years ago

  @PhoenixDev22 Thank you very much! Your feedback helped me a lot!

  1