152 lines
5.3 KiB
Text
152 lines
5.3 KiB
Text
|
<footer class="text-center">
|
||
|
|
<section>
|
||
|
|
<h3>
|
||
|
|
GraphicViZion
|
||
|
|
</h3>
|
||
|
|
<div class="copywrite">
|
||
|
|
© 2021 by GraphicViZion
|
||
|
|
</div>
|
||
|
|
<div class="credit">
|
||
|
|
this site was hand-crafted by <a href="https://spencerflagg.com">Spencer Flagg</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="https://twitter.com/graphicvizion">
|
||
|
|
<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.5" stroke="#ffffff" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||
|
|
<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>
|
||
|
|
@graphicvizion
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://www.youtube.com/user/GraphicVizion">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube"
|
||
|
|
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||
|
|
<rect x="3" y="5" width="18" height="14" rx="4" />
|
||
|
|
<path d="M10 9l5 3l-5 3z" />
|
||
|
|
</svg>
|
||
|
|
YouTube
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://itunes.apple.com/us/artist/graphicvizion/id492668041">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="32"
|
||
|
|
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||
|
|
<path
|
||
|
|
d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z" />
|
||
|
|
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2" />
|
||
|
|
</svg>
|
||
|
|
App Store
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://play.google.com/store/apps/developer?id=Graphic-ViZion">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-google-play"
|
||
|
|
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||
|
|
<path
|
||
|
|
d="M4 3.71v16.58a0.7 .7 0 0 0 1.05 .606l14.622 -8.42a0.55 .55 0 0 0 0 -.953l-14.622 -8.419a0.7 .7 0 0 0 -1.05 .607z" />
|
||
|
|
<line x1="15" y1="9" x2="4.5" y2="20.5" />
|
||
|
|
<line x1="4.5" y1="3.5" x2="15" y2="15" />
|
||
|
|
</svg>
|
||
|
|
Play Store
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<% sections.forEach((link)=> { %>
|
||
|
|
<li>
|
||
|
|
<a href="#<%= link.slug %>">
|
||
|
|
<%= link.name %>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<% }) %>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
footer {
|
||
|
|
display: flex;
|
||
|
|
color: var(--c-bkg);
|
||
|
|
gap: 3rem;
|
||
|
|
background: black;
|
||
|
|
width: var(--viewportWidth);
|
||
|
|
margin-top: 2rem;
|
||
|
|
padding: 4rem 2rem 6rem 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer h3 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
max-height: 8.5rem;
|
||
|
|
row-gap: 0.5rem;
|
||
|
|
column-gap: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer li {
|
||
|
|
line-height: 1;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer li svg {
|
||
|
|
max-height: 1.7rem;
|
||
|
|
transition: .2s all;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer li a {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: var(--c-bkg);
|
||
|
|
gap: 0.5rem;
|
||
|
|
transition: .2s all;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer li a:hover {
|
||
|
|
color: var(--c-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
footer li a:hover svg {
|
||
|
|
stroke: var(--c-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.copywrite {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credit {
|
||
|
|
opacity: 0.5;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credit a {
|
||
|
|
color: var(--c-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.credit a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|