Free
Footer
IgnitionLab Footer
A footer block extracted from the IgnitionLab template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
25
ignitionlab.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IgnitionLab Footer | Tailwind CSS UI Block</title>
<meta name="description" content="A footer block extracted from the IgnitionLab template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
<meta name="keywords" content="IgnitionLab, Tailwind CSS template, HTML website template, SaaS landing page, machine learning infrastructure, neural core, responsive business design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
<meta property="og:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="IgnitionLab template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
<meta name="twitter:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="IgnitionLab template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
overflow-x: hidden;
}
.grid-lines {
background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
background-size: 10% 100%;
}
.glass-block {
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.gradient-bg {
background: linear-gradient(90deg, #60a5fa 0%, #c084fc 50%, #fb923c 100%);
filter: blur(60px);
opacity: 0.8;
}
.toggle-switch {
width: 70px;
height: 36px;
background: linear-gradient(45deg, #c084fc, #fb923c);
border-radius: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-knob {
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
position: absolute;
top: 4px;
right: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cta-button {
background: #1e293b;
color: white;
padding: 18px 36px;
border-radius: 50px;
font-weight: 700;
box-shadow: 0 20px 40px -10px rgba(30, 41, 59, 0.4);
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 25px 50px -12px rgba(30, 41, 59, 0.5);
}
.section-grid {
background-image: linear-gradient(#f1f5f9 1px, transparent 1px), linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
background-size: 40px 40px;
}
.il-nav-link.is-active {
color: #0f172a;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
@media (min-width: 1024px) {
.il-nav-link.is-active {
background: transparent;
box-shadow: none;
font-weight: 700;
}
}
</style>
</head>
<body>
<!-- block:start footer -->
<footer class="py-24 border-t border-slate-100 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
<div class="space-y-6">
<div class="flex items-center gap-2">
<div class="text-[#6366f1]">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<span class="text-xl font-bold tracking-tight text-slate-800">IgnitionLab</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed">
High-octane infrastructure for the next generation of digital pioneers. Unleash your innovation potential with our neural core technology.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Product</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">Neural Core</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Velocity Rails</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Secure Vault</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Pricing Plans</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Documentation</a></li>
</ul>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Company</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#about" class="hover:text-indigo-600 transition-colors">Our Story</a></li>
<li><a href="#careers" class="hover:text-indigo-600 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Newsroom</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Brand Assets</a></li>
<li><a href="#contact" class="hover:text-indigo-600 transition-colors">Contact Us</a></li>
</ul>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Resources</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">API Reference</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">System Status</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Compliance</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Legal</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-bold text-slate-400 uppercase tracking-widest">
<p>© 2024 IgnitionLab Intelligence Inc. All rights reserved.</p>
<div class="flex gap-8">
<a href="#" class="hover:text-slate-900 transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-slate-900 transition-colors">Terms of Service</a>
<a href="#" class="hover:text-slate-900 transition-colors">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
<script>
(function () {
var links = document.querySelectorAll("[data-nav-link]");
function setActive(href) {
links.forEach(function (link) {
var isActive = link.getAttribute("href") === href;
link.classList.toggle("is-active", isActive);
if (isActive) {
link.setAttribute("aria-current", "page");
} else {
link.removeAttribute("aria-current");
}
});
}
links.forEach(function (link) {
link.addEventListener("click", function () {
setActive(link.getAttribute("href"));
});
});
})();
</script>
</body>
</html>
From this template
Free
SaaS
IgnitionLab
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access