Page Footer
This section explains how the global ImmobilienScout24 page footer is set up.
Note: Be sure to implement the footer markup via a content snippet from the CMS to make sure that you receive important content updates automatically.
Full Footer
The basic structure of the footer is defined by the page-footer and
page-footer__copyright classes.
Everything else is made up of regular building blocks (the grid, link icons, font sizes, etc.).
The page-footer__accessibility class hides content from view for aesthetical reasons
but keeps it accessible to screen readers and the like.
<footer class="page-footer font-s">
<div class="content-wrapper">
<h1 class="page-footer__accessibility">Site Information</h1>
<div class="padding-vertical-xxl">
<div class="grid gutter margin-bottom-xxl">
<div class="grid-item palm-one-whole lap-one-half desk-one-half">
<section>
<h2 class="font-s font-lightgray">ImmobilienScout24</h2>
<div class="grid gutter">
<div class="grid-item one-third">
<ul class="list-spacing-xs icon-arrow">
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Hilfe</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Developer</a></li>
<li><a href="#">Presseservice</a></li>
</ul>
</div>
<div class="grid-item two-thirds">
<ul class="list-spacing-xs icon-arrow">
<li><a href="#">Impressum</a></li>
<li><a href="#">AGB & Rechtliche Hinweise</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Nutzungsbasierte Online-Werbung</a></li>
<li><a href="#">Datenschutz-Kodex für Geodatendienste</a></li>
</ul>
</div>
</div>
</section>
</div>
<div class="grid-item palm-one-half lap-one-fourth desk-one-fourth">
<section>
<h2 class="font-s font-lightgray">International</h2>
<ul class="list-spacing-xs icon-arrow">
<li><a href="#">www.immobilienscout24.at</a></li>
<li><a href="#">www.immoscout24.ch</a></li>
<li><a href="#">propertyguru.com.sg</a></li>
<li><a href="#">propertyguru.com.my</a></li>
<li><a href="#">rumah.com</a></li>
<li><a href="#">ddproperty.com</a></li>
<li><a href="#">You is now – Lab</a></li>
</ul>
</section>
</div>
<div class="grid-item palm-one-half lap-one-fourth desk-one-fourth">
<section>
<h2 class="font-s font-lightgray">Social Network</h2>
<ul class="list-spacing-xs icon-arrow margin-bottom">
<li><a href="#">News</a></li>
<li><a href="#">Werbung</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Nachbarschaft</a></li>
</ul>
<h3 class="font-s font-lightgray">Folgen Sie uns</h3>
<a href="#" target="_blank"><span class="fa fa-twitter-square fa-3x" style="color:#55acee;"></span></a>
<a href="#" target="_blank"><span class="fa fa-rss-square fa-3x" style="color:#f7a42c;"></span></a>
<a href="#" target="_blank"><span class="fa fa-facebook-square fa-3x" style="color:#3b5998;"></span></a>
<a href="#" target="_blank"><span class="fa fa-youtube-square fa-3x" style="color:#d33f2a;"></span></a>
</section>
</div>
</div>
<div class="grid gutter-s">
<div class="grid-item lap-one-third desk-one-third">
<section>
<div class="float-left margin-top-xs margin-right-s">
<img src="../../img/footer/logo_autoscout_137x66.png" width="60" />
</div>
<p class="font-line-s">
Ob Luxuskarosse, Elektroauto, Motorrad oder Nutzfahrzeug.
</p>
</section>
</div>
<div class="grid-item lap-one-third desk-one-third">
<section>
<div class="float-left margin-top-xs margin-right-s">
<img src="../../img/footer/logo_financescout_137x66.png" width="60" />
</div>
<p class="font-line-s">
Welche Versicherungen brauche ich und gibt es die passenden Angebote?
</p>
</section>
</div>
<div class="grid-item lap-one-third desk-one-third">
<section>
<div class="float-left margin-top-xs margin-right-s">
<img src="../../img/footer/logo_scout_137x66.png" width="60" />
</div>
<p class="font-line-s">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
</section>
</div>
</div>
</div>
</div>
<div class="content-wrapper page-footer__copyright padding-vertical-l font-center">
<span class="font-white font-semibold">© Copyright 2015</span> Immobilien Scout GmbH
</div>
</footer>
Reduced Footer
There is also an older, reduced version of the global footer.
Note: This version of the footer is deprecated and will soon be phased out in favor of the new full footer.
<footer class="main-footer">
<h6>Important Stuff About the Site</h6>
<ul>
<li><a title="These" href="#">These</a></li>
<li><a title="Are" href="#">Are</a></li>
<li><a title="Some" href="#">Some</a></li>
<li><a title="Example" href="#">Example</a></li>
<li><a title="Links" href="#">Links</a></li>
</ul>
<ul>
<li><a title="So" href="#">So</a></li>
<li><a title="Are" href="#">Are</a></li>
<li><a title="These" href="#">These</a></li>
</ul>
<div class="build-information">
<p>
© Copyright 2015 ImmobilienScout24
</p>
</div>
</footer>