3-column preview card component solution using html and css

Community feedback

• Account deletedPosted over 3 years ago

  Hi, your solution looks ok, but there's some things that need to be changed... so I gave your code some touch ups;

  • I removed a lot of things from overall-container as they weren't needed and I ended up with this;

  .overall-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }
  
  

  • You shouldn't have put it in position : absolute as that takes the element out of the document flow... position : absolute should be avoided at all times unless you really need to use it.

  • & Flexbox centers it nicely so all that top, left position isn't necessary.

  • & with the cards, you could have just summed all of them up and gave them the same styling collectively instead of writing the same style for each and every card, so I did these changes;

  .sedan, .suv, .luxury {
    background-color:	#e38826;
    width: 250px;
    height: 300px;
    padding: 50px 20px 80px 20px;
    border-radius: 5px 0 0 5px;
    position: relative;
  }
  
  .suv {
    background-color: #006970;
    border-radius: 0;
  }
  
  .luxury {
    background-color: #004241;
    border-radius: 0 5px 5px 0;
  }
  
  

  • Next time to make it a whole lot cleaner you can give them the same class... this is a whole lot better because you write less, for more.

  You must also make it responsive because it currently isn't... I'll leave all that to you, it shouldn't be hard.

  Keep coding👍.

  04

  Marked as helpful