<footer class="footer section-dark font-small text-center fixed-bottom">
<ul class="list-inline">
<li class="list-inline-item">
<a class="nav-item nav-link active hover-effect" href="#">
Home
</a>
</li>
<li class="list-inline-item">
<a class="nav-item nav-link hover-effect" href="#about">About</a>
</li>
<li class="list-inline-item">
<a class="nav-item nav-link hover-effect" href="#projects">Projects</a>
</li>
<li class="list-inline-item">
<a class="nav-item nav-link hover-effect" href="#contact">Contact</a>
</li>
</ul>
<ul class="list-inline">
<li class="social-item list-inline-item">
<a href="https://linkedin.com/" target="_blank" alt="linkedin" class="social-icon">
<i class="fab fa-linkedin"> </i>
</a>
</li>
<li class="social-item list-inline-item">
<a href="https://codepen.io/" target="_blank" alt="linkedin" class="social-icon">
<i class="fab fa-codepen"> </i>
</a>
</li>
<li class="social-item list-inline-item">
<a href="https://dev.to/" target="_blank" alt="dev" class="social-icon">
<i class="fab fa-dev"> </i>
</a>
</li>
<li class="social-item list-inline-item">
<a href="https://linkedin.com/" target="_blank" alt="github" class="social-icon">
<i class="fab fa-github"> </i>
</a>
</li>
</ul>
<div class="copyright">
<p>
<!-- {{ new Date().getFullYear() }} -->
Copyright © 2021 Darian Nocera. All rights reserved.
</p>
</div>
<div class="credit">
<p>
Designed with 👽 by
<a class="hover-effect" id="username" href="https://www.github.com/darnocer" alt="Darian's Github">darnocer</a>
</p>
</div>
</footer>
$dark-bg: #1b1b1b;
$spacer: 2rem;
$spacer-sm: 1rem;
$font-size-sm: 0.8rem;
$social-size: 1.5rem;
$body-font: "Karla", sans-serif;
$accent-color: #026d5b;
$grey-color: #a4b0be;
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap");
html,
body,
#app {
font-family: $body-font;
font-weight: 400;
color: #fff;
a {
color: $grey-color;
text-transform: uppercase;
transition: 0.3s ease;
&:not(.social-icon) {
font-weight: 700;
font-size: $font-size-sm;
}
&:hover {
color: $accent-color;
text-decoration: none;
}
}
}
.footer {
background-color: $dark-bg;
padding: $spacer-sm;
p {
font-size: $font-size-sm;
}
#username {
text-transform: lowercase;
}
.social-item {
i {
font-size: $social-size;
padding: 0 $spacer;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.