spb/poster-ka Public
Posters de présentation des marques du Groupe KA — HTML autonomes, impression A3 portrait
HTML 100%
1<!DOCTYPE html>2<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai -->3<!-- Poster de présentation Fabri·Ka (by Groupe KA) — thème terracotta/pin, Fraunces + Outfit, de www.fabri-ka.com. Imprimer en A3 portrait. -->4<html lang="fr">5<head>6<meta charset="UTF-8" />7<meta name="viewport" content="width=device-width, initial-scale=1" />8<title>Fabri·Ka by Groupe KA — Tous les produits québécois (poster)</title>9<link rel="preconnect" href="https://fonts.googleapis.com" />10<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />11<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />12<style>13 :root {14 --paper: #FAF6F0;15 --ink: #1E1B16;16 --ink-2: #6E6455;17 --ink-3: #9a8f7e;18 --sec: #234438;19 --accent: #C4532E;20 --accent-dark: #A94525;21 --sand: #F1E9DD;22 --border: #E4D9C8;23 --on-accent: #FAF6F0;24 --display: "Fraunces", Georgia, serif;25 --body: "Outfit", system-ui, sans-serif;26 --mono: "JetBrains Mono", ui-monospace, monospace;27 }28 * { margin: 0; padding: 0; box-sizing: border-box; }29 html, body { background: #1E1B16; }30 body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; }3132 .poster {33 width: 860px; min-height: 1216px;34 background: var(--paper);35 border: 3px solid var(--ink);36 box-shadow: 14px 14px 0 rgba(0,0,0,0.45);37 padding: 44px 48px 36px;38 display: flex; flex-direction: column;39 position: relative; overflow: hidden;40 }41 .poster::after {42 content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;43 background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);44 background-size: 5px 5px;45 }4647 .head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }48 .wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }49 .kabox { display: inline-block; background: var(--ink); color: var(--accent); border-radius: 8px; padding: 0 10px 5px; transform: rotate(-2deg); }50 .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }51 .by .minika { font-family: var(--display); font-size: 13px; display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); }52 .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); }53 .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }5455 .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 26px; }56 h1 { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1.02; letter-spacing: -0.015em; margin-top: 10px; }57 h1 .outline { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }58 h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; }59 .lede { margin-top: 16px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }60 .lede strong { color: var(--ink); }6162 .figure { margin-top: 24px; display: flex; flex-direction: column; }63 .sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }64 .src { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 5px 12px; box-shadow: 0 3px 8px rgba(30,27,22,0.08); white-space: nowrap; }65 .beams { display: block; width: 100%; height: 78px; }66 .beams line { stroke: var(--sec); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.5; animation: flow 1.6s linear infinite; }67 @keyframes flow { to { stroke-dashoffset: -22; } }6869 .core { align-self: center; background: var(--sec); color: var(--paper); border-radius: 14px; padding: 18px 34px 20px; text-align: center; box-shadow: 0 10px 26px rgba(35,68,56,0.35); transform: rotate(-1deg); position: relative; z-index: 1; }70 .core .k { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; line-height: 1; }71 .core .k .box { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 8px 4px; transform: rotate(-2deg); }72 .core .eq { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,240,0.75); margin-top: 7px; }73 .core .pill { position: absolute; top: -13px; right: -26px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; padding: 4px 11px; transform: rotate(3deg); white-space: nowrap; }7475 .features { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }76 .feat { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 6px 18px rgba(30,27,22,0.08); padding: 16px 18px 18px; }77 .feat .n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--accent); }78 .feat h3 { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; margin-top: 6px; color: var(--sec); }79 .feat p { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }80 .feat p strong { color: var(--ink); }8182 .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }83 .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 14px; background: var(--sand); color: var(--ink); white-space: nowrap; }84 .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; }85 @keyframes pulse { 50% { opacity: 0.35; } }8687 .strip { margin-top: 24px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 18px 26px; box-shadow: 0 10px 26px rgba(30,27,22,0.3); display: flex; align-items: center; justify-content: space-between; gap: 24px; }88 .strip .eq { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }89 .strip .eq .acc { color: var(--accent); }90 .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(250,246,240,0.78); text-align: right; white-space: nowrap; }91 .strip .side strong { color: var(--accent); font-weight: 700; }9293 .foot { margin-top: auto; border-top: 2px dashed var(--border); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }94 .def { max-width: 540px; }95 .def .term { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--sec); }96 .def .phon { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }97 .def p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }98 .def p strong { color: var(--ink); }99 .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; }100 .contact .big { font-size: 13px; color: var(--ink); }101102 @media print {103 html, body { background: none; padding: 0; }104 .poster { box-shadow: none; min-height: 1323px; }105 .beams line { animation: none; }106 .chip .dot { animation: none; }107 @page { size: 860px 1323px; margin: 0; }108 }109</style>110</head>111<body>112 <div class="poster">113114 <header class="head">115 <div>116 <span class="wordmark">Fabri<span class="kabox">Ka</span></span><br />117 <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>118 </div>119 <span class="url">www.fabri-ka.com</span>120 </header>121122 <p class="kicker">La vitrine des fabricants d’ici · Québec</p>123 <h1>Tous les produits<br /><span class="outline">québécois.</span> <span class="hl">Un seul endroit.</span></h1>124 <p class="lede">125 <strong>La vitrine des fabricants et artisans d’ici :</strong> plus de126 280 000 produits provenant de 1 200 boutiques en ligne québécoises,127 indexés par région et par catégorie. Chaque produit renvoie directement à128 la boutique du fabricant — acheter local n’a jamais été aussi simple.129 </p>130131 <div class="figure">132 <div class="sources">133 <span class="src">savonnerie-artisanale.qc</span>134 <span class="src">microbrasserie.qc</span>135 <span class="src">ebenisterie.qc</span>136 <span class="src">ferme-locale.qc</span>137 <span class="src">créateurs-mode.qc</span>138 <span class="src">céramique-dici.qc</span>139 <span class="src">érablière.qc</span>140 </div>141 <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">142 <line x1="90" y1="6" x2="430" y2="76" />143 <line x1="205" y1="6" x2="430" y2="76" />144 <line x1="320" y1="6" x2="430" y2="76" />145 <line x1="430" y1="6" x2="430" y2="76" />146 <line x1="540" y1="6" x2="430" y2="76" />147 <line x1="655" y1="6" x2="430" y2="76" />148 <line x1="770" y1="6" x2="430" y2="76" />149 </svg>150 <div class="core">151 <span class="pill">1 204 boutiques indexées</span>152 <div class="k">Fabri<span class="box">Ka</span></div>153 <div class="eq">= le Québec qui fabrique, au même endroit</div>154 </div>155 </div>156157 <div class="features">158 <article class="feat">159 <span class="n">01</span>160 <h3>Découverte par région</h3>161 <p><strong>Région, catégorie, mot-clé</strong> : explorez ce qui se fabrique près de chez vous, ou partout au Québec.</p>162 </article>163 <article class="feat">164 <span class="n">02</span>165 <h3>Sans intermédiaire</h3>166 <p>Chaque produit renvoie <strong>directement à la boutique du fabricant</strong> — aucune commission, aucun détour.</p>167 </article>168 <article class="feat">169 <span class="n">03</span>170 <h3>Tout le territoire</h3>171 <p><strong>Des Îles-de-la-Madeleine à l’Abitibi</strong> : 17 régions, et le savoir-faire de chacune.</p>172 </article>173 <article class="feat">174 <span class="n">04</span>175 <h3>Registre public</h3>176 <p>Un <strong>registre public de 3 200+ boutiques d’ici</strong>, la carte la plus complète du commerce en ligne québécois.</p>177 </article>178 </div>179180 <div class="stats">181 <span class="chip"><span class="dot"></span>281 000+ produits indexés</span>182 <span class="chip">1 204 boutiques en ligne</span>183 <span class="chip">17 régions du Québec</span>184 <span class="chip">registre de 3 200+ boutiques</span>185 </div>186187 <div class="strip">188 <p class="eq">189 Acheter local,<br />190 <span class="acc">sans chercher pendant des heures.</span>191 </p>192 <p class="side">193 Chaque produit renvoie à <strong>la boutique du fabricant</strong><br />194 Indexé par <strong>région et catégorie</strong>, en continu<br />195 Connexion unique <strong>KA ID</strong>, valide sur tout le groupe196 </p>197 </div>198199 <footer class="foot">200 <div class="def">201 <span class="term">Fabri·Ka</span><span class="phon">/fa.bʁi.ka/ — « fabrique + agrège »</span>202 <p>203 <strong>1.</strong> Plateforme du Groupe KA dédiée aux produits204 québécois. <strong>2.</strong> L’une des sept plateformes ·Ka :205 Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,206 Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »207 </p>208 </div>209 <div class="contact">210 <span class="big">www.fabri-ka.com</span><br />211 by Groupe KA · www.groupe-ka.com<br />212 © 2026 Groupe KA · Québec213 </div>214 </footer>215 </div>216</body>217</html>218