Preview Card Component using HTML, CSS, Flexbox, CSS Grid

Community feedback

• Account deleted

  Your solution looks ok but I think your css is all over the place, & when you hover on the buttons the container moves... cut down on the padding on button:hover, I tried this;

  button:active, button:hover, button:focus{
      padding: 13px 29px;
  }
  

  & it worked perfectly.

  Marked as helpful

  1

  ---

  

  Musa•170

  @its-me-musaPosted about 3 years ago

  @thulanigamtee thank you this is very helpful

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Hello Musa 👋! Congrats on your submission. Your solution is looking very nice. Some things to note:

  • The background-color is best applied to the body
  • It'll be best to set the border on button rather than on button with a pseudo-class (e.g.: button:hover ). This prevents the column heights from resizing when the button is hovered.
  • Icons are decorative and should have alt=""
  • For improved accessibility, pages must have one <h1>. Your page has three.
  • Remember to include semantic sectioning elements or landmarks in your document. To do this, you can replace <div class="container"> with <main class="container">

  Happy coding

  Marked as helpful

  0

  ---

  

  Musa•170

  @its-me-musaPosted about 3 years ago

  @dewslyse thank you for taking your precious time to help. this is very helpful. much appreciated

  0