Bootstrap
Bootstrap5
Newsletter
Html
Css
Template de newsletter Bootstrap 5 avec design élégant et moderne.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4 Exemples de Newsletters Responsive</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; background: #f1f5f9; }
.font-serif { font-family: 'Playfair Display', serif; }
.font-grotesk { font-family: 'Space Grotesk', sans-serif; }
.newsletter-card {
transition: all 0.3s ease;
}
.newsletter-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="p-6 md:p-10">
<div class="max-w-7xl mx-auto">
<!-- En-tête -->
<div class="text-center mb-10">
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wider">Inspiration Design</span>
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mt-2 mb-3">4 Exemples de Newsletters</h1>
<p class="text-gray-500 max-w-2xl mx-auto">Des designs modernes et entièrement responsive pour tous vos besoins de communication</p>
</div>
<!-- ==================== NEWSLETTER 1 : MODERNE / MINIMALISTE ==================== -->
<div class="mb-12">
<div class="flex items-center gap-3 mb-4">
<span class="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center font-bold text-sm">1</span>
<h2 class="text-2xl font-bold text-gray-800">Style Moderne & Minimaliste</h2>
<span class="text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full ml-auto">Parfait pour startups</span>
</div>
<div class="newsletter-card bg-white rounded-2xl shadow-lg overflow-hidden max-w-2xl mx-auto">
<div class="p-6 md:p-8">
<div class="text-center mb-6">
<div class="inline-flex items-center gap-2 mb-4">
<i class="fas fa-bolt text-2xl text-indigo-600"></i>
<span class="text-2xl font-bold text-gray-800">Swift<span class="text-indigo-600">.</span></span>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Restez à la pointe</h3>
<p class="text-gray-500">Recevez nos actualités et offres exclusives directement dans votre boîte mail.</p>
</div>
<form class="space-y-4">
<div class="flex flex-col sm:flex-row gap-3">
<input type="email" placeholder="Votre adresse email"
class="flex-1 px-5 py-4 bg-gray-50 border border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-6 py-4 rounded-xl transition flex items-center justify-center gap-2">
<span>S'abonner</span>
<i class="fas fa-arrow-right"></i>
</button>
</div>
<div class="flex items-center justify-center gap-2">
<input type="checkbox" id="privacy1" class="w-4 h-4 text-indigo-600 rounded">
<label for="privacy1" class="text-xs text-gray-500">J'accepte de recevoir les communications de Swift</label>
</div>
</form>
<div class="mt-6 pt-6 border-t border-gray-100 flex items-center justify-center gap-6 text-gray-400 text-xs">
<span class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500"></i> Sans spam</span>
<span class="flex items-center gap-1"><i class="fas fa-lock"></i> Données protégées</span>
<span class="flex items-center gap-1"><i class="fas fa-times-circle"></i> Désabonnement facile</span>
</div>
</div>
</div>
</div>
<!-- ==================== NEWSLETTER 2 : LUXE / ÉLÉGANT ==================== -->
<div class="mb-12">
<div class="flex items-center gap-3 mb-4">
<span class="w-8 h-8 bg-amber-600 text-white rounded-lg flex items-center justify-center font-bold text-sm">2</span>
<h2 class="text-2xl font-bold text-gray-800">Style Luxe & Élégant</h2>
<span class="text-xs bg-amber-100 text-amber-700 px-3 py-1 rounded-full ml-auto">Idéal pour marques premium</span>
</div>
<div class="newsletter-card bg-gradient-to-br from-amber-50 to-stone-100 rounded-3xl shadow-xl overflow-hidden max-w-2xl mx-auto border border-amber-200">
<div class="p-8 md:p-10">
<div class="text-center mb-8">
<div class="font-serif text-4xl text-amber-800 mb-3">Éclat</div>
<div class="w-12 h-0.5 bg-amber-400 mx-auto mb-4"></div>
<h3 class="font-serif text-2xl font-bold text-stone-800 mb-3">L'Art de la Newsletter</h3>
<p class="text-stone-600 font-light">Inscrivez-vous pour découvrir nos collections exclusives et recevoir des offres privilégiées.</p>
</div>
<form>
<div class="max-w-md mx-auto">
<div class="flex flex-col gap-4">
<div class="relative">
<i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-amber-400"></i>
<input type="text" placeholder="Votre prénom"
class="w-full pl-12 pr-4 py-4 bg-white/80 backdrop-blur-sm border border-amber-200 rounded-full focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition">
</div>
<div class="relative">
<i class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-amber-400"></i>
<input type="email" placeholder="Votre adresse email"
class="w-full pl-12 pr-4 py-4 bg-white/80 backdrop-blur-sm border border-amber-200 rounded-full focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition">
</div>
<button class="bg-amber-600 hover:bg-amber-700 text-white font-serif text-lg py-4 rounded-full transition shadow-lg hover:shadow-xl">
Rejoindre le cercle privé
</button>
</div>
</div>
</form>
<p class="text-center text-stone-400 text-xs mt-6 italic">"L'excellence dans chaque détail"</p>
</div>
</div>
</div>
<!-- ==================== NEWSLETTER 3 : COLORÉ / CRÉATIF ==================== -->
<div class="mb-12">
<div class="flex items-center gap-3 mb-4">
<span class="w-8 h-8 bg-pink-600 text-white rounded-lg flex items-center justify-center font-bold text-sm">3</span>
<h2 class="text-2xl font-bold text-gray-800">Style Coloré & Créatif</h2>
<span class="text-xs bg-pink-100 text-pink-700 px-3 py-1 rounded-full ml-auto">Parfait pour créatifs</span>
</div>
<div class="newsletter-card bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 rounded-3xl shadow-2xl overflow-hidden max-w-2xl mx-auto">
<div class="p-8 md:p-10 text-white relative overflow-hidden">
<!-- Éléments décoratifs -->
<div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
<div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
<div class="relative z-10">
<div class="text-center mb-8">
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
<i class="fas fa-palette"></i>
<span class="font-semibold">Creative Weekly</span>
</div>
<h3 class="text-3xl md:text-4xl font-bold mb-4">🎨 Libérez votre<br>créativité</h3>
<p class="text-white/80 text-lg">Des inspirations, des tutos et des ressources gratuites chaque semaine.</p>
</div>
<form>
<div class="bg-white/20 backdrop-blur-sm rounded-2xl p-1 flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="ton.email@exemple.com"
class="flex-1 px-5 py-4 bg-transparent text-white placeholder-white/60 outline-none">
<button class="bg-white text-purple-600 font-bold px-6 py-4 rounded-xl hover:bg-white/90 transition flex items-center justify-center gap-2">
<span>S'abonner</span>
<i class="fas fa-paper-plane"></i>
</button>
</div>
</form>
<div class="flex justify-center gap-6 mt-6">
<div class="text-center">
<div class="text-2xl font-bold">5k+</div>
<div class="text-xs text-white/70">Créatifs</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold">100%</div>
<div class="text-xs text-white/70">Gratuit</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold">52</div>
<div class="text-xs text-white/70">Éditions/an</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== NEWSLETTER 4 : PROFESSIONNEL / CORPORATE ==================== -->
<div class="mb-8">
<div class="flex items-center gap-3 mb-4">
<span class="w-8 h-8 bg-blue-600 text-white rounded-lg flex items-center justify-center font-bold text-sm">4</span>
<h2 class="text-2xl font-bold text-gray-800">Style Professionnel & Corporate</h2>
<span class="text-xs bg-blue-100 text-blue-700 px-3 py-1 rounded-full ml-auto">Idéal pour B2B</span>
</div>
<div class="newsletter-card bg-white rounded-2xl shadow-xl overflow-hidden max-w-3xl mx-auto border border-gray-200">
<div class="grid md:grid-cols-5">
<!-- Colonne gauche avec couleur -->
<div class="md:col-span-2 bg-gradient-to-br from-blue-600 to-indigo-700 p-8 flex flex-col justify-between text-white">
<div>
<div class="font-grotesk text-2xl font-bold mb-2">Insight<span class="text-blue-200">Pro</span></div>
<div class="w-8 h-0.5 bg-blue-300 mb-4"></div>
<h3 class="font-bold text-xl mb-2">Gardez une longueur d'avance</h3>
<p class="text-blue-100 text-sm">Analyses, tendances et conseils d'experts pour les professionnels.</p>
</div>
<div class="hidden md:block">
<div class="flex items-center gap-2 text-blue-200 text-sm">
<i class="fas fa-chart-line"></i>
<span>+10k abonnés</span>
</div>
</div>
</div>
<!-- Colonne droite formulaire -->
<div class="md:col-span-3 p-8">
<form>
<div class="grid grid-cols-2 gap-4 mb-4">
<input type="text" placeholder="Prénom"
class="px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition">
<input type="text" placeholder="Nom"
class="px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition">
</div>
<input type="email" placeholder="Email professionnel"
class="w-full px-4 py-3 mb-3 bg-gray-50 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition">
<select aria-label="sector"
class="w-full px-4 py-3 mb-4 bg-gray-50 border border-gray-200 rounded-lg text-gray-500 focus:border-blue-500 outline-none">
<option>Secteur d'activité</option>
<option>Technologie</option>
<option>Finance</option>
<option>Marketing</option>
<option>Consulting</option>
<option>Autre</option>
</select>
<div class="flex items-start gap-3 mb-4">
<input type="checkbox" id="privacy4" class="mt-1 w-4 h-4 text-blue-600 rounded">
<label for="privacy4" class="text-xs text-gray-500">Je souhaite recevoir la newsletter InsightPro et j'accepte la <a href="#" class="text-blue-600 hover:underline">politique de confidentialité</a>.</label>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center gap-2">
<span>S'abonner à la newsletter</span>
<i class="fas fa-arrow-right"></i>
</button>
<div class="flex justify-center gap-4 mt-4 text-gray-400">
<i class="fas fa-shield-alt text-sm"></i>
<span class="text-xs">ISO 27001 certifié</span>
<i class="fas fa-circle text-[4px]"></i>
<span class="text-xs">RGPD conforme</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Note responsive -->
<div class="mt-12 text-center">
<div class="inline-flex items-center gap-2 bg-white rounded-full px-5 py-3 shadow-md">
<i class="fas fa-mobile-alt text-indigo-600"></i>
<span class="text-sm text-gray-600">Tous ces exemples sont entièrement <strong>responsive</strong> - Redimensionnez votre navigateur pour voir</span>
<i class="fas fa-tablet-alt text-indigo-600"></i>
<i class="fas fa-laptop text-indigo-600"></i>
</div>
</div>
</div>
</body>
</html>