3 Column Card Component / HTML and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like you declared each background color for each button which needs to be change the background color during the hover, actually we can handle that issue with a css color function named rgba()

  ---

  • The rgba() function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.

  ---

  • So just add rgba(0,0,0,0) for the button elements during hover

  ---

  • Let's look an example

  button:hover {
  background-color: rgba(0,0,0,0);
  color: white;
  outline: 1px solid white;
  }
  

  ---

  • Now you can remove these individual declarations for the background for each button element

  .sedans button:hover {
  background: var(--orange);
  color: var(--gray);
  border: 1px solid var(--gray);
  cursor: pointer;
  }
  .suvs button:hover {
  background: var(--blue);
  color: var(--gray);
  border: 1px solid var(--gray);
  cursor: pointer;
  }
  .luxury button:hover {
  background: var(--darkblue);
  color: var(--gray);
  border: 1px solid var(--gray);
  cursor: pointer;
  }
  

  ---

  • Now you have gotten the desired result without hassling in an efficient way.

  ---

  • Pro tip: you can use transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba provides more granular control over the color correction.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Yes your CSS can be shorter

  <section class="card-info sedans">
  <div class="img">
  <img src="images/icon-sedans.svg" alt="">
  </div>
  <div class="content">
  <h1>Sedans</h1>
  <p>
  Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.
  </p>
  <button class="btn btn-sedan">Learn More</button>
  </div>
  </section>
  

  .card {
  display: flex;
  align-items: center; ### you can remove this
  justify-content: center;  ### you can remove this
  }
  

  For the sections you have repeated the same thing three times. You can avoid this by adding an extra class to the section. I'm naming it card-info, you can name it whatever you want. Add this class to all sections and you can remove everything that it's the same.

  .card-info {
  max-width: 17rem;
  height: 30rem;
  padding: 2.5rem;
  }
  
  .sedans {
  background: var(--orange);
  border-radius: 7px 0 0 7px;
  }
  
  .suvs {
  background: var(--blue);
  }
  
  .luxury {
  background: var(--darkblue);
  border-radius: 0px 7px 7px 0px;
  }
  
  .btn {
  text-align: center;
  padding: 12px 18px;
  border-radius: 20px;
  border: 1px solid var(--gray);
  margin-top: 2rem;
  background-color: var(--gray);
  transition: all 0.3s
  }
  
  .btn-sedan {
  color: var(--orange);
  }
  
  .btn-suv {
  color: var(--blue);
  }
  
  .btn-luxury {
  color: var(--darkblue);
  }
  
  ### do this for the rest of the buttons
  .btn-sedan:hover {
  color: var(--gray);
  backgroud-color: var(--orange);
  }
  

  Marked as helpful

  0