<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4 Footer and Sub Navigation</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="subnavigation-container">
<div class="container">
<nav class="navbar p-a-0">
<ul class="nav navbar-nav col-subnav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="m-t-3"></div>
<footer class="mainfooter" role="contentinfo">
<div class="footer-top p-y-2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="footer-title text-xs-center">
<h4 class="p-b-1">Contact Us</h4>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Council</div>
</div>
</div><!--col-md-2-->
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social Media</div>
</div>
</div><!--col-md-2-->
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Boards and Committees</div>
</div>
</div><!--col-md-2-->
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Departments</div>
</div>
</div><!--col-md-2-->
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Staff</div>
</div>
</div><!--col-md-2-->
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Fire and Police</div>
</div>
</div><!--col-md-2-->
</div>
</div>
</div>
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Address</h4>
<address>
<ul class="list-unstyled">
<li>
City Hall<br>
212 Street<br>
Lawoma<br>
735<br>
</li>
<li>
Phone: 0
</li>
</ul>
</address>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Popular Services</h4>
<ul class="list-unstyled">
<li><a href="#"></a></li>
<li><a href="#">Payment Center</a></li>
<li><a href="#">Contact Directory</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">News and Updates</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Website Information</h4>
<ul class="list-unstyled">
<li><a href="#">Website Tutorial</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Webmaster</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Popular Departments</h4>
<ul class="list-unstyled">
<li><a href="#">Parks and Recreation</a></li>
<li><a href="#">Public Works</a></li>
<li><a href="#">Police Department</a></li>
<li><a href="#">Fire</a></li>
<li><a href="#">Mayor and City Council</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<!--Footer Bottom-->
<p class="text-xs-center">© Copyright 2016 - City of USA. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
<!-- partial -->
</body>
</html>
footer{
color: white;
}
footer a{
color: #bfffff;
}
footer a:hover{
color: white;
}
.footer-bottom{
background: #3d6277;
padding: 2em;
}
.footer-top{
background: #2d4958;
}
.footer-middle{
background: #3d6277;
padding-top: 2em;
color: white;
}
/**Sub Navigation**/
.subnavigation-container{
background: #3d6277;
}
.subnavigation .nav-link{
color: white;
font-weight: bold;
}
.subnavigation-container{
text-align: center;
}
.subnavigation-container .navbar{
display: inline-block;
margin-bottom: -6px; /* Inline-block margin offffset HACK -Gilron */
}
.col-subnav a{
padding: 1rem 1rem;
color: white;
font-weight: bold;
}
.col-subnav .active{
border-top:5px solid orange;
background: white;
color: black;
}