3 column preview card component main html css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  CSS 🎨:

  • You don't necessarily need to add border--radius to every column Instead, you can use set to the container parent and use overflow: hidden on the container to clip any excess from the image, achieving a similar effect.

  container {
    border-radius: 15px;
    overflow: hidden;
  }
  

  HTML 🏷️:

  • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by leaving its alt attribute empty. You can read more about this here 📘.

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

  Happy coding!

  Marked as helpful

  3
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @GiovanniPereira05!

  You did a very good job there!

  I have just one suggestion for improvement:

  • Since the button Learn more is a clickable element, it's nice to add cursor: pointer to it in addition to the background color shift hover effect.

  Other than that, you did a great job!

  Also, are you brazilian? Just asking because your name is pretty common here, and if you are, I can comment in portuguese 😊

  Marked as helpful

  1

  ---

  

  GiovanniPereira05•70

  @GiovanniPereira05Posted 11 months ago

  @danielmrz-dev Opa, sou brasileiro sim

  0
• 

  Neto Leutwiler•90

  @ntwilerPosted 11 months ago

  Hello Giovanni, I took a look at the code and it seems to be correct, you did it! Regarding border radious on mobile, the only thing you need to do is add these new codes within the mobile field, as if you were writing new code, understand?

  In your example it would be something more or less like this:

  @media screen and (max-width: 767px) {
  
       .container {
           flex-direction: column;
           align-items: center;
       }
  
      #q1{
       border-radius: "your new values here";
      }
  
      #q2{
       border-radius: "your new values here";
      }
  
      #q3{
       border-radius: "your new values here";
      }
  }
  

  I would also add a top and bottom margin to the mobile container to suit the project.

  I hope I helped and didn't bother you rsrs

  Marked as helpful

  1
• 

  P

  Jax Teller•670

  @piushbhandariPosted 11 months ago

  for border-radius, you can set it like this: border-radius: 10px 11px 12px 13px; top left, top right, bottom right, bottom left in that order

  FYI: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

  so in your code for mobile, you can set the first card to be, for example, border-radius: 5px 5px 0 0;, border-radius: 0; for the middle one, then border-radius: 0 0 5px 5px for the last one

  Marked as helpful

  1