Bootstrap 5
Ai Bg
Header
Template
Ui
Snippets Html
Template de style d'arrière-plan AI avec design moderne et composants Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template Style AI Bg 2026 04202 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
:root {
--mnx-blue: #134484;
--mnx-light-blue: #1f67b8;
--ai-cyan: #00f2fe;
--ai-purple: #7000ff;
--bg-dark: #060918;
}
body, html {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
background-color: var(--bg-dark);
color: white;
overflow-x: hidden;
height: 100%;
}
/* ========== BACKGROUND IA (Canvas + Gradients) ========== */
#ai-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.mesh-gradient {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(19, 68, 132, 0.4) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(112, 0, 255, 0.2) 0%, transparent 40%);
filter: blur(80px);
z-index: -2;
animation: moveGradient 15s ease infinite alternate;
}
@keyframes moveGradient {
0% { transform: scale(1); }
100% { transform: scale(1.2) translate(5%, 5%); }
}
/* ========== NAVIGATION ========== */
.navbar {
background: rgba(6, 9, 24, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
}
.navbar-brand {
font-weight: 700;
color: white !important;
letter-spacing: 2px;
}
.navbar-brand span {
color: var(--ai-cyan);
}
/* ========== HERO SECTION ========== */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 80px;
}
.hero-content h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(to right, #fff, var(--mnx-light-blue), var(--ai-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
max-width: 700px;
margin: 0 auto 2.5rem;
}
/* ========== BUTTONS ========== */
.btn-mnx {
background: var(--mnx-blue);
color: white;
border: none;
padding: 12px 35px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(19, 68, 132, 0.3);
}
.btn-mnx:hover {
background: var(--mnx-light-blue);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(19, 68, 132, 0.5);
color: white;
}
.btn-outline-ai {
border: 1px solid rgba(0, 242, 254, 0.5);
color: var(--ai-cyan);
padding: 12px 35px;
border-radius: 50px;
transition: all 0.3s;
}
.btn-outline-ai:hover {
background: rgba(0, 242, 254, 0.1);
color: white;
border-color: var(--ai-cyan);
}
/* ========== CARDS (GLASSMORPHISM) ========== */
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.4s ease;
height: 100%;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: var(--mnx-light-blue);
transform: translateY(-10px);
}
.card-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--ai-cyan);
}
/* ========== FOOTER ========== */
footer {
padding: 50px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 100px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero {
height: auto;
padding: 150px 20px;
}
}
</style>
</head>
<body>
<!-- Background Layers -->
<div class="mesh-gradient"></div>
<canvas id="ai-canvas"></canvas>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">MNX<span>DEV</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border-color: rgba(255,255,255,0.2)">
<i class="bi bi-list text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link text-white px-3" href="#">Solutions</a></li>
<li class="nav-item"><a class="nav-link text-white px-3" href="#">Expertise</a></li>
<li class="nav-item"><a class="nav-link text-white px-3" href="#">Réalisations</a></li>
<li class="nav-item"><a class="nav-link btn btn-mnx ms-lg-3" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<span class="badge rounded-pill mb-3" style="background: rgba(19, 68, 132, 0.3); border: 1px solid var(--mnx-blue); padding: 8px 20px;">
<i class="bi bi-cpu me-2"></i>NEXT-GEN DIGITAL TRANSFORMATION
</span>
<h1>L'Intelligence Digitale au Cœur de votre Métier</h1>
<p>MNXDEV réinvente vos processus grâce à des solutions technologiques sur-mesure, alliant Innovation, IA et Performance.</p>
<div class="d-flex flex-column flex-md-row justify-content-center gap-3">
<a href="#" class="btn btn-mnx">Démarrer un projet</a>
<a href="#" class="btn btn-outline-ai">Voir nos services</a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="container py-5">
<div class="row g-4">
<div class="col-md-4">
<div class="glass-card">
<div class="card-icon"><i class="bi bi-robot"></i></div>
<h3>Intelligence Artificielle</h3>
<p>Intégrez le Machine Learning et l'IA générative pour automatiser vos décisions complexes.</p>
</div>
</div>
<div class="col-md-4">
<div class="glass-card">
<div class="card-icon"><i class="bi bi-cloud-check"></i></div>
<h3>Solutions Cloud</h3>
<p>Infrastructure hybride et architecture micro-services pour une scalabilité infinie.</p>
</div>
</div>
<div class="col-md-4">
<div class="glass-card">
<div class="card-icon"><i class="bi bi-shield-lock"></i></div>
<h3>Cyber Sécurité</h3>
<p>Protection avancée de vos données métier avec des protocoles de sécurité de pointe.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 MNXDEV. Tous droits réservés. <br> Transformation Digitale & Innovation.</p>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ========== PARTICLE SYSTEM (AI EFFECT) ==========
const canvas = document.getElementById('ai-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
const particleCount = 80;
function init() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 1,
speedX: (Math.random() - 0.5) * 0.5,
speedY: (Math.random() - 0.5) * 0.5
});
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 242, 254, 0.5)';
ctx.strokeStyle = 'rgba(19, 68, 132, 0.1)';
particles.forEach((p, index) => {
p.x += p.speedX;
p.y += p.speedY;
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
// Connect particles
for (let j = index + 1; j < particles.length; j++) {
const p2 = particles[j];
const dx = p.x - p2.x;
const dy = p.y - p2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
ctx.beginPath();
ctx.lineWidth = 0.5;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
});
requestAnimationFrame(draw);
}
window.addEventListener('resize', init);
init();
draw();
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur