"Footer 1"
Bootstrap 3.3.0 Snippet by workstation247

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> .footer-distributed{ background-color: #000033; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: left; font: bold 16px sans-serif; padding: 55px 50px; margin-top: 80px; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: inline-block; vertical-align: top; } /* Footer left */ .footer-distributed .footer-left{ width: 30%; } /* The company logo */ .footer-distributed h3{ color: #ffffff; font: normal 36px 'Cookie', cursive; margin: 0; } .footer-distributed h3 span{ color: #ffffff; } /* Footer links */ .footer-distributed .footer-links{ color: #ffffff; margin: 20px 0 12px; padding: 0; } .footer-distributed .footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; } .footer-distributed .footer-company-name{ color: #8f9296; font-size: 14px; font-weight: normal; margin: 0; } /* Footer Center */ .footer-distributed .footer-center{ width: 45%; } .footer-distributed .footer-center i{ background-color: #33383b; color: #ffffff; font-size: 25px; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 42px; margin: 10px 15px; vertical-align: middle; } .footer-distributed .footer-center i.fa-envelope{ font-size: 17px; line-height: 38px; } .footer-distributed .footer-center p{ display: inline-block; color: #ffffff; vertical-align: middle; margin:0; } .footer-distributed .footer-center p span{ display:block; font-weight: normal; font-size:14px; line-height:2; } .footer-distributed .footer-center p a{ color: #5383d3; text-decoration: none;; } /* Footer Right */ .footer-distributed .footer-right{ width: 20%; } .footer-distributed .footer-company-about{ line-height: 20px; color: #000000; font-size: 13px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-about span{ display: block; color: #000000; font-size: 14px; font-weight: bold; margin-bottom: 20px; } .footer-distributed .footer-icons{ margin-top: 25px; } .footer-distributed .footer-icons a{ display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-right: 3px; margin-bottom: 5px; } /* If you don't want the footer to be responsive, remove these media queries */ @media (max-width: 880px) { .footer-distributed{ font: bold 14px sans-serif; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: block; width: 100%; margin-bottom: 40px; text-align: center; } .footer-distributed .footer-center i{ margin-left: 0; } } </style> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="footer, address, phone, icons" /> <title>State College of Florida Libraries</title> <link rel="stylesheet" href="css/demo.css"> <link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> </head> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="footer, address, phone, icons" /> <title>State College of Florida Libraries </title> <link rel="stylesheet" href="css/demo.css"> <link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> </head> <!-- The content of your page would go here. --> <footer class="footer-distributed"> <div class="footer-left"> <div class="row"><span class="hidden-xs"> <h3><span></span><a href="http://scf.edu/library"> <img src="http://lgimages.s3.amazonaws.com/data/imagemanager/22114/scf_libraries180x70.jpg"</span></h3></a> <p class="footer-links"> <a href="http://discover.linccweb.org/primo_library/libweb/action/myAccountMenu.do?vid=FLCC1500">Your Account</a><p></p> · <a href="http://www.libsurveys.com/loader.php?id=117">Feedback</a><p></p> · <a href="http://www.linccweb.org/Linking.aspx">LINCCweb Links</a><p></p> · <a href="mailto:LibrarySuggestionBox@scf.edu">Suggestion Box</a><p></p> · <a href="http://libguides.scf.edu/c.php?g=119436&p=779092">Image Attribution</a> </p> </span> </div> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p><span>Hours: <a href="http://libguides.scf.edu/c.php?g=102813&p=710449">Bradenton</a> | <a href="http://libguides.scf.edu/c.php?g=102813&p=710461">Venice</a> | <a href="http://libguides.scf.edu/c.php?g=102813&p=710462">Lakewood Ranch</a> </span> <a href="http://www.scf.edu/AboutSCF/Locations/default.asp">Maps</a></p> </div> <div> <i class="fa fa-phone"></i> <p><span>Bradenton Library : 941-752-5305</span><br> </div> <div> <i class="fa fa-phone"></i> <p><span>Venice Library : 941-408-1435</span></br> </div> <div> <i class="fa fa-phone"></i> <p><span>Lakewood Ranch : 941- 363-7250</span></p> </div> <div> <i class="fa fa-mobile"></i> <p><span>Text: (941) 270-9643 | Twitter: @SCFLibraries</span></p> </div> <div> <i class="fa fa-envelope"></i> <p><a href="http://www.askalibrarian.org/vrl_intro.php?library=FLCC1500">Ask A Librarian</a></p> </div> </div> <div class="footer-right"> <p class="footer-company-about"> </br> </br> </br> <div class="row"><span class="hidden-xs"> <span><h3>Our Mission Statement:</span></h3><p></p> <h4><font color="white">The State College of Florida Libraries Engage Students, Faculty, Staff, and Community Members in the Discovery and Creation of Knowledge. </p> </div> </span> <div class="footer-icons"> <a href="https://www.facebook.com/statecollegeoffloridalibraries/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="https://twitter.com/scflibraries" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://www.instagram.com/scf_libraries/" target="_blank"><i class="fa fa-instagram"></i></a> <a href="https://www.pinterest.com/scflibraries/" target="_blank"><i class="fa fa-pinterest-square"></i></a> <a href="https://www.linkedin.com/in/state-college-of-florida-libraries-a3a91a111" target="_blank"><i class="fa fa-linkedin"></i></a> <a href-"https://www.youtube.com/user/SCFLibrary" target="_blank" > <i class="fa fa-youtube"></i></a> </br> </br State College of Florida Libraries © 2016</h4></font> </li></li></li></li> </li></li> </li></li> <div><div><div> </div> </div> </footer> </body> </html>
<style> .footer-distributed{ background-color: #292c2f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: left; font: bold 16px sans-serif; padding: 35px 30px; margin-top: 10px; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: inline-block; vertical-align: top; } /* Footer left */ .footer-distributed .footer-left{ width: 30%; } /* The company logo */ .footer-distributed h3{ color: #ffffff; font: normal 36px 'Cookie', cursive; margin: 0; } .footer-distributed h3 span{ color: #5383d3; } /* Footer links */ .footer-distributed .footer-links{ color: #ffffff; margin: 20px 0 12px; padding: 0; } .footer-distributed .footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; } .footer-distributed .footer-company-name{ color: #8f9296; font-size: 14px; font-weight: normal; margin: 0; } /* Footer Center */ .footer-distributed .footer-center{ width: 35%; } .footer-distributed .footer-center i{ background-color: #33383b; color: #ffffff; font-size: 25px; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 42px; margin: 10px 15px; vertical-align: middle; } .footer-distributed .footer-center i.fa-envelope{ font-size: 17px; line-height: 38px; } .footer-distributed .footer-center p{ display: inline-block; color: #ffffff; vertical-align: middle; margin:0; } .footer-distributed .footer-center p span{ display:block; font-weight: normal; font-size:14px; line-height:2; } .footer-distributed .footer-center p a{ color: #5383d3; text-decoration: none;; } /* Footer Right */ .footer-distributed .footer-right{ width: 20%; } .footer-distributed .footer-company-about{ line-height: 20px; color: #92999f; font-size: 13px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-about span{ display: block; color: #ffffff; font-size: 14px; font-weight: bold; margin-bottom: 20px; } .footer-distributed .footer-icons{ margin-top: 35px; } .footer-distributed .footer-icons a{ display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-right: 3px; margin-bottom: 5px; } /* If you don't want the footer to be responsive, remove these media queries */ @media (max-width: 880px) { .footer-distributed{ font: bold 14px sans-serif; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: block; width: 100%; margin-bottom: 10px; text-align: center; } .footer-distributed .footer-center i{ margin-left: 0; } } </style>

Related: See More


Questions / Comments: