Footer
For consistency, footers should be used at the bottom of every website across Calgary.ca. Footers can also be used for other web applications associated with The City of Calgary. Extra links required by the site can be added to each footer. The footer is fully responsive and can be tested by changing the browser window width.
To enable the Foresee feedback button, contact measurements@calgary.ca to ask for a FSFB code.
Footer with Google Translate and Foresee feedback
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div id="google_translate_element" class="cui footer-section">
<div class="skiptranslate goog-te-gadget" dir="ltr">
<div id=":0.targetLanguage" class="targetLanguage">
<label for="translate-language">Select language</label>
<select class="goog-te-combo" id="translate-language" name="translate-language">
<option value="">Select Language</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
</select>
</div>
Powered by <span><a class="goog-logo-link" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" alt="Google">Translate</a></span>
</div>
</div>
<div class="footer-links-vert footer-section row">
<div class="col-md-6">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-6 col-md-6">
<h2 class="h3">Quick links</h2>
<ul>
<li><a href="http://www.calgary.ca/General/Pages/eServices.aspx">eServices</a></li>
<li><a href="http://www.calgary.ca/General/Pages/Contact-Us.aspx">Contact Us</a></li>
</ul>
</div>
<div class="col-6 col-md-6">
<h2 class="h3">Login</h2>
<ul>
<li><a href="http://www.calgary.ca/cfod/it/pages/employee-portal.aspx">Employee Portal</a></li>
<li><a href="http://www.calgary.ca/cfod/it/Pages/myID-registration-instructions.aspx">myID</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="h3">Social</h2>
<ul class="two-col-xs">
<li><a href="https://twitter.com/cityofcalgary" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/TheCityofCalgary" target="_blank">Facebook</a></li>
<li><a href="https://www.youtube.com/c/thecityofcalgary" target="_blank">YouTube</a></li>
<li><a href="https://www.linkedin.com/company/city-of-calgary" target="_blank">Linkedin</a></li>
<li><a href="https://www.instagram.com/cityofcalgary/" target="_blank">Instagram</a></li>
<li><a href="https://www.flickr.com/photos/cityofcalgary/" target="_blank">Flickr</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feedback">
<div class="row">
<div class="col-lg-7">
<p>Tell us how to make this page better.</p>
<p>This should only take a minute.</p>
</div>
<div class="col-lg-5">
<button class="cui btn-md primary">Give feedback</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer-links-horz footer-section">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Search Tips</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>© 2018. All rights reserved. Official web site of The City of Calgary, located in Calgary, Alberta, Canada.</p>
</div>
</div>
</footer>
Footer without Google Translate and Foresee feedback
Code
<footer class="cui coc-footer">
<div class="footer-inner">
<div class="footer-links-vert footer-section row">
<div class="col-md-8">
<div class="row">
<div class="col-6 col-md-6">
<h2 class="h3">Quick links</h2>
<ul>
<li><a href="http://www.calgary.ca/General/Pages/eServices.aspx">eServices</a></li>
<li><a href="http://www.calgary.ca/General/Pages/Contact-Us.aspx">Contact Us</a></li>
</ul>
</div>
<div class="col-6 col-md-6">
<h2 class="h3">Login</h2>
<ul>
<li><a href="http://www.calgary.ca/cfod/it/pages/employee-portal.aspx">Employee Portal</a></li>
<li><a href="http://www.calgary.ca/cfod/it/Pages/myID-registration-instructions.aspx">myID</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="h3">Social</h2>
<ul class="two-col-xs">
<li><a href="https://twitter.com/cityofcalgary" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/TheCityofCalgary" target="_blank">Facebook</a></li>
<li><a href="https://www.youtube.com/c/thecityofcalgary" target="_blank">YouTube</a></li>
<li><a href="https://www.linkedin.com/company/city-of-calgary" target="_blank">Linkedin</a></li>
<li><a href="https://www.instagram.com/cityofcalgary/" target="_blank">Instagram</a></li>
<li><a href="https://www.flickr.com/photos/cityofcalgary/" target="_blank">Flickr</a></li>
</ul>
</div>
</div>
<div class="footer-links-horz footer-section">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Search Tips</a></li>
</ul>
</div>
<div class="footer-copyright">
<p>© 2018. All rights reserved. Official web site of The City of Calgary, located in Calgary, Alberta, Canada.</p>
</div>
</div>
</footer>