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 Lou·Ka (by Groupe KA) — fichier autonome, hors site. 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>Lou·Ka by Groupe KA — Tous les logements à louer du Québec (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=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />12<style>13 :root {14 --paper: #f5f3ee;15 --ink: #141814;16 --ink-2: #4d5551;17 --ink-3: #8b928c;18 --green: #1c5c41;19 --green-deep: #123f2e;20 --lime: #d9f26b;21 --lime-soft: #f0f9d2;22 --display: "Space Grotesk", system-ui, sans-serif;23 --body: "Inter", system-ui, sans-serif;24 --mono: "JetBrains Mono", ui-monospace, monospace;25 }26 * { margin: 0; padding: 0; box-sizing: border-box; }27 html, body { background: #1a1e1a; }28 body {29 font-family: var(--body);30 color: var(--ink);31 display: flex;32 justify-content: center;33 padding: 40px 16px;34 }3536 /* ---------- Le poster (ratio √2, façon A3 portrait) ---------- */37 .poster {38 width: 860px;39 min-height: 1216px;40 background: var(--paper);41 border: 3px solid var(--ink);42 box-shadow: 14px 14px 0 rgba(0,0,0,0.45);43 padding: 44px 48px 36px;44 display: flex;45 flex-direction: column;46 position: relative;47 overflow: hidden;48 }49 .poster::after {50 content: "";51 position: absolute; inset: 0;52 pointer-events: none;53 opacity: 0.05;54 background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px);55 background-size: 5px 5px;56 }5758 /* ---------- En-tête : wordmark + by Groupe KA ---------- */59 .head {60 display: flex;61 align-items: flex-end;62 justify-content: space-between;63 border-bottom: 2px solid var(--ink);64 padding-bottom: 18px;65 }66 .wordmark {67 font-family: var(--display);68 font-weight: 700;69 font-size: 40px;70 letter-spacing: -0.04em;71 display: inline-flex;72 align-items: baseline;73 gap: 7px;74 line-height: 1;75 }76 .kabox {77 display: inline-block;78 background: var(--ink);79 color: var(--lime);80 border-radius: 8px;81 padding: 0 10px 4px;82 transform: rotate(-2deg);83 }84 .by {85 display: inline-flex;86 align-items: baseline;87 gap: 5px;88 font-family: var(--mono);89 font-weight: 700;90 font-size: 11px;91 letter-spacing: 0.14em;92 text-transform: uppercase;93 color: var(--ink-2);94 margin-top: 10px;95 }96 .by .minika {97 font-family: var(--display);98 font-size: 13px;99 letter-spacing: -0.02em;100 display: inline-flex;101 align-items: baseline;102 gap: 3px;103 color: var(--ink);104 }105 .by .minibox {106 display: inline-block;107 background: var(--ink);108 color: var(--lime);109 border-radius: 4px;110 padding: 0 5px 2px;111 transform: rotate(-2deg);112 }113 .head .url {114 font-family: var(--mono);115 font-weight: 700;116 font-size: 12px;117 letter-spacing: 0.12em;118 text-transform: uppercase;119 color: var(--ink-2);120 }121122 /* ---------- Titre ---------- */123 .kicker {124 font-family: var(--mono);125 font-weight: 700;126 font-size: 11px;127 letter-spacing: 0.18em;128 text-transform: uppercase;129 color: var(--green);130 margin-top: 26px;131 }132 h1 {133 font-family: var(--display);134 font-weight: 700;135 font-size: 58px;136 line-height: 0.99;137 letter-spacing: -0.035em;138 text-transform: uppercase;139 margin-top: 10px;140 }141 h1 .outline {142 color: transparent;143 -webkit-text-stroke: 2px var(--ink);144 }145 h1 .hl {146 background: var(--lime);147 box-shadow: 0 0 0 4px var(--lime);148 border-radius: 2px;149 }150 .lede {151 margin-top: 16px;152 max-width: 620px;153 font-size: 15px;154 line-height: 1.55;155 color: var(--ink-2);156 }157 .lede strong { color: var(--ink); }158159 /* ---------- La figure d'agrégation ---------- */160 .figure {161 margin-top: 24px;162 display: flex;163 flex-direction: column;164 }165 .sources {166 display: flex;167 flex-wrap: wrap;168 justify-content: center;169 gap: 8px 10px;170 }171 .src {172 font-family: var(--mono);173 font-size: 10.5px;174 font-weight: 500;175 color: var(--ink-2);176 background: #fff;177 border: 1.5px solid var(--ink);178 border-radius: 999px;179 padding: 5px 12px;180 box-shadow: 3px 3px 0 rgba(20,24,20,0.2);181 white-space: nowrap;182 }183 .beams { display: block; width: 100%; height: 78px; }184 .beams line {185 stroke: var(--ink);186 stroke-width: 1.6;187 stroke-dasharray: 5 6;188 opacity: 0.55;189 animation: flow 1.6s linear infinite;190 }191 @keyframes flow { to { stroke-dashoffset: -22; } }192193 .core {194 align-self: center;195 background: var(--ink);196 color: var(--paper);197 border-radius: 14px;198 padding: 18px 34px 20px;199 text-align: center;200 box-shadow: 6px 6px 0 rgba(20,24,20,0.28);201 transform: rotate(-1deg);202 position: relative;203 z-index: 1;204 }205 .core .k {206 font-family: var(--display);207 font-weight: 700;208 font-size: 42px;209 letter-spacing: -0.04em;210 line-height: 1;211 color: var(--paper);212 }213 .core .k .box {214 display: inline-block;215 background: var(--lime);216 color: var(--ink);217 border-radius: 8px;218 padding: 0 8px 3px;219 transform: rotate(-2deg);220 }221 .core .eq {222 font-family: var(--mono);223 font-weight: 700;224 font-size: 11px;225 letter-spacing: 0.16em;226 text-transform: uppercase;227 color: rgba(245,243,238,0.75);228 margin-top: 7px;229 }230 .core .pill {231 position: absolute;232 top: -13px; right: -26px;233 background: var(--lime);234 color: var(--ink);235 border: 2px solid var(--ink);236 border-radius: 999px;237 font-family: var(--mono);238 font-weight: 700;239 font-size: 10.5px;240 padding: 4px 11px;241 transform: rotate(3deg);242 white-space: nowrap;243 }244245 /* ---------- Les caractéristiques (2×2) ---------- */246 .features {247 margin-top: 26px;248 display: grid;249 grid-template-columns: 1fr 1fr;250 gap: 14px;251 }252 .feat {253 background: #fff;254 border: 2px solid var(--ink);255 border-radius: 12px;256 box-shadow: 4px 4px 0 var(--ink);257 padding: 16px 18px 18px;258 }259 .feat .n {260 font-family: var(--mono);261 font-weight: 700;262 font-size: 11px;263 color: var(--green);264 }265 .feat h3 {266 font-family: var(--display);267 font-weight: 700;268 font-size: 15.5px;269 letter-spacing: -0.01em;270 text-transform: uppercase;271 margin-top: 6px;272 }273 .feat p {274 margin-top: 6px;275 font-size: 12px;276 line-height: 1.5;277 color: var(--ink-2);278 }279 .feat p strong { color: var(--ink); }280281 /* ---------- Chiffres ---------- */282 .stats {283 display: flex;284 flex-wrap: wrap;285 justify-content: center;286 gap: 9px;287 margin-top: 24px;288 }289 .chip {290 font-family: var(--mono);291 font-weight: 700;292 font-size: 11.5px;293 border: 1.5px solid var(--ink);294 border-radius: 999px;295 padding: 7px 14px;296 background: var(--lime-soft);297 white-space: nowrap;298 }299 .chip .dot {300 display: inline-block;301 width: 7px; height: 7px;302 border-radius: 999px;303 background: var(--green);304 margin-right: 7px;305 animation: pulse 1.8s ease-in-out infinite;306 }307 @keyframes pulse { 50% { opacity: 0.35; } }308309 /* ---------- Bande manifeste ---------- */310 .strip {311 margin-top: 24px;312 background: var(--ink);313 color: var(--paper);314 border-radius: 14px;315 padding: 18px 26px;316 box-shadow: 6px 6px 0 rgba(20,24,20,0.28);317 display: flex;318 align-items: center;319 justify-content: space-between;320 gap: 24px;321 }322 .strip .eq {323 font-family: var(--display);324 font-weight: 700;325 font-size: 21px;326 line-height: 1.15;327 letter-spacing: -0.02em;328 text-transform: uppercase;329 }330 .strip .eq .lime { color: var(--lime); }331 .strip .side {332 font-family: var(--mono);333 font-weight: 500;334 font-size: 11px;335 line-height: 2;336 color: rgba(245,243,238,0.78);337 text-align: right;338 white-space: nowrap;339 }340 .strip .side strong { color: var(--lime); font-weight: 700; }341342 /* ---------- Pied ---------- */343 .foot {344 margin-top: auto;345 border-top: 2px dashed rgba(20,24,20,0.35);346 padding-top: 18px;347 display: flex;348 justify-content: space-between;349 align-items: flex-end;350 gap: 24px;351 }352 .def { max-width: 540px; }353 .def .term {354 font-family: var(--display);355 font-weight: 700;356 font-size: 22px;357 letter-spacing: -0.03em;358 }359 .def .phon {360 font-family: var(--mono);361 font-weight: 500;362 font-size: 11.5px;363 color: var(--ink-3);364 margin-left: 6px;365 }366 .def p {367 margin-top: 5px;368 font-size: 12.5px;369 line-height: 1.5;370 color: var(--ink-2);371 }372 .def p strong { color: var(--ink); }373 .contact {374 text-align: right;375 font-family: var(--mono);376 font-size: 11px;377 font-weight: 700;378 line-height: 1.9;379 color: var(--ink-2);380 white-space: nowrap;381 }382 .contact .big { font-size: 13px; color: var(--ink); }383384 /* ---------- Impression ---------- */385 @media print {386 html, body { background: none; padding: 0; }387 body { padding: 0; }388 .poster { box-shadow: none; min-height: 1380px; }389 .beams line { animation: none; }390 .chip .dot { animation: none; }391 @page { size: 860px 1380px; margin: 0; }392 }393</style>394</head>395<body>396 <div class="poster">397398 <!-- En-tête -->399 <header class="head">400 <div>401 <span class="wordmark">Lou<span class="kabox">Ka</span></span><br />402 <span class="by">by <span class="minika">Groupe <span class="minibox">KA</span></span></span>403 </div>404 <span class="url">www.lou-ka.com</span>405 </header>406407 <!-- Titre -->408 <p class="kicker">Agrégateur de logements locatifs · Québec</p>409 <h1>Tous les logements<br /><span class="outline">à louer.</span> <span class="hl">Un seul endroit.</span></h1>410 <p class="lede">411 <strong>Lou·Ka est l’agrégateur indépendant du locatif québécois :</strong>412 les annonces d’environ 74 gestionnaires immobiliers, normalisées,413 géolocalisées et synchronisées en continu. Une annonce retirée du site414 source disparaît du site — rien d’inventé, tout est traçable415 jusqu’à l’annonce originale.416 </p>417418 <!-- La figure d'agrégation -->419 <div class="figure">420 <div class="sources">421 <span class="src">gestionnaire-immo.qc</span>422 <span class="src">residences.qc</span>423 <span class="src">portail-annonces.ca</span>424 <span class="src">courtier-location.qc</span>425 <span class="src">gestion-locative.ca</span>426 <span class="src">immeubles.qc</span>427 <span class="src">appartements.qc</span>428 </div>429 <svg class="beams" viewBox="0 0 860 78" preserveAspectRatio="none" aria-hidden="true">430 <line x1="90" y1="6" x2="430" y2="76" />431 <line x1="205" y1="6" x2="430" y2="76" />432 <line x1="320" y1="6" x2="430" y2="76" />433 <line x1="430" y1="6" x2="430" y2="76" />434 <line x1="540" y1="6" x2="430" y2="76" />435 <line x1="655" y1="6" x2="430" y2="76" />436 <line x1="770" y1="6" x2="430" y2="76" />437 </svg>438 <div class="core">439 <span class="pill">108 connecteurs actifs</span>440 <div class="k">Lou<span class="box">Ka</span></div>441 <div class="eq">= tout le locatif, au même endroit</div>442 </div>443 </div>444445 <!-- Les caractéristiques -->446 <div class="features">447 <article class="feat">448 <span class="n">01</span>449 <h3>Recherche unifiée</h3>450 <p>451 Ville, secteur, taille (<strong>3½, 4½, 5½…</strong>), loyer,452 gestionnaire : un seul moteur pour interroger des dizaines de sites453 d’un coup.454 </p>455 </article>456 <article class="feat">457 <span class="n">02</span>458 <h3>Vue carte interactive</h3>459 <p>460 Chaque logement est <strong>géolocalisé</strong> : explorez le461 marché quartier par quartier, en carte ou en grille de résultats.462 </p>463 </article>464 <article class="feat">465 <span class="n">03</span>466 <h3>Baisses de prix suivies</h3>467 <p>468 L’<strong>historique des loyers</strong> est conservé : les469 baisses remontent d’elles-mêmes, et chaque annonce est située470 face au marché.471 </p>472 </article>473 <article class="feat">474 <span class="n">04</span>475 <h3>Zéro traceur</h3>476 <p>477 Aucun traceur publicitaire, aucun témoin tiers, aucune revente de478 données. <strong>On agrège des annonces, pas des personnes.</strong>479 </p>480 </article>481 </div>482483 <!-- Les chiffres -->484 <div class="stats">485 <span class="chip"><span class="dot"></span>7 000+ annonces en ligne</span>486 <span class="chip">108 connecteurs actifs</span>487 <span class="chip">~74 gestionnaires immobiliers</span>488 <span class="chip">mise à jour horaire</span>489 </div>490491 <!-- Bande manifeste -->492 <div class="strip">493 <p class="eq">494 Annonce retirée à la source<br />495 <span class="lime">= annonce retirée de Lou·Ka.</span>496 </p>497 <p class="side">498 Synchronisation <strong>horaire</strong>, jour et nuit<br />499 Chaque fiche renvoie à <strong>l’annonce originale</strong><br />500 Connexion unique <strong>KA ID</strong>, valide sur tout le groupe501 </p>502 </div>503504 <!-- Pied -->505 <footer class="foot">506 <div class="def">507 <span class="term">Lou·Ka</span><span class="phon">/lu.ka/ — « loue + agrège »</span>508 <p>509 <strong>1.</strong> Plateforme du Groupe KA dédiée au logement510 locatif. <strong>2.</strong> Première des sept plateformes ·Ka :511 Lou·Ka loge, Immo·Ka vend, Auto·Ka roule, Fabri·Ka fabrique,512 Food·Ka nourrit. « Tout ce qui finit en ·Ka agrège. »513 </p>514 </div>515 <div class="contact">516 <span class="big">www.lou-ka.com</span><br />517 by Groupe KA · www.groupe-ka.com<br />518 © 2026 Groupe KA · Québec519 </div>520 </footer>521 </div>522</body>523</html>524