Footer

Description

The footer is used to help users know who has created the website and when it was last update. It also provides contact and social media information of the portfolio creator. No matter the size of device, the copyright and date last updated is on the left and the contact and social media icons are on the right. The height at all screen sizes is 75px. Icons were colored with secondary-dark-red for the mail icon and primary-dark-blue for the linkedin icon. The icons are from box icons.

Usage

This should be used on every page right at the bottom. When the user hovers over each icon, the background color should change to secondary-light-red for the mail icon and primary-light-blue for the linkedin icon. In addition, a secondary-dark-red border should appear around the mail icon and a primary-dark-blue border should appear around the linkedin icon. The mail icon should have a properly working mailto, while the linkedin icon should open the linkedin page in a new tab using target="_blank". Examples can be seen from the footer on this page.

Accessibility

The footer semantic tag and alt tags for the icons should be used for optimal accessibility.

Examples

Desktop

For large and extra-large screen sizes like those on a desktop or laptop:

Tablet

For small and medium screen sizes like those on a tablet:

Mobile

For extra small screen sizes like those on a mobile phone:

Code


                        
            <footer id="footer">
                <div class="container footer-container">
                    <div class="row align-items-center footer-div">
                        <div class="col-9">
                            <p class="my-0">© Melissa Boyce | Updated November 2020</p>
                        </div>
                        <div class="col-3 text-right">

                            <a class="d-inline-block mr-2 bor-red-hover back-light-red-hover" 
                            href="mailto:example@gmail.com">
                            <img class="d-inline" src="red-email-icon" 
                            alt="email me" /></a>

                            <a class="d-inline-block bor-blue-hover back-light-blue-hover" 
                            href="https://www.linkedin.com/in/example" target="_blank">
                            <img class="d-inline" src="blue-linkedin-icon" 
                            alt="check out my linkedin" /></a>

                        </div>
                    </div>
                </div>
            </footer>