✦ Les Modèles & Templates de l'Atelier ✦
Découvrez ici nos structures prêtes à l'emploi. Copiez simplement la formule de votre choix pour l'installer sur vos espaces.
Description : Idéal pour raconter vos aventures. Ce modèle comprend deux colonnes de côté pour placer vos liens et un grand espace au milieu pour vos récits [🌐].
<style>
.blog-global { width: 1300px; height: 1000px; margin: 0 auto; background: #190c24; border: 5px double #dca7cb; border-radius: 15px; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 15px; color: #ffffff; }
.blog-banniere-haut { height: 150px; border: 3px dotted #bd8ec7; border-radius: 10px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.05); }
.blog-conteneur-colonnes { flex: 1; display: flex; gap: 15px; }
.blog-colonne { width: 240px; border: 3px dashed #bd8ec7; border-radius: 10px; padding: 15px; background: rgba(255,255,255,0.02); }
.blog-centre { flex: 1; border: 4px double #dca7cb; border-radius: 12px; padding: 20px; background: rgba(0,0,0,0.3); }
.blog-banniere-bas { height: 60px; border: 3px dotted #bd8ec7; border-radius: 10px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.05); }
</style>
<div class="blog-global">
<div class="blog-banniere-haut"><h1>BANNIÈRE BLOG</h1></div>
<div class="blog-conteneur-colonnes">
<div class="blog-colonne">Menu de Gauche</div>
<div class="blog-centre">Zone d'Articles Principale</div>
<div class="blog-colonne">Widgets / Liens Droite</div>
</div>
<div class="blog-banniere-bas"><p>Pied de page</p></div>
</div>
Description : Structure moderne en grille divisée en trois colonnes de produits équitables [🌐]. Idéal pour exposer vos créations sous forme de catalogue vitrine.
<style>
.shop-global { max-width: 1200px; margin: 0 auto; padding: 20px; color: #ffffff; background: #110718; border: 4px solid #bd8ec7; border-radius: 16px; }
.shop-entete { text-align: center; padding: 30px; border-bottom: 3px dashed #dca7cb; margin-bottom: 25px; }
.shop-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shop-produit { border: 2px solid #bd8ec7; border-radius: 12px; padding: 15px; background: rgba(255,255,255,0.03); text-align: center; }
.shop-img-emplacement { width: 100%; height: 200px; background: rgba(0,0,0,0.4); border-radius: 8px; margin-bottom: 15px; border: 1px dashed #dca7cb; }
.shop-prix { color: #5ce1e6; font-weight: bold; font-size: 1.2rem; }
</style>
<div class="shop-global">
<div class="shop-entete"><h1>Ma Boutique Vitrine</h1><p>Bienvenue dans ma vitrine créative</p></div>
<div class="shop-galerie">
<div class="shop-produit"><div class="shop-img-emplacement"></div><h3>Produit 1</h3><p class="shop-prix">25.00 $</p></div>
<div class="shop-produit"><div class="shop-img-emplacement"></div><h3>Produit 2</h3><p class="shop-prix">30.00 $</p></div>
<div class="shop-produit"><div class="shop-img-emplacement"></div><h3>Produit 3</h3><p class="shop-prix">15.00 $</p></div>
</div>
</div>
Description : Une mise en page sans fioritures ni colonnes d'accompagnement [🌐]. Elle se focalise sur l'essentiel : une grande bannière et une lecture fluide de vos textes.
<style>
.simple-global { max-width: 1000px; margin: 0 auto; background: rgba(30, 15, 45, 0.9); border: 4px solid #dca7cb; border-radius: 12px; padding: 30px; color: #ffffff; }
.simple-banniere { width: 100%; height: 200px; border: 2px dashed #bd8ec7; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 25px; }
.simple-article { background: rgba(0, 0, 0, 0.2); border: 1px solid #bd8ec7; border-radius: 8px; padding: 20px; margin-bottom: 20px; text-align: left; }
</style>
<div class="simple-global">
<div class="simple-banniere"><h2>BANNIÈRE SIMPLE</h2></div>
<div class="simple-article"><h3>Titre de l'Article</h3><p>Contenu textuel affiché sur toute la largeur sans encombres.</p></div>
<div class="simple-article"><h3>Deuxième Article</h3><p>Idéal pour une lecture simple et directe.</p></div>
</div>
Description : Structure épurée centrée sur un avatar circulaire et de grands boutons d'appels à l'action [🌐]. Parfait pour créer une page d'introduction ou un sommaire d'accueil.
<style>
.intro-global { max-width: 800px; margin: 50px auto; text-align: center; color: #ffffff; padding: 40px; background: #160a21; border: 6px double #dca7cb; border-radius: 25px; }
.intro-avatar { width: 120px; height: 120px; background: rgba(25, 25, 25, 0.1); border-radius: 50%; margin: 0 auto 20px auto; border: 3px solid #5ce1e6; }
.intro-boutons { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.intro-btn { display: inline-block; padding: 12px 25px; background: linear-gradient(135deg, #f48fb1, #22d3ee); color: #fff; font-weight: bold; text-decoration: none; border-radius: 20px; }
</style>
<div class="intro-global">
<div class="intro-avatar"></div>
<h1>Bienvenue sur mon Profil</h1>
<p>Une courte description textuelle pour vous présenter à vos visiteurs de manière chaleureuse.</p>
<div class="intro-boutons">
<a href="#" class="intro-btn">Mon Portfolio</a>
<a href="#" class="intro-btn">Me Contacter</a>
</div>
</div>
Description : Structure sous forme de liste de fiches larges horizontales alignant un grand visuel et un panneau textuel [🌐]. Idéal pour une présentation de produits aérée et minimaliste.
<style>
.shop2-global { max-width: 1100px; margin: 0 auto; padding: 30px; color: #ffffff; background: #0c0512; border: 2px dashed #dca7cb; border-radius: 8px; }
.shop2-grid { display: flex; flex-direction: column; gap: 30px; }
.shop2-item { display: flex; gap: 25px; background: rgba(255,255,255,0.02); border: 1px solid rgba(189, 142, 199, 0.3); border-radius: 12px; padding: 20px; align-items: center; }
.shop2-visuel { width: 180px; height: 180px; background: rgba(0,0,0,0.5); border-radius: 8px; border: 1px dotted #bd8ec7; flex-shrink: 0; }
.shop2-infos { flex: 1; text-align: left; }
.shop2-btn-achat { display: inline-block; padding: 10px 20px; background: #501d5c; color: #5ce1e6; font-weight: bold; border-radius: 6px; text-decoration: none; border: 1px solid #5ce1e6; margin-top: 15px; }
</style>
<div class="shop2-global">
<h2 style="text-align: center; margin-bottom: 30px;">Collection de l'Atelier</h2>
<div class="shop2-grid">
<div class="shop2-item">
<div class="shop2-visuel"></div>
<div class="shop2-infos">
<h3 style="margin:0;">Nom de la Création</h3>
<p style="color:#e9d5ff;">Description concise et détails de cette pièce unique.</p>
<a href="#" class="shop2-btn-achat">Acquérir la formule</a>
</div>
</div>
</div>
</div>
Sorcière Corbeau | © 2026 Addict Creative | Tous droits réservés