Bootstrap 5
Ollama Style
Template Ui
Modern Ui
Snippets Html
Template inspiré du style Ollama 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 Ollama Style Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
/* Navbar personnalisée */
.navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Hero section */
.hero {
padding: 120px 0 80px;
color: white;
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease;
}
.hero .lead {
font-size: 1.3rem;
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease 0.1s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Cartes de fonctionnalités */
.feature-card {
background: white;
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
height: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.feature-icon {
font-size: 3rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
/* Section des modèles */
.model-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.model-card:hover {
border-color: #667eea;
transform: scale(105%);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.model-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* Section installation */
.code-block {
background: #1e1e1e;
border-radius: 15px;
padding: 1.5rem;
position: relative;
}
.code-block pre {
margin: 0;
color: #d4d4d4;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
}
.copy-btn {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.1);
border: none;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.copy-btn:hover {
background: rgba(255,255,255,0.2);
}
/* Section CTA */
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 30px;
padding: 4rem;
color: white;
}
/* Footer */
.footer {
background: #1a1a1a;
color: #999;
padding: 3rem 0;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .lead {
font-size: 1rem;
}
.cta-section {
padding: 2rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-boxes"></i> Ollama
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Fonctionnalités</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#models">Modèles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#install">Installation</a>
</li>
<li class="nav-item">
<a class="btn btn-primary ms-2" href="#download">
<i class="bi bi-download"></i> Télécharger
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 text-center text-lg-start">
<h1>Exécutez, créez et partagez des modèles IA localement</h1>
<p class="lead">
Ollama vous permet d'exécuter des modèles de langage comme Llama 2, Mistral, et bien d'autres directement sur votre machine.
</p>
<div class="d-flex gap-3 justify-content-center justify-content-lg-start">
<a href="#download" class="btn btn-light btn-lg">
<i class="bi bi-download"></i> Télécharger
</a>
<a href="#install" class="btn btn-outline-light btn-lg">
<i class="bi bi-terminal"></i> Commencer
</a>
</div>
</div>
<div class="col-lg-5 mt-5 mt-lg-0 text-center">
<div class="code-block">
<button class="copy-btn" onclick="copyCode()">
<i class="bi bi-clipboard"></i> Copier
</button>
<pre><code id="installCode">curl -fsSL https://ollama.com/install.sh | sh</code></pre>
</div>
<p class="mt-3 text-light">⏱️ Installation en une ligne</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-5" style="background: #f8f9fa;">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Pourquoi choisir Ollama ?</h2>
<p class="lead text-muted">La solution la plus simple pour exécuter des modèles IA localement</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-shield-check feature-icon"></i>
<h4 class="fw-bold mb-3">100% Local & Privé</h4>
<p class="text-muted">Vos données restent sur votre machine. Aucune API externe, aucun partage de données.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-cpu feature-icon"></i>
<h4 class="fw-bold mb-3">Optimisé pour tous</h4>
<p class="text-muted">Fonctionne sur CPU, GPU Apple Silicon, NVIDIA et AMD. Des performances exceptionnelles.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-box feature-icon"></i>
<h4 class="fw-bold mb-3">Bibliothèque complète</h4>
<p class="text-muted">Accédez à des centaines de modèles pré-entraînés : Llama, Mistral, Gemma, Phi et plus.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-api feature-icon"></i>
<h4 class="fw-bold mb-3">API RESTful</h4>
<p class="text-muted">Intégrez facilement Ollama dans vos applications avec une API simple et documentée.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-chat-dots feature-icon"></i>
<h4 class="fw-bold mb-3">Interface CLI & Chat</h4>
<p class="text-muted">Utilisez la ligne de commande ou l'interface de chat intégrée pour interagir avec les modèles.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-git feature-icon"></i>
<h4 class="fw-bold mb-3">Modèles personnalisés</h4>
<p class="text-muted">Créez et partagez vos propres modèles avec Ollama Modelfile.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Models Section -->
<section id="models" class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Modèles populaires</h2>
<p class="lead text-muted">Des centaines de modèles disponibles au téléchargement</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-robot" style="font-size: 3rem; color: #667eea;"></i>
<h4 class="mt-3 fw-bold">Llama 3.2</h4>
<p class="text-muted">3B / 11B paramètres</p>
<span class="model-badge">Meta</span>
<hr>
<small class="text-muted">Performances exceptionnelles pour la taille</small>
</div>
</div>
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-stars" style="font-size: 3rem; color: #764ba2;"></i>
<h4 class="mt-3 fw-bold">Mistral</h4>
<p class="text-muted">7B paramètres</p>
<span class="model-badge">Mistral AI</span>
<hr>
<small class="text-muted">Rapide et efficace pour la plupart des tâches</small>
</div>
</div>
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-gem" style="font-size: 3rem; color: #667eea;"></i>
<h4 class="mt-3 fw-bold">Gemma 2</h4>
<p class="text-muted">2B / 9B / 27B</p>
<span class="model-badge">Google</span>
<hr>
<small class="text-muted">Nouveaux standards de performance</small>
</div>
</div>
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-code-square" style="font-size: 3rem; color: #764ba2;"></i>
<h4 class="mt-3 fw-bold">CodeLlama</h4>
<p class="text-muted">7B / 13B / 34B</p>
<span class="model-badge">Meta</span>
<hr>
<small class="text-muted">Spécialisé pour le code et la programmation</small>
</div>
</div>
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-chat-quote" style="font-size: 3rem; color: #667eea;"></i>
<h4 class="mt-3 fw-bold">Phi-3</h4>
<p class="text-muted">3.8B / 7B / 14B</p>
<span class="model-badge">Microsoft</span>
<hr>
<small class="text-muted">Petit mais puissant pour le raisonnement</small>
</div>
</div>
<div class="col-md-4">
<div class="model-card text-center">
<i class="bi bi-chat-text" style="font-size: 3rem; color: #764ba2;"></i>
<h4 class="mt-3 fw-bold">Nous Hermes</h4>
<p class="text-muted">8B / 13B / 70B</p>
<span class="model-badge">Nous Research</span>
<hr>
<small class="text-muted">Excellent pour les conversations naturelles</small>
</div>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="install" class="py-5" style="background: #f8f9fa;">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Installation rapide</h2>
<p class="lead text-muted">Commencez à utiliser Ollama en quelques minutes</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="code-block mb-4">
<button class="copy-btn" onclick="copyCode2()">
<i class="bi bi-clipboard"></i> Copier
</button>
<pre><code id="installCode2"># Sur macOS et Linux
curl -fsSL https://ollama.com/install.sh | sh
# Sur Windows (WSL2 recommandé)
# Téléchargez l'installateur depuis le site officiel
# Démarrer Ollama
ollama serve
# Télécharger et exécuter un modèle
ollama run llama3.2</code></pre>
</div>
<div class="row g-3 mt-4">
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="bi bi-apple text-dark" style="font-size: 2rem;"></i>
<div class="ms-3">
<h6 class="mb-0">macOS</h6>
<small>Apple Silicon & Intel</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="bi bi-windows text-dark" style="font-size: 2rem;"></i>
<div class="ms-3">
<h6 class="mb-0">Windows</h6>
<small>via WSL2 ou bientôt natif</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="bi bi-ubuntu text-dark" style="font-size: 2rem;"></i>
<div class="ms-3">
<h6 class="mb-0">Linux</h6>
<small>Ubuntu, Debian, Fedora...</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="bi bi-docker text-dark" style="font-size: 2rem;"></i>
<div class="ms-3">
<h6 class="mb-0">Docker</h6>
<small>Image officielle disponible</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="download" class="py-5">
<div class="container">
<div class="cta-section text-center">
<i class="bi bi-rocket-takeoff" style="font-size: 4rem;"></i>
<h2 class="display-5 fw-bold mt-3 mb-4">Prêt à commencer ?</h2>
<p class="lead mb-4">Rejoignez des milliers de développeurs qui utilisent Ollama au quotidien</p>
<div class="d-flex gap-3 justify-content-center flex-wrap">
<a href="#" class="btn btn-light btn-lg">
<i class="bi bi-download"></i> Télécharger pour macOS
</a>
<a href="#" class="btn btn-outline-light btn-lg">
<i class="bi bi-github"></i> GitHub
</a>
<a href="#" class="btn btn-outline-light btn-lg">
<i class="bi bi-book"></i> Documentation
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h5 class="text-white mb-3">Ollama</h5>
<p>Exécutez des modèles de langage localement. Simple, rapide et privé.</p>
<div class="mt-3">
<a href="#" class="text-white-50 me-3"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-white-50 me-3"><i class="bi bi-github"></i></a>
<a href="#" class="text-white-50 me-3"><i class="bi bi-discord"></i></a>
</div>
</div>
<div class="col-md-2 mb-4 mb-md-0">
<h6 class="text-white mb-3">Produit</h6>
<ul class="list-unstyled">
<li><a href="#features" class="text-white-50 text-decoration-none">Fonctionnalités</a></li>
<li><a href="#models" class="text-white-50 text-decoration-none">Modèles</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Tarifs</a></li>
</ul>
</div>
<div class="col-md-2 mb-4 mb-md-0">
<h6 class="text-white mb-3">Ressources</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Documentation</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">API Reference</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Blog</a></li>
</ul>
</div>
<div class="col-md-4">
<h6 class="text-white mb-3">Newsletter</h6>
<div class="input-group">
<input type="email" class="form-control" placeholder="Votre email">
<button class="btn btn-primary" type="button">S'abonner</button>
</div>
</div>
</div>
<hr class="mt-4">
<div class="text-center">
<small>© 2024 Ollama. Tous droits réservés.</small>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
function copyCode() {
const code = document.getElementById('installCode').innerText;
navigator.clipboard.writeText(code);
alert('Code copié !');
}
function copyCode2() {
const code = document.getElementById('installCode2').innerText;
navigator.clipboard.writeText(code);
alert('Code copié !');
}
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur