Footers
Simple, mega, minimal and newsletter footers.
Simple Footer
<footer class="uk-footer-simple">
<div class="uk-footer-simple-inner">
<div class="uk-footer-brand">
<span class="uk-footer-brand-icon"><i class="fas fa-cube"></i></span>
<span class="uk-footer-brand-name">WebNexa</span>
</div>
<div class="uk-footer-copy">© 2025 WebNexa. All rights reserved.</div>
</div>
</footer>
<style>
.uk-footer-simple {
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 1.75rem 2rem;
}
.uk-footer-simple-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
gap: 1rem;
}
.uk-footer-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-footer-brand-icon {
width: 28px; height: 28px;
border-radius: 0.5rem;
background: #1e3a8a;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.uk-footer-copy { font-size: 0.8rem; color: #94a3b8; }
</style>
Mega Footer
<footer class="uk-footer-mega">
<div class="uk-footer-mega-inner">
<div class="uk-footer-mega-brand">
<div class="uk-footer-brand">...brand...</div>
<p class="uk-footer-mega-desc">The fastest way to build.</p>
<div class="uk-footer-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="uk-footer-mega-col">
<div class="uk-footer-mega-heading">Product</div>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
</div>
<div class="uk-footer-mega-bottom">
<div>© 2025 WebNexa.</div>
<div class="uk-footer-mega-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
</div>
</footer>
<style>
.uk-footer-mega {
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 3rem 2rem 0;
}
.uk-footer-mega-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 2rem;
padding-bottom: 2.5rem;
}
@media (max-width: 900px) {
.uk-footer-mega-inner { grid-template-columns: 1fr 1fr; }
.uk-footer-mega-brand { grid-column: span 2; }
}
@media (max-width: 480px) {
.uk-footer-mega-inner { grid-template-columns: 1fr; }
.uk-footer-mega-brand { grid-column: span 1; }
}
.uk-footer-mega-desc {
font-size: 0.82rem;
color: #64748b;
line-height: 1.65;
margin: 1rem 0 1.25rem;
}
.uk-footer-social {
display: flex;
gap: 0.5rem;
}
.uk-footer-social a {
width: 34px; height: 34px;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-footer-social a:hover { background: #1e3a8a; color: #fff; }
.uk-footer-mega-heading {
font-size: 0.78rem;
font-weight: 700;
color: #0b1b2f;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.uk-footer-mega-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.uk-footer-mega-col li { margin-bottom: 0.65rem; }
.uk-footer-mega-col a {
font-size: 0.85rem;
color: #64748b;
text-decoration: none;
transition: color 0.15s;
}
.uk-footer-mega-col a:hover { color: #1e3a8a; }
.uk-footer-mega-bottom {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid #e2e8f0;
font-size: 0.78rem;
color: #94a3b8;
flex-wrap: wrap;
gap: 0.75rem;
}
.uk-footer-mega-links { display: flex; gap: 1.25rem; }
.uk-footer-mega-links a {
color: #94a3b8;
text-decoration: none;
transition: color 0.15s;
}
.uk-footer-mega-links a:hover { color: #1e3a8a; }
</style>
Minimal Footer
<footer class="uk-footer-minimal">
<div class="uk-footer-minimal-inner">
<a href="#" class="uk-footer-minimal-link">Home</a>
<a href="#" class="uk-footer-minimal-link">Docs</a>
<a href="#" class="uk-footer-minimal-link">Pricing</a>
<a href="#" class="uk-footer-minimal-link">Blog</a>
<a href="#" class="uk-footer-minimal-link">Contact</a>
</div>
<div class="uk-footer-minimal-copy">© 2025 WebNexa</div>
</footer>
<style>
.uk-footer-minimal {
text-align: center;
padding: 2rem 1.5rem;
background: #fff;
border-top: 1px solid #e2e8f0;
}
.uk-footer-minimal-inner {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.uk-footer-minimal-link {
font-size: 0.85rem;
color: #64748b;
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.uk-footer-minimal-link:hover { color: #1e3a8a; }
.uk-footer-minimal-copy {
font-size: 0.75rem;
color: #94a3b8;
}
</style>
Newsletter Footer
<footer class="uk-footer-news">
<div class="uk-footer-news-inner">
<div class="uk-footer-news-left">
<div class="uk-footer-brand">...brand...</div>
<div class="uk-footer-news-title">Join our newsletter</div>
<div class="uk-footer-news-desc">One email a week. No spam.</div>
</div>
<form class="uk-footer-news-form">
<input type="email" placeholder="[email protected]" class="uk-footer-news-input" required>
<button type="submit" class="uk-footer-news-btn">Subscribe</button>
</form>
</div>
<div class="uk-footer-news-bottom">
<div>© 2025 WebNexa.</div>
<div class="uk-footer-news-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
</div>
</footer>
<style>
.uk-footer-news {
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 2.5rem 2rem 0;
}
.uk-footer-news-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
padding-bottom: 2rem;
}
@media (max-width: 768px) {
.uk-footer-news-inner { grid-template-columns: 1fr; }
}
.uk-footer-news-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin: 1rem 0 0.35rem;
}
.uk-footer-news-desc {
font-size: 0.85rem;
color: #64748b;
}
.uk-footer-news-form {
display: flex;
gap: 0.5rem;
padding: 0.35rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
}
.uk-footer-news-input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
padding: 0.55rem 1rem;
font-size: 0.88rem;
border-radius: 999px;
}
.uk-footer-news-btn {
padding: 0.55rem 1.35rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 999px;
font-weight: 700;
font-size: 0.83rem;
cursor: pointer;
}
.uk-footer-news-btn:hover { background: #0f2a5c; }
.uk-footer-news-bottom {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid #e2e8f0;
font-size: 0.78rem;
color: #94a3b8;
flex-wrap: wrap;
gap: 0.75rem;
}
.uk-footer-news-links {
display: flex;
gap: 1rem;
align-items: center;
}
.uk-footer-news-links a {
color: #94a3b8;
text-decoration: none;
transition: color 0.15s;
}
.uk-footer-news-links a:hover { color: #1e3a8a; }
</style>
Dark Footer
<footer class="uk-footer-dark">
<div class="uk-footer-dark-inner">
<div class="uk-footer-dark-brand">
<div class="uk-footer-brand">...</div>
<p class="uk-footer-dark-desc">Free UI components for everyone.</p>
</div>
<div class="uk-footer-dark-col">
<div class="uk-footer-dark-heading">Product</div>
<ul>
<li><a href="#">Components</a></li>
</ul>
</div>
</div>
<div class="uk-footer-dark-bottom">
<div>© 2025 WebNexa.</div>
</div>
</footer>
<style>
.uk-footer-dark {
background: #0b1b2f;
color: #cbd5e1;
padding: 3rem 2rem 0;
}
.uk-footer-dark-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2rem;
padding-bottom: 2.5rem;
}
@media (max-width: 768px) {
.uk-footer-dark-inner { grid-template-columns: 1fr 1fr; }
.uk-footer-dark-brand { grid-column: span 2; }
}
.uk-footer-dark-desc {
font-size: 0.85rem;
color: #94a3b8;
line-height: 1.7;
margin: 1rem 0 0;
}
.uk-footer-dark-heading {
font-size: 0.78rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.uk-footer-dark-col ul { list-style: none; padding: 0; margin: 0; }
.uk-footer-dark-col li { margin-bottom: 0.65rem; }
.uk-footer-dark-col a {
color: #94a3b8;
font-size: 0.85rem;
text-decoration: none;
transition: color 0.15s;
}
.uk-footer-dark-col a:hover { color: #fff; }
.uk-footer-dark-bottom {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid #1e293b;
font-size: 0.78rem;
color: #64748b;
flex-wrap: wrap;
gap: 0.75rem;
}
</style>
App Footer with Stores
<footer class="uk-footer-app">
<div class="uk-footer-app-inner">
<div>
<div class="uk-footer-app-title">Get the app</div>
<div class="uk-footer-app-desc">Download on iOS and Android.</div>
<div class="uk-footer-app-stores">
<a href="#" class="uk-footer-app-store">
<i class="fab fa-apple"></i>
<div>
<div class="uk-footer-app-store-top">Download on the</div>
<div class="uk-footer-app-store-bottom">App Store</div>
</div>
</a>
<a href="#" class="uk-footer-app-store">
<i class="fab fa-google-play"></i>
<div>
<div class="uk-footer-app-store-top">Get it on</div>
<div class="uk-footer-app-store-bottom">Google Play</div>
</div>
</a>
</div>
</div>
<div class="uk-footer-app-links">
<div class="uk-footer-app-col">
<div class="uk-footer-app-heading">Company</div>
<ul><li><a href="#">About</a></li></ul>
</div>
</div>
</div>
<div class="uk-footer-app-bottom">© 2025 WebNexa, Inc.</div>
</footer>
<style>
.uk-footer-app {
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 2.5rem 2rem 0;
}
.uk-footer-app-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
padding-bottom: 2rem;
}
@media (max-width: 768px) {
.uk-footer-app-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.uk-footer-app-title {
font-size: 1.25rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.35rem;
}
.uk-footer-app-desc {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 1rem;
}
.uk-footer-app-stores { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.uk-footer-app-store {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 1rem;
background: #0b1b2f;
color: #fff;
border-radius: 0.6rem;
text-decoration: none;
}
.uk-footer-app-store:hover { color: #fff; }
.uk-footer-app-store i { font-size: 1.35rem; }
.uk-footer-app-store-top { font-size: 0.62rem; opacity: 0.7; }
.uk-footer-app-store-bottom { font-size: 0.85rem; font-weight: 700; }
.uk-footer-app-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.uk-footer-app-heading {
font-size: 0.78rem;
font-weight: 700;
color: #0b1b2f;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.uk-footer-app-col ul { list-style: none; padding: 0; margin: 0; }
.uk-footer-app-col li { margin-bottom: 0.65rem; }
.uk-footer-app-col a {
color: #64748b;
font-size: 0.85rem;
text-decoration: none;
}
.uk-footer-app-col a:hover { color: #1e3a8a; }
.uk-footer-app-bottom {
max-width: 1100px;
margin: 0 auto;
padding: 1.25rem 0;
border-top: 1px solid #e2e8f0;
font-size: 0.78rem;
color: #94a3b8;
}
</style>