27 lines
3 KiB
HTML
27 lines
3 KiB
HTML
|
<section id="fonctionnement" data-transition="fade" style="background:#F6F7F0;color:#3E5550;font-family:'IBM Plex Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:64px">
|
|||
|
|
<div style="display:flex;flex-direction:column;gap:16px">
|
|||
|
|
<p style="font-size:24px;letter-spacing:3px;text-transform:uppercase;color:#176754;font-weight:600">Comment ça marche</p>
|
|||
|
|
<h2 style="font-family:'Source Serif 4', Georgia, serif;font-size:64px;font-weight:400;line-height:1.1;color:#152F2C">En une image.</h2>
|
|||
|
|
</div>
|
|||
|
|
<div style="display:flex;gap:24px;align-items:stretch">
|
|||
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#FDFDFA;border:1px solid #D5DFD7;border-radius:16px;padding:44px">
|
|||
|
|
<p style="font-family:'Source Serif 4', Georgia, serif;font-size:48px;line-height:1.1;color:#176754">Un plan</p>
|
|||
|
|
<p style="font-size:30px;line-height:1.45">Quelques fichiers texte qui disent ce dont l’organisation a besoin.</p>
|
|||
|
|
</div>
|
|||
|
|
<x-shape kind="arrow-right" style="width:80px;height:44px;background:#C59C56;flex:none;align-self:center"></x-shape>
|
|||
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#102E28;border-radius:16px;padding:44px">
|
|||
|
|
<p style="font-family:'Source Serif 4', Georgia, serif;font-size:48px;line-height:1.1;color:#B9EED2">Le moteur</p>
|
|||
|
|
<p style="font-size:30px;line-height:1.45;color:#CFDDD3">Déduit tout le reste : adresses, pare-feu, certificats, ordre d’installation.</p>
|
|||
|
|
</div>
|
|||
|
|
<x-shape kind="arrow-right" style="width:80px;height:44px;background:#C59C56;flex:none;align-self:center"></x-shape>
|
|||
|
|
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#FDFDFA;border:1px solid #D5DFD7;border-radius:16px;padding:44px">
|
|||
|
|
<p style="font-family:'Source Serif 4', Georgia, serif;font-size:48px;line-height:1.1;color:#176754">Un écosystème</p>
|
|||
|
|
<p style="font-size:30px;line-height:1.45">Vivant, sur des serveurs Linux, prêt à servir.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p style="font-size:36px;line-height:1.4;color:#152F2C;text-align:center">On modifie le plan, jamais les machines à la main.</p>
|
|||
|
|
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5F716B">Set-OPS · Rencontres Linux du Québec 2026</p>
|
|||
|
|
<p style="position:absolute;right:128px;bottom:64px;width:120px;text-align:right;font-size:24px;color:#5F716B">06</p>
|
|||
|
|
<aside>Comment ça marche, en une image. À gauche, un plan : quelques fichiers texte où l’on écrit ce dont l’organisation a besoin. Au milieu, le moteur : il en déduit tout le reste — les adresses de chaque machine, les règles de chaque pare-feu, les certificats, l’ordre dans lequel installer les services. À droite, un écosystème vivant, sur des serveurs Linux. La règle d’or : on modifie le plan, jamais les machines à la main. C’est ce qui permet de tout reconstruire, et de transmettre l’ensemble à quelqu’un d’autre. Pour ceux qui veulent les détails : l’inventaire Ansible est généré, et un seul nombre par organisation suffit à dériver tout son adressage ; j’en parle volontiers après.</aside>
|
|||
|
|
</section>
|