Footer Design Website Layout

Complete a website layout with the following components positioned correctly.

Components:

• header
• main
• footer
• Copyright text
• Social media icons (Facebook, Twitter, Instagram)
• "Back to Top" link

Requirements:

• The footer must use a dark background color #222222.
• The footer must have a fixed height of 80px.
• All text inside the footer must be light green #1ba94c.
• The three footer sub-blocks (copyright / social icons / back-to-top) must sit on a single row.
• Social media icons must render at 24px size.
• The main element must be 1000px tall so the page is scrollable.
• The markup is already provided. You must only modify src/css/style.css.

Provided markup (read-only src/index.html):

<!DOCTYPE html>
<html>
<head>
 <title>Footer Design Website Layout</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
 <h8k-navbar header="Footer Design Website Layout"></h8k-navbar>

 <main>
 <h1>Home page</h1>
 </main>

 <footer class="footer">
 <div class="copyright"> 2024 Your Company Name</div>
 <div class="social-icons">
 <i class="fab fa-facebook"></i>
 <i class="fab fa-twitter"></i>
 <i class="fab fa-instagram"></i>
 </div>
 <a href="#top" class="back-to-top">Back to Top</a>
 </footer>

 <script src="./bundle.js"></script>
</body>
</html>