SCSS

by SlurmMcKenzie

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<div id="footer">
  <div class="container">
    <h1>Blub</h1>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>    
  </div>
  <div class="container">
    <h1>Blub</h1>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>
  </div>
  <div class="container">
    <h1>Blub</h1>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>
  </div>
  <div class="container">
    <h1>Blub</h1>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a>
    <a href=""><p>Text</p></a> 
  </div>
</div>




<div id="social">

  <div class="container left">
    <p>&copy; Bunter Block</p>
  </div>
 
  <div class="container right">
    <a href=""><i class="fab fa-facebook"></i></a>
    <a href=""><i class="fab fa-twitter"></i></a>  
  </div> 

</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  font-family: Helvetica;
  
  a{
    text-decoration: none;
    color: white;
      &:hover {
         color: orange;
      }
  }
}

#footer{
  display: grid; 
  background: #20262E;
  margin: 0 auto;
  width: 80%;
  
  p{
    font-size: 15px;
  }
  @media (min-width: 1000px){
    grid-template-columns: 1fr 1fr 1fr;
  }
}


#social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #20262E;
  font-size: 20px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 80%;
  justify-items: center;
  border-top: solid #fff 1px;
  
  .container{
    width: 100%;
    align-self: center;
  }
  .left{
    font-size: 15px;
    text-align: left;
  }
  
  .right{
    text-align: right;
  }
}