Ping Coming Soon using HTML, CSS, Javascript

Hi Fazza, Your solution looks great! I hope the following suggestion help! Please look into refactoring the following code:

 <section class="copyright">
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-twitter"></a>
        <a href="#" class="fa fa-instagram"></a>
        <br />
        <small>© Copyright Ping. All rights reserved.</small>
</section>

Instead of the above, use <ul> elements, as follows:

 <section class="copyright">
    <ul>
       <li><a href="#" class="fa fa-facebook"></a></li>
       <li><a href="#" class="fa fa-twitter"></a></li>
       <li> <a href="#" class="fa fa-instagram"></a></li>
     </ul>
     <span>© Copyright Ping. All rights reserved.</span>
</section>

Try and don't use <small> if you're trying to achieve the text to appear smaller instead style your elements using <span> for decorative purposes.

Also,

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;  /* WHY DON'T YOU JUST ADD ---border-box--- here? */
}

Also, add the following code to your HTML <div role="main" class="main-container"> to the opening tag of your main-container class. You can check the generated report and fix the accessibility issues too. MDN article on WAI-ARIA.

Best of luck on your coding journey!

Looks really good the only thing it looks like you are missing are the circles around your social icons