Footer Link Navigation

Developer
Tim Normington
Size
2,196 Kb
Views
12,144
  1. Footer Link Navigation Previews
  2. Footer Link Navigation HTML Codes
  3. Footer Link Navigation CSS Codes

How do I make an footer link navigation?

Using Font Awesome to make some nice responsive footer link navigation.. What is a footer link navigation? How do you make a footer link navigation? This script and codes were developed by Tim Normington on 05 December 2022, Monday.

Footer Link Navigation Previews
IQ Test

Footer Link Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Footer Link Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600|Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<footer> <div class="social"> <h3>Social Links</h3> <div class="social-list"> <button class="social-btn" href="#"> <i class="fa fa-linkedin-square fa-4x"></i> <p>LinkedIn</p> </button> <button class="social-btn" href="#"> <i class="fa fa-google-plus-square fa-4x"></i> <p>Google+</p> </button> <button class="social-btn" href="#"> <i class="fa fa-behance-square fa-4x"></i> <p>Behance</p> </button> <button class="social-btn" href="#"> <i class="fa fa-git-square fa-4x"></i> <p>Git</p> </button> <button class="social-btn" href="#"> <i class="fa fa-twitter-square fa-4x"></i> <p>Twitter</p> </button> <button class="social-btn" href="#"> <i class="fa fa-vimeo-square fa-4x"></i> <p>Vimeo</p> </button> <button class="social-btn" href="#"> <i class="fa fa-youtube-square fa-4x"></i> <p>Youtube</p> </button> <button class="social-btn" href="#"> <i class="fa fa-instagram fa-4x"></i> <p>Instagram</p> </button> </div> </div> <div class="contact"> <h3>Contact Me</h3> <div class="social-list"> <button class="social-btn" href="#"> <i class="fa fa-envelope-square fa-4x"></i> <p>Email</p> </button> <button class="social-btn" href="#"> <i class="fa fa-skype fa-4x"></i> <p>Skype</p> </button> <button class="social-btn" href="#"> <i class="fa fa-ra fa-3x"></i> <p>The Force</p> </button> </div>
</footer>
</body>
</html>

Footer Link Navigation - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
footer { display: flex; justify-content: center; flex-direction: column;
}
.contact { width: 300px; margin: auto;
}
.social { max-width: 300px; margin: auto;
}
.social-list { max-width: 300px; justify-content: center; display: flex; flex-wrap: wrap;
}
.social h3, .contact h3 { font-family: 'Open Sans', Sans Serif; box-sizing: border-box; width: 100%; text-align: center; background-color: #34495e; background-image: url(http://www.transparenttextures.com/patterns/escheresque.png); border-radius: 5px; padding: 10px; margin: 0 0 5px 0; color: #fff;
}
.social-btn { text-align: center; border: none; color: #bdc3c7; width: 60px; height: 80px; background-color: #fff; border-radius: 10px; box-sizing: border-box; transition: all .3s ease-out; padding: 0 3px 5px 3px; margin: 5px 5px 5px 5px; font-family: 'Roboto Condensed', Sans Serif;
}
.social-btn:hover { color: #34495e; -webkit-filter: drop-shadow(0 0 2px #34495e);
}
.social-btn:focus { outline: 0;
}
Footer Link Navigation - Script Codes
Footer Link Navigation - Script Codes
Home Page Home
Developer Tim Normington
Username tnormington
Uploaded December 05, 2022
Rating 3
Size 2,196 Kb
Views 12,144
Do you need developer help for Footer Link Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Normington (tnormington) Script Codes
Name
Twitch Notification Concept
Expanding Circle Menu
Loading Bar Animation
A Pen by Tim Normington
Online Banking Interface
Color Picker
Mobile Drop Down
Modular Sassy Flex Navigation
JQuery Social Media Ribbon Links
Tri-column slanted hero with hover effect
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!