Social links

Font Awesome sandbox

by stweffy_88

HTML

<!DOCTYPE html>

<html>

  <head>
    <link href="https://fonts.googleapis.com/css2?family=Grandstander&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://kit.fontawesome.com/1cf9df4ebf.js" crossorigin="anonymous"></script>

    <title>Social links</title>
  </head>

  <body>
    <h1>Follow Me</h1>
    <div class="social">
      <a href="https://dev.to/stweffy_88" target="_blank">
        <div class="icon">
          <div class="fa-brands fa-dev"><span>DEV Community</span></div>
        </div>
      </a>

      <a href="https://www.freecodecamp.org/stweffy_88" target="_blank">
        <div class="icon">
          <div class="fa-brands fa-free-code-camp"><span>freeCodeCamp</span></div>
        </div>
      </a>

      <a href="https://github.com/stweffy88" target="_blank">
        <div class="icon">

          <div class="fa-brands fa-github"><span>GitHub</span></div>
        </div>
      </a>
      <a href="https://www.linkedin.com/in/stephanie-poon-11579ba8" target="_blank">
        <div class="icon">

          <div class="fa-brands fa-linkedin"><span>LinkedIn</span></div>
        </div>
      </a>
      <div class="icon">
        <a href="https://www.sololearn.com/Profile/25656677" target="_blank">
            <img alt="SoloLearn" src="https://www.sololearn.com/Uploads/icons/sololearn.png"><span>Sololearn</span>
        </a>
        <a href="https://twitter.com/stweffy_88" target="_blank">
        <div class="icon">
            <div class="fa-brands fa-twitter"><span>Twitter</span></div>
            </div>
        </a>
      </div>
  </body>

</html>

CSS

h1 {
  font-family: "Grandstander";
}

a {
  text-decoration: none;
}


.social {
  font-size: 18px;
}


span {
  font-family: Arial;
  padding-left: 10px;
}

img {
  height: 25px;
  width: 25px;
  margin-left: -5px;
}


.icon {
  padding-top: 5px;
}