index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                        <!-- ICONS -->
  <script src="https://kit.fontawesome.com/11614eb144.js" crossorigin="anonymous"></script>
                                                        <!-- FONT FAMILY -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
                                                        <!-- LINK CSS -->
  <link rel="stylesheet" href="./style.css">
  <title>Frontend Mentor | Huddle landing page with single introductory section</title>
</head>

<body>
  <header class="header">
    <img src="/assets/images/logo.svg" alt="logo" class="logo">
  </header>
  <main class="main">
    <img src="/assets/images/illustration-mockups.svg" alt="ilustrator" class="banner">
    <article class="article">
      <h1 class="title">View the optimal layout for the page</h1>
      <p class="text">Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your
        project, right-click the page and select "Take a Screenshot".</p>
      <a href="" class="button">Register</a>
    </article>
  </main>
  <footer class="footer">
    <ul class="social">
      <li class="social___items">
        <a href="#" class="social-link__icon"><i class="fa fa-facebook social__icon"></i>
        </a>
      </li>
      <li class="social___items">
        <a href="#" class="social-link__icon"><i class="fa fa-twitter social__icon"></i>
        </a>
      </li>
      <li class="social___items">
        <a href="#" class="social-link__icon"><i class="fa fa-instagram social__icon"></i>
        </a>
      </li>
    </ul>
  </footer>


</body>

</html>