Footer Element


Introduction:

Footers are used for a secondary source of navigation for users. It acts as a site map for the website. they also hold any important infomation and social media links, the social media links can often change depending on the type of site, this is imortand and to do this you must link to the icon libary used:

Usage:

The footer should be used consistently at the bottom of each page as a secondary source of navigation, this is an important feature and should be include in each page keeping the design consistent throughout.


Footer Component:

                <div id="Footer">
                    <ul class="FooterMenu">
                        <li> Portfolio </li>
                        <li> About </li>
                        <li> Photography </li>
                        <li>Contact Info </li>
                    </ul>
                    
                    <div class="Social">
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-twitter"></a>
                        <a href="#" class="fa fa-instagram"></a>
                    </div>
                </div>
                
                    #Footer{
                        background: linear-gradient(133deg, #800040 0%,   #C04848 100%);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 90%;
                        height: 80px;
                        padding: 30px;
                            }

                    .FooterMenu li{

                        text-transform: uppercase;
                        color: white;
                        font-weight: 400;
                        display: inline-block;
                        margin-left: 20px;
                        margin-top: 10px;
                        padding: 15px;
                            }

                    .FooterMenu li:hover{

                        text-transform: uppercase;
                        color: black;
                        font-weight: 400;
                        display: inline-block;
                        margin-left: 20px;
                        margin-top: 10px;
                        padding: 15px;
                        background-color: white;
                        opacity: 0.5;
                        border-radius: 15px;
                                        }

                    .fa {
                        padding: 40px;
                        font-size: 30px;
                        width: 10px;
                        height: 10px;
                        text-align: center;
                        text-decoration: none;
                        margin: 10px 10px;
                        border-radius: 50%;
                            }

                    .fa:hover {
                        opacity: 0.7;
                            }

                    .fa-facebook {
                      background: #3B5998;
                      color: white;
                                }

                    .fa-twitter {
                      background: #55ACEE;
                      color: white;
                                }
                    .fa-instagram {
                      background: #125688;
                      color: white;
                                    }