Footer Styling 1

Let's style the footer using CSS.

Copy
#footer {
    background: #111111;
}

#footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

#footer a {
    font-size: 14px;
    color: #fff;
}

#footer a:hover {
    opacity: 0.6;
}

#footer .social {
    margin-top: 16px;
}

#footer .social img {
    width: 20px;
    height: 20px;
}

#footer .social a {
    margin: 0 8px;
}

#footer p {
    font-size: 14px;
}

The footer styling is not overly complex.

This is because it serves the purpose of providing concise information, so it is best to keep the styling simple.

Copy
#footer {
    background: #111111;
}

#footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

First, the background color of the footer is set to black.

Typically, the footer is a section that delivers information separated from the main content of the webpage, so it is a good idea to use a background color that contrasts with the rest of the page's background.

The footer container uses the display: flex; property to make it a flex container.

This is done to utilize the following properties:

• The flex-direction: column; property to arrange the content within the footer in a vertical layout.

• The align-items: center; property to horizontally center the content within the footer.

• The justify-content: center; property to vertically center the content within the footer.

By using these properties, we can stack the content in the footer vertically while also centering it both horizontally and vertically.