[Answered ]-How can I add a footer at the end of this website?

To set the footer to the bottom of the page, you need to use this CSS:

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf; /* Set your own background */
}

If you want it to stay at the bottom of the page and stretch along the bottom, I’d do something like this with the CSS

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: (whatever you want);
color: (color of the text, whatever you want);
text-align: center; /*unless you want the text aligned differently*/
}

Also look up how to use the grid-container if you want the items of the footer in rows like the example you gave.

You need the footer tag to do its job!

Read more about the footer tag here:
https://www.geeksforgeeks.org/html5-footer-tag/

Reference: https://code-boxx.com/keep-html-footers-at-bottom/

The easy ways to keep a footer at the bottom with modern CSS are:

1. Use footer { position: fixed} or footer { position: sticky } to
   keep the at the bottom.

2. Use a flexbox layout that "stretches" the body section, keep the
   footer at the bottom.

   body{ display: flex; flex-direction: column; }

   main{ flex-grow: 1; }

3. Lastly, use a grid layout to achieve the same "stretch body
   section".

   <header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>

   html, body { height: 100%;}

   body { disply: grid; grid-template-rows: auto 1fr auto; }