The footer should contain these major components:
- The UT-Battelle and Department of Energy logos,
- A link to ORNL’s Privacy Notice,
- A link to the Notice of Nondiscrimination and Accessibility Requirements,
- A link to ORNL’s Accessibility statement, and
- ORNL’s attribution statement: “Oak Ridge National Laboratory is managed by UT-Battelle for the US Department of Energy.” We recommend placing this just above the actual 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%;
}
}