Integrate a footer

HTML & CSS
1

Good morning,
I would like to add a footer with several links and 3 social network icons

Can you help me ?

thank you

https://codepen.io/hellodevyt/pen/VwRarJO

2

This would be coded in much the same way as you have done the header. Though I notice your header menu has no anchor links which will need adding.
The specifics on exactly how to do it will depend on the design and content you intend on.

On a side note regarding the semantics of your HTML. Your background text is using multiple h1 elements to create the background decoration. While it is now valid to have multiple h1s in a page, it’s not valid semantics to use them in this way, as a decorative feature. This would probably be better handled with CSS with the content property or have the word as an SVG used in a repeating background.

2 Likes
3

I tried to integrate a footer into my page, the problem is that my contact menu is shifted and I can’t find the problem?

https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO

Can you help me write my footer better?

Thank you for your help

4

In your footer you have some lists and you have styled those lists without any context.

e.g.


ul li:not(:last-child) {
    margin-bottom: 8px;
}

That style will affect all lists in your whole document and it is that specific rule that pushes the contact text downwards in your menu.

You need to style the lists in the footer by their context or add a class. Always avoid styling elements globally apart from a few reset styles.

e.g. You should style the uls in the footer via the footer-col class.

.footer-col ul li:not(:last-child) {
    margin-bottom: 8px;
}
.footer-col ul li a {
etc...
}

Do that for any other rules in the footer (or indeed elsewhere in your document).

1 Like
5

Great, it works now.

It’s not easy to integrate the css.

Many thanks for your help.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.