@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the
.attribution
element has not been placed bottom yet. Actually it needs to be placed at the bottom of screen and the card component wants to be centered. So let me explain, How you can place the component at bottom with usingabsolute
positioning forfooter
- Wait, hang up a second. Before moving on to positioning the
attribution
element you first need to change it into afooter
element.
- Because the
attribution
will typically contains information about the author of the section, copyright data or links to related documents. So it needs to be afooter
element instead of plaindiv
element to improve accessibility of your solution.
- Now we can proceed to positioning, You you already used
Flex
layout ofcss
to center the component, So you just want to addabsolute
position for<footer>
element to place it in bottom of the page
body {
position: relative;
}
footer {
position: absolute;
bottom: 1em;
}
- Now your
attribution
component has been properly at bottom.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful