HTML,CSS image overlay and position property

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 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!

  Marked as helpful

  1

  ---

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @denielden Thank you for your valuable feedback.I will improve on my code according to the tips you mentioned.

  1

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @denielden How do I get rid of bottom margin in the card which can be noticed here

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @jillpandya2594 remove min-height from card class. Which bottom margin do you mean? I do not understand :)

  0

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @denielden I meant the extra space present in the bottom of the card which shouldn't be there as its not in design.I was viewing the design comparison.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @jillpandya2594 remove it as suggested in my previous comment

  1

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @denielden I removed it with no effect

  1
• 

  NitheeshKumar C•440

  @NitheeshKumar-CPosted over 2 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

  Marked as helpful

  0

  ---

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @NitheeshKumar-C Thank you for your feedback.I will definitely take your advice.

  1
• 

  patil sahil•440

  @Patilsahil821Posted over 2 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.....

  Marked as helpful

  0

  ---

  

  jill pandya•90

  @jillpandya2594Posted over 2 years ago

  @Patilsahil821 Thank you .I will definitely check out your projects.I will try and improve on the issues you mentioned.

  1