Spookie/assets/js/components/TheFooter.vue

<template>
	<footer class="dark fixed-bottom">
		<div class="container mt-5">
			<div class="row justify-content-center">
				<div class="col text-center">
					<div>
						powered by
						<router-link
							to="/"
							class="d-inline-block mx-auto"
						>
							<img
								src="/build/images/Spookie/spookie_64x64.png"
								alt="Spookie"
							>
						</router-link>
						<div>
							<router-link
								:to="{ name: 'About'}"
								class="d-inline-block mx-auto"
							>
								About Me
							</router-link>
						</div>
					</div>
				</div>
				<div class="col md-4 text-left">
					<div id="legal">
						<h5 class="bd-text-purple-bright mb-1 mt-3">
							Legal
						</h5>
						<ul class="list-unstyled ml-3">
							<li>
								<router-link :to="{ name: 'Pages', params: {slug: 'imprint'}}">
									Imprint
								</router-link>
							</li>
							<li>
								<router-link to="/pages/privacy-policy">
									Privacy Policy
								</router-link>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
</template>

<script>
export default {
	name: 'TheFooter'
}
</script>

<style type="scss">

footer {
	color: lightgray;
	background: #0e0e10;
}
</style>