Currently work in progress.
<footer class="page-footer">
<div class="row">
<div class="columns small-12 medium-12 large-3 page-footer__logos">
<a href="#" class="logo-footer">
<svg role="img">
<use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use>
</svg>
</a>
<a href="https://ecologi.com/modmore" target="_blank" rel="noopener noreferrer" title="View our Ecologi profile" class="logo-ecologi">
<img alt="We offset our carbon footprint via Ecologi" src="https://toolkit.ecologi.com/badges/cpw/5de10f48ec76db00179cea96?white=true&landscape=true" />
</a>
</div>
<div class="columns small-12 medium-4 large-2 large-offset-3">
<h4>Extras</h4>
<nav>
<ul class="footer-nav-list">
<li><a href="#">Redactor</a></li>
<li><a href="#">ContentBlocks</a></li>
<li><a href="#">Commerce</a></li>
<li><a href="#">Formalicious</a></li>
<li><a href="#">Digital Signage</a></li>
<li><a href="#">View All <svg role="img" class="footer-nav-list__arrow">
<use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use>
</svg></a></li>
</ul>
</nav>
</div>
<div class="columns small-12 medium-4 large-2">
<h4>Help</h4>
<nav>
<ul class="footer-nav-list">
<li><a href="#">FAQ</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Contact Support</a></li>
<li><a href="#">Premium MODX Support</a></li>
</ul>
</nav>
</div>
<div class="columns small-12 medium-4 large-2">
<h4>Connect</h4>
<nav>
<ul class="footer-nav-list">
<li><a href="#">Blog</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</div>
</div>
<div class="row u-mt4">
<div class="columns small-12 large-6">
<p class="smallprint">© 2013 - 2020 modmore.</p>
<p class="smallprint">KVK: 52454606 • VAT: NL001103641B07<br> Correspondence: Mark Hamstra, Tijnjedyk 19, Unit 8531, 8934 BT, Leeuwarden, The Netherlands</p>
</div>
<div class="columns small-12 large-6 align-bottom">
<nav>
<ul class="footer-nav-horiz">
<li>
<span>Change currency:</span>
<select title="Select a currency" aria-label="Select a currency" style="width: auto;" id="currencySelector" class="currency-selector">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="RUB">RUB</option>
<option value="CHF">CHF</option>
<option value="CAD">CAD</option>
</select>
</li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy & Cookies</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</div><!-- /.global-container">
/* No context defined. */
/*------------------------------------*\
Footer
\*------------------------------------*/
.page-footer {
margin: 0;
padding: 5rem 0;
background: #2d3235;
-webkit-font-smoothing: antialiased;
border-image: linear-gradient(90deg,#ca3a24 16.66667%,#c7801d 0,#c7801d 33.33333%,#caad21 0,#caad21 0, 50%,#35bc6b 0,#35bc6b 66.66667%,#1391cc 0,#1391cc 83.33333%,#7d4fcc 0);
border-top-width: 10px;
border-top-style: solid;
border-image-slice: 1;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
.page-footer--simple {
padding: 2rem 0;
margin-top: auto;
}
.page-footer h4 {
margin: 2rem 0 1rem 0;
color: #ffffff;
text-transform: uppercase;
@include mq(medium) {
margin-top: 0;
}
}
.page-footer a {
color: $color-white;
&:hover {
text-decoration: underline;
}
}
.page-footer p.smallprint {
margin-bottom: 0;
color: $color-grey-mid;
}
.page-footer__logos {
display: flex;
flex-direction: column;
}
a.logo-footer {
display: block;
margin-bottom: auto;
}
.logo-footer svg {
fill: #ffffff;
max-width: 150px;
height: 25px;
}
.logo-ecologi img {
width: 100%;
max-width: 185px;
}
/**
* Footer nav list styles
*/
.footer-nav-list {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0.3rem 0;
line-height: 1.3;
text-align: left;
}
a {
color: $color-white;
fill: $color-white;
}
a:hover {
text-decoration: underline;
}
@include mq(medium) {
li {
margin: 0.8rem 0;
}
li:last-child {
margin-bottom: 0;
}
}
}
.footer-nav-list__arrow {
width: 18px;
height: 20px;
position: relative;
top: 4px;
left: 4px;
}
/**
* Horizontal nav styles
*/
.footer-nav-horiz {
display: flex;
flex-direction: column;
margin: 1rem 0 0 0;
padding: 0;
list-style: none;
@include mq(large) {
flex-direction: row;
justify-content: flex-end;
margin-top: 0;
}
}
.footer-nav-horiz li {
position: relative;
display: inline-block;
font-size: $font-size-small;
@include mq(large) {
margin-right: 2rem;
margin-left: 0;
}
}
.footer-nav-horiz span {
display: inline-block;
margin-right: 5px;
color: $color-grey-mid;
}
.footer-nav-horiz a {
color: $color-white;
}
/**
* Currency selector
*/
.currency-selector {
color: $color-white;
background: transparent;
padding: 2px;
border: 1px solid $color-grey-base;
border-radius: 4px;
font-size: $font-size-xsmall;
font-weight: bold;
&:hover {
border: 1px solid $color-grey-mid;
}
}