HTML,CSS image overlay and position property

Community feedback

• 

  Travolgi 🍕•31,320

  @denielden

  Posted about 3 years ago

  Hi Jill, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • remove margin-top from card class because with flex they are superfluous
  • add min-height: 100vh to container class because Flexbox aligns child items to the size of the parent container
  • add transition also on the text with hover effect

  Overall you did well 😁 Hope this help!

  16

  Marked as helpful
• 

  NitheeshKumar C•440

  @NitheeshKumar-C

  Posted about 3 years ago

  Hi there😃,

  The solution looks good. Here are some improvement code,

  For more accurate center use flex-box:

  Based on the problem use :

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
  }
  

  For <hr> (Horizontal line):

  hr {
      border: 1px solid;
  }
  

  Happy Coding👨‍💻,

  NitheeshKumar

  01

  Marked as helpful
• 

  patil sahil•440

  @Patilsahil821

  Posted about 3 years ago

  hey, awesome you did it very perfect the only thing you have to look that is accessibility issues and html issues except these you did very well and Don't forget to check mine projects also. best of luck for your next projects.....

  01

  Marked as helpful