Here is my project:
https://codecademy-project-the-cozy-tea.vercel.app/
I have one doubt about the footer of the project. This footer looks like overflowed the previous section (location) to do that effect I used:
footer{
position:relative;
top:-200px;
background-color: black;
margin-bottom: -200px;
padding: 20px;
}
Is there a simpler way to do it?
Thanks!
Hi there, Juan!
Let me ask you this: can you explain why you would need the footer to have its positioning set to relative?
Hi,
Because the footer (in the design spec) seems to be over the anterior item. So, I used “position: relative;” and: “top: - 200px;” to adjust the footer to make the footer get over the “Locations” section. But then, when a do this the original space of the footer remains there. That´s why I put the “margim-bottom: -200px”.
Looks a little bit messy, I don’t know if is the best way to do it.
Mmm. I am not sure what you mean when you say the footer is over the anterior item. From the design spec, the footer lies directly under the locations with about 16px-18px of padding between the two. However, you are going to see an “overlapping” issue because the image has an inline style applied.
As you can see here, when the inline style is removed, the overlap goes away:
There would need to be some design adjustments to correct the display for the locations.
Another way to solve this may be to put “position:fixed” on the footer…Also the location img it’s smaller than it looks on de design spec. I put it with 700px. It´s my effort to try to replicate what is been asked.
Oh, I think I know what you are talking about now. Instead of using background-image for the locations section, you have the actual image showing its entirety—which is why you think you need to position the footer relatively to “overlap.” It may be easier in this case (because the image is more for decorative purposes), along with the banner, to use background-image.
This is just quick manipulation of what you currently have, but this is what it would be like with the background image instead:
It would just require some background manipulation to get the image where you would like it to be.
At first, I was trying to put images in the background. But seems weird, that’s why I used the images directly on the HTML.
You marked the topic as solved, but I would like to add (for further understanding) that some people avoid using background-image for accessibility reasons. Using them may be weird at first; however, when an image is not acting in a way to further engage the user (serving no purpose other than being decorative), it is fine to use background-image.
When you insert a decorative image directly, you will want to remember to apply the necessary aria roles to avoid negatively impacting the user experience for our friends that use screenreaders. 
