Uikit
E Commerce
Template
Responsive
Modulaire
Catalogue
Panier
Boutique
Html
Css
Template e-commerce construit avec UIkit, composants légers et modulaires, navigation sticky, grille produits et système de panier intégré.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template E Commerce Uikit 2026 04291651 | AngularForAll</title>
<!-- UIkit CSS uniquement (pas de JS pour éviter conflits) + police -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/css/uikit.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Reset & style personnalisé pour corriger UIkit */
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: linear-gradient(135deg, #fefaf5 0%, #f8f2ea 100%);
color: #2d2a24;
}
/* Correction des cartes UIkit pour un style propre */
.uk-card {
background: #ffffff;
border-radius: 28px !important;
transition: all 0.3s ease;
border: 1px solid #f0e4d8;
}
.uk-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12);
border-color: #e0cfbf;
}
.uk-card-media-top img {
border-top-left-radius: 28px;
border-top-right-radius: 28px;
height: 240px;
width: 100%;
object-fit: cover;
}
.badge-custom {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255,255,245,0.95);
backdrop-filter: blur(4px);
padding: 4px 14px;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 600;
color: #8B5E3C;
z-index: 2;
border: 0.5px solid rgba(139,94,60,0.2);
}
.badge-promo {
background: #EADBCE;
color: #7B4A2A;
}
.price {
font-size: 1.6rem;
font-weight: 700;
color: #3a2c1f;
}
.old-price {
text-decoration: line-through;
color: #b09b84;
font-size: 0.85rem;
margin-left: 0.5rem;
}
.rating {
color: #E2B87A;
font-size: 0.8rem;
letter-spacing: 2px;
}
.btn-uikit-custom {
background: #f0e8e0;
border: none;
border-radius: 60px;
padding: 10px 0;
font-weight: 600;
color: #5c432e;
transition: all 0.2s;
width: 100%;
text-align: center;
display: inline-block;
cursor: pointer;
}
.btn-uikit-custom:hover {
background: #e4d8cc;
transform: translateY(-2px);
}
.hero-section {
background: #fefaf5;
border-radius: 32px;
border: 1px solid #f0e4d8;
}
.tag-chip {
background: #f0eae3;
padding: 4px 14px;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 500;
color: #8B5E3C;
}
footer {
border-top: 1px solid #e8dfd5;
}
@media (max-width: 640px) {
.uk-card-media-top img {
height: 200px;
}
}
</style>
</head>
<body>
<!-- Navigation UIkit -->
<nav class="uk-navbar-container uk-navbar-transparent uk-margin-bottom" uk-navbar style="background: rgba(255,255,248,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid #ece0d4;">
<div class="uk-container uk-container-large">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#" style="font-weight: 700; font-size: 1.5rem;">
<span style="color: #8B5E3C;">✦</span> Atelier<span style="color: #5c432e;">·Cinq</span>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible@m">
<li><a href="#" style="color: #4a3a2a;">Objets</a></li>
<li><a href="#" style="color: #4a3a2a;">Collection</a></li>
<li><a href="#" style="color: #4a3a2a;">Atelier</a></li>
</ul>
<a href="#" class="uk-icon-button uk-margin-small-left" uk-icon="heart"
style="background: #f0eae3;" aria-label="Ajouter aux favoris"></a>
<a href="#" class="uk-icon-button uk-margin-small-left" uk-icon="cart"
style="background: #f0eae3;" aria-label="Voir le panier"></a>
</div>
</div>
</nav>
<div class="uk-container uk-container-large uk-margin-medium-top uk-margin-large-bottom">
<!-- Hero -->
<div class="hero-section uk-padding uk-text-center uk-margin-bottom">
<div class="uk-flex uk-flex-center uk-gap-small uk-margin-bottom">
<span class="tag-chip">🌿 Céramique</span>
<span class="tag-chip">🪵 Bois</span>
<span class="tag-chip">🧵 Tissage</span>
</div>
<h1 class="uk-heading-small" style="font-weight: 700; color: #2c241e;">Pièces uniques<br>geste contemporain</h1>
<p class="uk-text-lead uk-text-muted" style="max-width: 500px; margin: 0 auto;">Chaque objet raconte une histoire de matière et de savoir-faire.</p>
</div>
<!-- Grille produits UIkit -->
<div class="uk-grid uk-grid-large uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l" uk-grid>
<!-- Carte 1 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top uk-position-relative">
<div class="badge-custom">✦ Édition limitée</div>
<img src="public/baff.webp" alt="Vase" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Céramique</span>
<div class="rating">★★★★★ <span class="uk-text-muted uk-text-small">(48)</span></div>
</div>
<h3 class="uk-card-title">Vase « Argile vive »</h3>
<p class="uk-text-small uk-text-muted">Émail réactif, pièce tournée main. Unique et singulier.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">89€</span> <span class="old-price">120€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 2 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top uk-position-relative">
<div class="badge-custom badge-promo">🌿 Nouveauté</div>
<img src="public/mobile2.png" alt="Bougie" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Bien-être</span>
<div class="rating">★★★★★ <span class="uk-text-muted uk-text-small">(126)</span></div>
</div>
<h3 class="uk-card-title">Bougie « Bois sacré »</h3>
<p class="uk-text-small uk-text-muted">Santal, encens, cire végétale. 50h.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">39€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 3 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top uk-position-relative">
<div class="badge-custom">🍂 Dernier lot</div>
<img src="public/mobile4.png" alt="Sac lin" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Accessoire</span>
<div class="rating">★★★★☆ <span class="uk-text-muted uk-text-small">(87)</span></div>
</div>
<h3 class="uk-card-title">Sac bandoulière lin</h3>
<p class="uk-text-small uk-text-muted">Teinture indigo naturelle, upcyclé.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">74€</span> <span class="old-price">98€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 4 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top uk-position-relative">
<div class="badge-custom badge-promo">✨ -30%</div>
<img src="public/ordinateur-portable-laptop.webp" alt="Plateau bois" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Ébénisterie</span>
<div class="rating">★★★★★ <span class="uk-text-muted uk-text-small">(63)</span></div>
</div>
<h3 class="uk-card-title">Plateau « Noyer brut »</h3>
<p class="uk-text-small uk-text-muted">Massif français, finition huile d'olive.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">59€</span> <span class="old-price">85€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 5 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top uk-position-relative">
<div class="badge-custom">⭐ Coup de cœur</div>
<img src="public/ordinateur-portable-laptop.webp" alt="Plaid" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Textile</span>
<div class="rating">★★★★★ <span class="uk-text-muted uk-text-small">(214)</span></div>
</div>
<h3 class="uk-card-title">Plaid « Forêt sylvestre »</h3>
<p class="uk-text-small uk-text-muted">Mérinos & alpaga, tissage main.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">149€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Carte 6 -->
<div>
<div class="uk-card uk-card-hover uk-card-default">
<div class="uk-card-media-top">
<img src="public/phoneL.webp" alt="Carnet" loading="lazy">
</div>
<div class="uk-card-body">
<div class="uk-flex uk-flex-between uk-margin-small-bottom">
<span class="tag-chip">Papeterie</span>
<div class="rating">★★★★★ <span class="uk-text-muted uk-text-small">(41)</span></div>
</div>
<h3 class="uk-card-title">Carnet « Atelier nomade »</h3>
<p class="uk-text-small uk-text-muted">Papier coton, reliure cuir végétal.</p>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-medium-top">
<div><span class="price">34€</span></div>
<button class="btn-uikit-custom uk-width-1-2">Ajouter</button>
</div>
</div>
</div>
</div>
</div>
<!-- Valeurs -->
<div class="uk-grid uk-child-width-1-1 uk-child-width-1-3@m uk-margin-xlarge-top uk-margin-bottom" uk-grid>
<div class="uk-text-center">
<span class="uk-icon-button uk-margin-small-bottom" style="background: #f0eae3; width: 48px; height: 48px;" uk-icon="icon: handshake; ratio: 1.2"></span>
<h4 class="uk-h5">Artisanat local</h4>
<p class="uk-text-small uk-text-muted">Fabrication en petites séries, gestes d'exception.</p>
</div>
<div class="uk-text-center">
<span class="uk-icon-button uk-margin-small-bottom" style="background: #f0eae3; width: 48px; height: 48px;" uk-icon="icon: leaf; ratio: 1.2"></span>
<h4 class="uk-h5">Matériaux durables</h4>
<p class="uk-text-small uk-text-muted">Bois certifié, fibres naturelles, céramique sans plomb.</p>
</div>
<div class="uk-text-center">
<span class="uk-icon-button uk-margin-small-bottom" style="background: #f0eae3; width: 48px; height: 48px;" uk-icon="icon: truck; ratio: 1.2"></span>
<h4 class="uk-h5">Livraison offerte</h4>
<p class="uk-text-small uk-text-muted">Dès 60€ d'achat, emballages compostables.</p>
</div>
</div>
<!-- Footer -->
<footer class="uk-text-center uk-margin-large-top uk-padding-small">
<p class="uk-text-small uk-text-muted">© 2025 Atelier·Cinq — Collection artisanale contemporaine.</p>
</footer>
</div>
<!-- UIkit JS léger (uniquement pour les icônes et interactions, sans conflit style) -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/js/uikit-icons.min.js"></script>
<script>
(function() {
const buttons = document.querySelectorAll('.btn-uikit-custom');
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const card = btn.closest('.uk-card');
const title = card?.querySelector('.uk-card-title')?.innerText || 'produit';
console.log(`[UIkit] 🛒 Ajout : ${title}`);
alert(`✨ "${title}" ajouté — Interface UIkit fonctionnelle.`);
});
});
console.log("UIkit — cartes produit stables, thème clair, aucun conflit CSS.");
})();
</script>
</body>
</html>
Télécharger le fichier source