Revenus
4 820 €
Inscriptions
Structures HTML + CSS complètes avec rendu visuel. Copie et déploie.
Structure Hero + section Features responsive. Idéal pour une page de présentation produit.
<div class="hero">
<h1>Propulsez votre projet</h1>
<p>Solution 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>Vitesse maximale.</p>
</div>
<div class="feat-card">
<h4>🔒 Sécurisé</h4>
<p>Données chiffrées.</p>
</div>
</div>.hero {
background: #0f172a;
color: white;
padding: 40px 20px;
text-align: center;
}
.hero-btn {
background: #3b82f6;
color: white;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
}
.features {
display: grid;
grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));
gap: 15px;
padding: 20px;
background: #f8fafc;
}
.feat-card {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}Architecture deux colonnes avec sidebar sombre et cartes KPI. Utilise Flexbox + border-left coloré.
<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;
background: #f1f5f9;
}
.dash-sidebar {
width: 160px;
background: #1e293b;
color: white;
padding: 15px;
}
.dash-nav a {
color: #94a3b8;
text-decoration: none;
padding: 8px;
border-radius: 4px;
display: block;
}
.dash-nav a.active {
color: white;
background: #334155;
}
.dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
padding: 20px;
}
.dash-card.rev {
border-left: 4px solid #10b981;
}
.dash-card.user {
border-left: 4px solid #3b82f6;
}Section de présentation avec avatar gradient, bio courte et badges colorés. Minimaliste et élégant.
<div class="port-box">
<div class="port-avatar"></div>
<h2>Thomas Dev</h2>
<p>Créateur d'interfaces fluides.</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 {
text-align: center;
padding: 30px;
font-family: sans-serif;
}
.port-avatar {
width: 70px; height: 70px;
background: linear-gradient(
135deg, #7c3aed, #3b82f6
);
border-radius: 50%;
margin: 0 auto 15px;
}
.port-tags {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.port-tag {
background: #f3f4f6;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: bold;
}
.port-tag.purple {
background: #efecff;
color: #6d28d9;
}Fiche produit complète avec badge promo positionné en absolu, prix et CTA.
<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.</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;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.shop-img {
position: relative;
height: 140px;
background: #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
}
.shop-badge {
position: absolute;
top: 10px; left: 10px;
background: #ef4444;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
}
.shop-row {
display: flex;
justify-content: space-between;
align-items: center;
}Capteur haute précision 16000 DPI.
Page centrée avec grand chiffre grisé, message et bouton de retour.
<div class="err-box">
<h1>404</h1>
<h3>Page introuvable</h3>
<p>La ressource demandée
n'existe pas.</p>
<a href="#" class="err-btn">
Retour à l'accueil
</a>
</div>.err-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px;
background: #fafafa;
}
.err-box h1 {
font-size: 4rem;
font-weight: 900;
color: #cbd5e1;
line-height: 1;
}
.err-btn {
background: #7c3aed;
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: bold;
}