3 Column Preview Card Component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  The element a must not appear as a descendant of the button element.

  To fix this, assign the button's CSS properties in a new class to be assigned to the "a" tag:

  not this
  <button><a href="">Learn More</a></button>
  
  but try this
  <a href="#" class="btn">Learn More</a>
  

  Keep it up!

  Marked as helpful

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  @denielden Thank you! :)

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Aneta, Nice work, congratulations! Very clean code.

  The 3 columns remain attached at the top because the flex alignment is based on the size of the container. So you have to give main an accuracy ... in this case the full height of the screen.

  Marked as helpful

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hey Aneta,

  Congrats on working through your 3rd project, great momentum.

  Your design looks good - well done!

  • 1. You need to set the Flexbox properties on the body, and probably flex-direction: column;
  • 2. Your semantics look great, I think you should review your accessibility/html report and fix those issues too. Your anchor tag's should be wrapped around the button.
  • 3. I think you need target the exact same declaration and reset them to 0: body > main > .one { border-top-left-radius: 0; border-bottom-left-radius: 0;
  • 4. I'm not sure on the best practice for the css.map, I personally don't keep it - this is interesting
  • you might want to add transition: ease .3s; to your button styles to make the hover affect a little smoother

  Keep coding!

  Marked as helpful

  0

  ---

  

  Aneta•180

  @anetaanettePosted almost 3 years ago

  @darryncodes Thanks a lot, I appreciate your feedback! :)

  0