Footer Styling 1

Let's begin styling 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 style for the footer is not overly complex.

This is because it serves to provide information succinctly, so it is better to keep the style 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, a footer is a section separate from the main content of a webpage that conveys information, hence it's advisable to set the background color in contrast to the one used previously.

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

Using a flex container is to enable the following properties:

• flex-direction: column; is used to arrange the contents inside the footer vertically.

• align-items: center; is used to horizontally center the contents of the footer.

• justify-content: center; is used to vertically center the contents of the footer.

By applying these properties, the contents of the footer are stacked vertically while being centered both horizontally and vertically.