footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>%title%</title>
    <style>
   footer{
    background-color: grey;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    padding-top: 5px;
   }
   footer .social {
    display: inline-flex;
    margin-left: 28px;
   }
   h1 {
    font-size: 24px;
    color: white;
   }
   p {
    font-size: 18px;
    color: white;
    padding-left: 370px;
   }
   .social_media {
    list-style: none;
    display: inline-flex;
    padding-left: 340px;

   }
   .fa {
    font-size: 25px;
    margin: 10px;
    color: white;
   }
    </style>
</head>
<body>
    <footer>
        <div class="social">
            <h1>DOCUFIX</h1>
            <p>Copyright 2019 Docufix.io and HNG6 affiliates</p>
            <div>
                <ul class="social_media">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                </ul>
            </div>
        </div> 
    </footer>
</body>
</html>