Revenus
4 820 €
Inscriptions
Structures HTML et feuilles de style CSS individuelles avec rendu en temps réel.
Code propre scindé en structure HTML et design de classes CSS.
<div class="hero">
<h1>Propulsez votre projet</h1>
<p>La solution logicielle tout-en-un intuitive.</p>
<a href="#" class="hero-btn">Essai Gratuit</a>
</div>
<div class="features">
<div class="feat-card">
<h4>⚡ Ultra Rapide</h4>
<p>Optimisé pour offrir une vitesse d'exécution maximale.</p>
</div>
<div class="feat-card">
<h4>🔒 Sécurisé</h4>
<p>Données chiffrées de bout en bout selon les normes.</p>
</div>
</div>.hero { background: #0f172a; color: white; padding: 40px 20px; text-align: center; font-family: sans-serif; }
.hero h1 { font-size: 2rem; margin-bottom: 10px; }
.hero p { color: #94a3b8; font-size: 1rem; margin-bottom: 20px; }
.hero-btn { background: #3b82f6; color: white; padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: bold; display: inline-block; }
.hero-btn:hover { background: #2563eb; }
.features { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; background: #f8fafc; font-family: sans-serif; }
.feat-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.feat-card h4 { color: #3b82f6; margin-bottom: 5px; }
.feat-card p { color: #4b5563; font-size: 0.9rem; }Optimisé pour offrir une vitesse d'exécution maximale.
Données chiffrées de bout en bout selon les normes.
Architecture à deux colonnes utilisant Flexbox et des variables de bordures.
<div class="dash-container">
<aside class="dash-sidebar">
<h3>⚡ AdminLab</h3>
<nav class="dash-nav">
<a href="#" class="active">📊 Dashboard</a>
<a href="#">👥 Clients</a>
</nav>
</aside>
<main class="dash-main">
<div class="dash-grid">
<div class="dash-card rev">
<span>Revenus</span>
<h2>4 820 €</h2>
</div>
<div class="dash-card user">
<span>Inscriptions</span>
<h2>+ 124</h2>
</div>
</div>
</main>
</div>.dash-container { display: flex; min-height: 250px; font-family: sans-serif; background: #f1f5f9; }
.dash-sidebar { width: 160px; background: #1e293b; color: white; padding: 15px; }
.dash-sidebar h3 { margin-bottom: 20px; font-size: 1.1rem; color: #3b82f6; }
.dash-nav { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.dash-nav a { color: #94a3b8; text-decoration: none; padding: 8px; border-radius: 4px; }
.dash-nav a.active, .dash-nav a:hover { color: white; background: #334155; }
.dash-main { flex: 1; padding: 20px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.dash-card { background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.dash-card.rev { border-left: 4px solid #10b981; }
.dash-card.user { border-left: 4px solid #3b82f6; }
.dash-card span { color: #64748b; font-size: 0.8rem; text-transform: uppercase; }
.dash-card h2 { font-size: 1.4rem; margin-top: 2px; color: #0f172a; }Idéal pour une section de présentation avec des badges colorés.
<div class="port-box">
<div class="port-avatar"></div>
<h2>Thomas Dev</h2>
<p>Créateur d'interfaces fluides & d'architectures web propres.</p>
<div class="port-tags">
<span class="port-tag">HTML5</span>
<span class="port-tag purple">CSS Grid</span>
<span class="port-tag blue">Flexbox</span>
</div>
</div>.port-box { max-width: 600px; margin: 0 auto; padding: 30px 15px; font-family: sans-serif; text-align: center; color: #334155; }
.port-avatar { width: 70px; height: 70px; background: linear-gradient(135deg, #7c3aed, #3b82f6); border-radius: 50%; margin: 0 auto 15px; }
.port-box h2 { color: #1e293b; font-size: 1.5rem; }
.port-box p { color: #64748b; font-size: 0.9rem; margin-bottom: 15px; }
.port-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.port-tag { background: #f3f4f6; color: #1e293b; padding: 4px 12px; border-radius: 15px; font-size: 0.75rem; font-weight: bold; }
.port-tag.purple { background: #efecff; color: #6d28d9; }
.port-tag.blue { background: #e0f2fe; color: #0369a1; }Créateur d'interfaces fluides & d'architectures web propres.
Mise en page d'une fiche produit complète avec positionnement absolu pour le badge de promo.
<div class="shop-card">
<div class="shop-img">
Photo Produit
<span class="shop-badge">-20%</span>
</div>
<div class="shop-details">
<h4>Souris Gaming RGB</h4>
<p>Capteur haute précision 16000 DPI.</p>
<div class="shop-row">
<span class="shop-price">39.99 €</span>
<button class="shop-btn">Acheter</button>
</div>
</div>
</div>.shop-card { max-width: 240px; margin: 20px auto; background: white; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; font-family: sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.shop-img { background: #cbd5e1; height: 140px; display: flex; align-items: center; justify-content: center; color: #475569; font-weight: bold; position: relative; font-size: 0.9rem; }
.shop-badge { position: absolute; top: 10px; left: 10px; background: #ef4444; color: white; padding: 2px 6px; font-size: 0.7rem; border-radius: 4px; font-weight: bold; }
.shop-details { padding: 12px; }
.shop-details h4 { color: #1e293b; font-size: 0.95rem; margin-bottom: 4px; }
.shop-details p { color: #64748b; font-size: 0.8rem; margin-bottom: 10px; }
.shop-row { display: flex; align-items: center; justify-content: space-between; }
.shop-price { font-size: 1.1rem; font-weight: bold; color: #0f172a; }
.shop-btn { background: #2563eb; color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.shop-btn:hover { background: #1d4ed8; }Capteur haute précision 16000 DPI.
Une page d'erreur centrée avec boutons et ombres fluides.
<div class="404-box">
<h1>404</h1>
<h3>Page introuvable</h3>
<p>Désolé, la ressource demandée n'existe pas ou a changé de place.</p>
<a href="#" class="404-btn">Retourner à l'accueil</a>
</div>.404-box { padding: 35px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: sans-serif; text-align: center; background: #fafafa; }
.404-box h1 { font-size: 3.5rem; font-weight: 900; color: #cbd5e1; margin: 0; line-height: 1; }
.404-box h3 { font-size: 1.2rem; color: #1e293b; margin-top: 5px; }
.404-box p { color: #64748b; font-size: 0.85rem; max-width: 300px; margin: 8px 0 15px; line-height: 1.4; }
.404-btn { background: #7c3aed; color: white; text-decoration: none; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: bold; }
.404-btn:hover { background: #6d28d9; }Désolé, la ressource demandée n'existe pas ou a changé de place.
Retourner à l'accueil