No notes defined.
<footer class=" siteFooter">
<div class="siteFooter__container container">
<a href="/" class="siteFooter__brand">
<svg xmlns="http://www.w3.org/2000/svg" class="siteFooter__logo" width="36" height="44" viewBox="3 1 18 22" stroke-width="1" stroke="currentColor" fill="none">
<path d="M6 17.6l-2 -1.1v-2.5" />
<path d="M4 10v-2.5l2 -1.1" />
<path d="M10 4.1l2 -1.1l2 1.1" />
<path d="M18 6.4l2 1.1v2.5" />
<path d="M20 14v2.5l-2 1.12" />
<path d="M14 19.9l-2 1.1l-2 -1.1" />
<line x1="12" y1="12" x2="14" y2="10.9" />
<line x1="18" y1="8.6" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="14.5" />
<line x1="12" y1="18.5" x2="12" y2="21" />
<path d="M12 12l-2 -1.12" />
<line x1="6" y1="8.6" x2="4" y2="7.5" />
</svg>
<div class="siteFooter__siteName">Boilerplate</div>
</a>
<div class="siteFooter__links linkGroups">
<div class="siteFooter__linkGroup linkGroup">
<div class="linkGroup__heading">Maine</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Seacoast</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Parks</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Activities</a></li>
</ul>
</div>
<div class="siteFooter__linkGroup linkGroup">
<div class="linkGroup__heading">Massachusetts</div>
<ul class="linkGroup__list -wide">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
</ul>
</div>
<div class="siteFooter__linkGroup linkGroup">
<div class="linkGroup__heading">New Hampshire</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Towns</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Parks</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Activities</a></li>
</ul>
</div>
</div>
<nav class="siteFooter__socialLinks">
<a class="siteFooter__socialLink" href="">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
</svg>
</a>
<a class="siteFooter__socialLink" href="">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg>
</a>
<a class="siteFooter__socialLink" href="">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
</svg>
</a>
</nav>
</div>
<div class="siteFooter__utility container">
<div class="siteFooter__copyright">© 2022 Boilerplate.</div>
<nav class=" utilityNav">
<ul class="utilityNav__list">
<li class="utilityNav__item">
<a class="utilityNav__link" href="#">privacy policy</a>
</li>
<li class="utilityNav__item">
<a class="utilityNav__link" href="#">legal</a>
</li>
</ul>
</nav>
</div>
</footer>
.siteFooter {
background-color: $blue-900;
color: $white;
padding: 2rem 0;
a {
color: $white;
}
&__container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
> * {
flex: 1;
}
@include at(lg) {
align-items: flex-start;
flex-direction: row;
}
}
&__links {
display: block;
flex: 2;
gap: $h-space;
width: 100%;
@include at(lg) {
display: flex;
}
> * {
width: auto;
}
}
&__linkGroup {
text-align: center;
& + & {
margin-left: 0;
}
@include at(lg) {
text-align: left;
}
}
&__brand {
align-items: center;
color: $primary;
display: flex;
padding: $thin-v-space 0;
@include at(lg) {
margin-right: 2rem;
}
}
&__logo {
margin-right: .5rem;
}
&__socialLinks {
display: flex;
justify-content: flex-end;
}
&__socialLink {
padding: 1rem 0;
& + & {
margin-left: .5rem;
}
}
&__utility {
color: $gray-300;
display: flex;
font-size: .875rem;
justify-content: space-between;
padding-top: 2rem;
a {
color: $gray-300;
}
}
}