<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:
[email protected]">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>