Footers

The footer should contain these major components:

 

ornl updated footer

Resources

Code



<div class="branding-sponsor">
    <p>Oak Ridge National Laboratory is managed by UT-Battelle LLC for the US Department of Energy</p>
</div>
<div id="footer-area">
    <footer class="site-footer" role="contentinfo">
        <div class="site-info container">
            <div class="row">
                <div class="col-md-3">
                    <a href="https://ut-battelle.org"><img class="img-responsive" src="https://standards.ornl.gov/wp-content/uploads/2017/10/ut-battelle.png"></a>
                </div>
                <div class="col-md-6 mandatory-links">
                    <a href="https://www.ornl.gov/ornl/contact-us/Security--Privacy-Notice">Privacy</a> | <a href="https://www.ornl.gov/content/accessibility">Accessibility/508</a> | <a href="https://www.ornl.gov/content/notice-nondiscrimination-and-accessibility-requirements">Nondiscrimination/1557</a>
                </div>
                <div class="col-md-3">
                    <a href="https://www.energy.gov/science/office-science"><img class="img-responsive" src="https://standards.ornl.gov/wp-content/uploads/2017/10/doe-science.png"></a>
                </div>
            </div>
        </div>
    </footer>
</div>


CSS

  
#footer-area {
    background-color: #313233;
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    font-size: 16px;
    line-height: 1.7;
}

#footer-area a {
    color: #2db50e;
    cursor: pointer;
    text-decoration: none;
}

#footer-area p {
    margin: 0 0 10px;
}

#footer-area a:focus,
#footer-area a:hover {
    color: #247751;
    text-decoration: underline;
}

.branding-sponsor {
    background: #333;
    color: #c4c4c4;
    margin: 0px;
    padding: 8px 0px 1px 0px;
    text-align: center;
}

#footer-area .mandatory-links {
    text-align: center;
    font-size: 16px;
    padding-top: 10px;
}

#footer-area .site-footer {
    background-color: #ebebeb;
    padding: 10px 0;
}

#footer-area .site-footer:after,
#footer-area .container:after {
    content: '';
    display: table;
}

#footer-area .site-info {
    padding: 30px 20px;
    font-size: 12px;
}

#footer-area .container {
    width: 1170px;
    margin-right: auto;
    margin-left: auto
}

#footer-area .row {
    margin-right: -15px;
    margin-left: -15px;
}

#footer-area .col-md-3 {
    width: 25%;
}

#footer-area .col-md-6 {
    width: 50%;
}

#footer-area .col-md-3,
#footer-area .col-md-6 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

#footer-area .img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

@media (min-width: 768px) {
  #footer-area .col-sm-3, #footer-area .col-sm-6 {
    float: none;
  }
  #footer-area .col-sm-3, #footer-area .col-sm-6 {
    width: 10%;
  }
}