Preview

Footer must be included on all pages created using this design system. It includes a navigation menu and allows users to navigate to different pages of the website. It also include social media icons that link to social media pages.

Code

                        
                            <footer class="color-dark-hover text-light py-5">
                            	<div class="container">
                            		<div class="row text-center">
                            			<div class="col-12 col-lg-8">
                            				<nav class="text-center text-lg-left">
                            					<ul class="p-0">
                            						<li class="d-block d-lg-inline p-1">
                            							<a href="#">
                            								<img src="../img/ColorReverse.png" width="64" alt="Logo">
                            							</a></li>
                            						<li class="d-block d-lg-inline p-1">
                            							<a href="#">Home</a>
                            						</li>
                            						<li class="d-block d-lg-inline p-1">
                            							<a href="#">Portfolio</a>
                            						</li>
                            						<li class="d-block d-lg-inline p-1">
                            							<a href="#">Resume</a>
                            						</li>
                            						<li class="d-block d-lg-inline p-1">
                            							<a href="#">Contact</a>
                            						</li>
                            					</ul>
                            				</nav>
                            			</div>
                            			<div class="col-12 col-lg-4 text-lg-right">
                            				<a class="d-inline pr-1" href="#">
                            					<img src="../img/linkedin.png" width="24" alt="LinkedIn">
                            				</a>
                            				<a class="d-inline" href="#">
                            					<img src="../img/github.png" width="24" alt="Github">
                            				</a>
                            			</div>
                            		</div>
                            		<div class="row text-center pt-4">
                            			<div class="col-12">
                            				<span>©
                            						<script>document.write(new Date().getUTCFullYear());</script>
                            					Anh Bien. All rights reserved.
                            				</span>
                            			</div>
                            		</div>
                            	</div>
                            </footer>
                        
                    

Accessibility

Ensure the logo and social media icons have alt-text.

Ensure the social media icons have title.