3-column preview card component built using HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML:

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here.

  CSS:

  Rather than setting the borders of each component individually, apply borders to the main component and hide the excessive part with overflow: hidden

  main {
      border-radius: 0.5rem;
      overflow: hidden;
  }
  
  .car-section:first-child {
      background-color: #e38826;
      /* border-top-left-radius: 0.5rem; */
      /* border-top-right-radius: 0.5rem; */
  }
  
  .car-section:last-child {
      background-color: #004241;
      /* border-bottom-left-radius: 0.5rem; */
      /* border-bottom-right-radius: 0.5rem; */
  }
  
  @media (min-width: 40rem) {
   .car-section:first-child {
       /* border-top-left-radius: 0.5rem; */
       /* border-top-right-radius: 0rem; */
       /* border-bottom-left-radius: 0.5rem; */
   }
  
    .car-section:last-child {
       background-color: #004241;
       /* border-bottom-left-radius: 0rem; */
       /* border-bottom-right-radius: 0.5rem; */
       /* border-top-right-radius: 0.5rem; */
    }
  }
  

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  jayanthi•180

  @jrc17Posted almost 2 years ago

  @MelvinAguilar Thank you for your suggestions

  1