Profile card component. HTML and CSS

Community feedback

• 

  Mohamed Ehab•350

  @Programming-School-Pro-CodingPosted over 2 years ago

  Hi Sir

  Congrats on finishing this project 🎊

  I have a suggestion: Convert the attribution div to attribution footer

  Do you understand ?

  Marked as helpful

  1

  ---

  

  Mladen Lamešević•80

  @MladenLmPosted over 2 years ago

  @Programming-School-Pro-Coding hi, thank you! I need to pay more attention to accessibility :)

  0

  

  Mohamed Ehab•350

  @Programming-School-Pro-CodingPosted over 2 years ago

  @MladenLm Please Explain more

  0

  

  Mohamed Ehab•350

  @Programming-School-Pro-CodingPosted over 2 years ago

  @MladenLm Please Explain more

  0
• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  @MladenLm Codes looking good! One thing you forgot was the background. You can set the background like they have in the example using the background attribute on the body. If you need any help with this just let me know.

  As for getting the signature to the bottom it might not be the perfect solution, but I simply changed your body to display: grid; with the following properties align-items: center; justify-items: center; grid-template-rows: 98% 2%;

  I don't know if you have used grid before or not, but they can be really useful when you want something a little more structured than flex allows. If you haven't used grid before and would like an explanation of what the above code does just let me know!

  As for this "I made main into display: flex, and flex-direction: column, yet if I space-between they are not centered and all the way to the bottom." the reason that didn't work is because main isn't a parent element of <div class="attribution"> but rather this element is a child of the body element. However you can't just change the code to justify-content: space-between; as that would push the profile card to the top of the page and the attribution to the bottom. This is why I changed it to grid and did it that way.

  Here's a link to a page I made showing what your code would look like with the changes I mentioned. changes

  Hope this all makes sense and helps!

  Marked as helpful

  1

  ---

  

  Mladen Lamešević•80

  @MladenLmPosted over 2 years ago

  @12Kentos Hello Kent!

  Wow, thank you for your time to answer, this was really helpful!

  I totally forgot about the extra background images :/

  I have been learning about grid, but at the moment I am focused on getting good at flexbox. Thank you very much for your help!

  0