title: separate footer to three columns
body: <p>I am trying to make my footer divided into three columns in one row. The left will be my Copyright; Middle will be social media; right will be my contact.</p>
  
  <p>I've been trying and reading and watching so many stuff and I'm finding it really difficult to get done. Could someone help me out please - I'll post my codes below.</p>
  
  <p>It would be very much appreciated if you could also explain what you have done so I can learn for future references. Please use simple terms... as you can see I am very much a beginner haha.</p>
  
  <p>Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin: 0;
      border: 0;
      padding: 0;
  }
  
  /* Slideshow */
  .section1{
      background: url(files/home-slideshow-001.jpeg);
      height: 90vh;
      background-size: cover;
  }
  #overlay{
      font-family: Oswald;
      text-transform: uppercase;
      font-size: 3vw;
      font-weight: 700;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  /* End Slideshow */
  
  /* Footer */
  footer{
      background: #111111;
      height: 10vh;
  }
  .copyright, p{
      color: whitesmoke;
  }
  
  .contact{
      color: whitesmoke;
  }
  
  a{
      text-decoration: none;
      color: whitesmoke;
  }
  /* End Footer */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Home - Motive Media Productions&lt;/title&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="section1"&gt;
              &lt;div id="overlay"&gt;
                  &lt;h1&gt;Text&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;footer&gt;
          &lt;div class="copyright"&gt;
              &lt;p&gt;&amp;copy; 2018&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="brands"&gt;
              &lt;div class="social-media"&gt;
                      &lt;a href="http://www.facebook.com/" target="_blank"&gt;
                          &lt;img src="files/facebook.png"&gt;&lt;/a&gt;
                      &lt;a href="http://www.instagram.com/" target="_blank"&gt;
                          &lt;img src="files/instagram.png"&gt;&lt;/a&gt;
                      &lt;a href="http://www.twitter.com/" target="_blank"&gt;
                          &lt;img src="files/twitter.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="contact"&gt;
              &lt;li class="contact-list"&gt;
                  &lt;a href="00"&gt;00&lt;/a&gt;
              &lt;/li&gt;
              &lt;br&gt;
              &lt;li class="contact-list"&gt;
                  &lt;a href="mailto:hi@hi.com"&gt;hi@hi.com&lt;/a&gt;
              &lt;/li&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>