13-Footer Style

Key Objectives

• To start to stylize the footer section.

Overview

Simply put, we're styling the footer, making it look nice, adding key content about our site, providing any key links, adding social media items, etc.

Steps

1. There is no video for this module.

2. Do some work on styling your own footer.

3. Like the other modules, get it to a point that you like. Then, commit the code.

4. Here's the final code, change the name to your own if you use this.

   • index.html

     • <footer>

       <footer>
         <div class="container">
             <p class="float-right">
                 <a href="#">Back to top</a>
             </p>
             <p>&copy; 2018 Paul O'Connor, weekend project built for helping students &middot;
                 <p>This template is owned by &copy; Eleven Fifty Academy, but is free for you to use and make customer alterations!</p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus incidunt repellendus similique at adipisci
                     iste?
                 </p>
                 <a href="#">Privacy</a> &middot;
                 <a href="#">Terms</a>
             </p>
         </div>
       </footer>

   • _about.scss

     #about {
       /* background: $blue-green; */
       background: url('../assets/logo/blue-green-bg.jpg') no-repeat center center;
       font-size: 18px;
     }

   • _footer.scss

     /* CSS code for the Footer section. */
     footer {
       padding-top: 3rem;
       padding-bottom: 3rem;
       background-color: $gray;
       font-size: 18px;
       color: white;
     }
     
     footer p {
       margin-bottom: .25rem;
     }