first draft version

base.css

@@ -0,0 +1,54 @@
+@font-face {
+    font-family: Banquise;
+    src: url(assets/Banquise-Regular.woff);
+}
+
+@font-face {
+    font-family: Dymo;
+    src: url(assets/Dymo.ttf);
+}
+
+@font-face {
+    font-family: Erika;
+    src: url(assets/Erika-Type.ttf);
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+main {
+    background-color: #413f43;
+    background-image: url(assets/background.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+main h1, main h2 {
+    font-family: Banquise;
+    color: white;
+}
+
+main h1 {
+    font-size: 8em;
+}
+
+nav, footer, aside {
+    background: #d7d7d7;
+    background: url(assets/paper.avif);
+    padding: 5px;
+    font-family: Erika;
+}
+
+nav a, footer a, aside a {
+    font-family: Dymo;
+    font-size: 3em;
+}
+

drag.css

@@ -0,0 +1,28 @@
+
+
+main img.draggable {
+    max-width: 150px;
+    max-height: 150px;
+    position: absolute;
+    filter: saturate(2);
+}
+
+
+.draggable {
+    cursor: move;
+    position: relative;
+    width: fit-content;
+    user-select: none;
+    z-index: 1;
+    filter: drop-shadow(5px 3px 2px #000000b7);
+}
+
+span.draggable {
+    display: inline-block;
+    /* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
+}
+
+.draggable[data-moving="1"] {
+    transform: rotate(-3deg);
+    filter: drop-shadow(15px 15px 6px #20202052);
+}

drag.js

@@ -0,0 +1,89 @@
+const stepSize = 100;
+const main = document.querySelector('main');
+const draggables = document.querySelectorAll(".draggable");
+const randomStarts = document.querySelectorAll(".randomStart");
+
+var zIndex = 2;
+
+activateDraggables();
+
+/**
+ * 
+ * @param {number} n 
+ * @returns {number}
+ */
+function stepedSize(n) {
+    return stepSize * Math.round(n / stepSize);
+}
+
+function move(e) {
+    e.preventDefault();
+    let target = e.target;
+    target.style['z-index'] = zIndex;
+    zIndex++;
+
+    target.moving = true;
+
+    target.setAttribute('data-moving', '1');
+
+    if (e.clientX) {
+        target.oldX = e.clientX; // If they exist then use Mouse input
+        target.oldY = e.clientY;
+    } else {
+        target.oldX = e.touches[0].clientX; // Otherwise use touch input
+        target.oldY = e.touches[0].clientY;
+    }
+
+    target.oldLeft = window.getComputedStyle(target).getPropertyValue('left').split('px')[0] * 1;
+    target.oldTop = window.getComputedStyle(target).getPropertyValue('top').split('px')[0] * 1;
+
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('touchmove', drag, {passive: true});
+
+    function drag(event) {
+        event.preventDefault();
+
+        if (!target.moving) {
+            return;
+        }
+        if (event.clientX) {
+            target.distX = event.clientX - target.oldX;
+            target.distY = event.clientY - target.oldY;
+        } else {
+            target.distX = event.touches[0].clientX - target.oldX;
+            target.distY = event.touches[0].clientY - target.oldY;
+        }
+
+        newLeft = target.oldLeft + target.distX;
+        newTop  = target.oldTop + target.distY;
+        target.style.left = stepedSize(newLeft) + "px";
+        target.style.top = stepedSize(newTop) + "px";
+    }
+
+    function endDrag() {
+        target.moving = false;
+        target.setAttribute('data-moving', '0');
+    }
+    document.addEventListener('mouseup', endDrag)
+    document.addEventListener('touchend', endDrag)
+}
+
+function activateDraggables() {
+    for (var draggable of draggables) {
+        draggable.addEventListener('mousedown', move);
+        draggable.addEventListener('touchstart', move, {passive: true});
+    }
+}
+
+function randomizeDragables() {
+    maxX = main.offsetWidth - 150;
+    maxY = main.offsetHeight - 150;
+    for (var randomStart of randomStarts) {
+        randX = Math.floor(Math.random() * maxX);
+        randY = Math.floor(Math.random() * maxY);
+        randomStart.style.left = randX + "px"; 
+        randomStart.style.top = randY + "px";
+    }
+}
+
+document.addEventListener("DOMContentLoaded", randomizeDragables);

home.css

@@ -0,0 +1,49 @@
+main {
+    display: block;
+    color: black;
+    overflow: hidden;
+    width: 100%;
+    min-height: 1000px;
+}
+
+footer {
+    display: block;
+    height: 100px;
+    text-align: center;
+}
+
+main h1 {
+    position: relative;
+    text-align: center;
+    margin: auto;
+    width: 100%;
+    font-size: 8em;
+    margin-top: 5%;
+}
+
+main h2 {
+    margin: 4% auto;
+    text-align: center;
+    font-size: 4em;
+}
+
+main p {
+    margin: 1%;
+    padding: 1%;
+    background: white;
+    background: url(assets/notebook.jpg);
+    /* border: solid 1px; */
+    opacity: 0.92;
+    display: inline-block;
+}
+
+section {
+    max-width: 1400px;
+    font-size: 1.5em;
+    text-align: center;
+    font-family: Erika;
+    margin: auto;
+    margin-bottom: 100px;
+    columns: 560px;
+    padding: 2%;
+}

index.html

@@ -0,0 +1,96 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="base.css">
+    <link rel="stylesheet" href="home.css">
+    <link rel="stylesheet" href="drag.css">
+    <script src="drag.js" defer></script>
+    <title>stickers</title>
+</head>
+
+<body>
+    <nav>
+        <a href="index.html">home</a>
+        <a href="poster.html">poster</a>
+    </nav>
+    <main>
+
+        <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
+
+        <h1>
+            <span class="draggable">Camp</span>
+            <span class="draggable">Interhack</span>
+            <span class="draggable">2026</span>
+        </h1>
+
+        <h2>
+            <span class="draggable">du 5 au 9 Juillet</span>
+            <span class="draggable">à l'Antenne</span>
+        </h2>
+
+
+        <section>
+            <p class="draggable">Il est venu le temps du Camp Interhack !<br>
+                Un grand rassemblement des membres et ami.e.s des hackerspaces de France, pour partager des
+                connaissances, questionner nos techniques, et réinventer ensemble nos manières de faire vivre.</p>
+
+            <p class="draggable">Durant quatre jours, L’Interhack investit L'Antenne (Sévérac - 44) pour transformer ce
+                lieu en terrain
+                d’expérimentations et de rencontres : des ateliers, des tables rondes, des démonstrations, des
+                installations, des concerts, des projections et des moments informels — le tout imaginé, fabriqué et
+                animé par et pour la communauté.</p>
+
+            <p class="draggable">Ici, on parle autant de machines que de mécaniques humaines, de savoir-faire artisanaux
+                que de
+                technologies numériques, de détournement que de réappropriation, d’éducation populaire que de poésie du
+                quotidien.</p>
+
+            <p class="draggable">Le Camp InterHack, c’est aussi un espace pour ajouter de l’intime et du sensible aux
+                techniques, pour
+                explorer la ruralité comme terrain fertile d’innovation, et pour déconstruire les rapports de domination
+                qui traversent nos outils, nos corps et nos collectifs.</p>
+
+            <p class="draggable">On vient ici pour apprendre, fabriquer, détourner, réparer, hacker les structures
+                autant que les
+                imaginaires.<br>
+                On y croise des bricoleur·euses, des artistes, des chercheur·euses, des paysan·nes, des codeur·euses,
+                des rêveur·euses.<br>
+                On y célèbre la diversité des hack(h)eureuses et des formes de hacking, loin de l’image du hacker
+                solitaire, blanc et capuché derrière son écran.</p>
+
+            <p class="draggable">Le programme se compose au fil des propositions : chacun·e est invité·e à contribuer,
+                qu’il s’agisse
+                d’une idée naissante ou d’un projet longuement mûri. Les croisements entre les pratiques, les
+                disciplines et les vécus sont encouragés — parce que c’est là que se fabrique la richesse du commun.</p>
+
+            <p class="draggable">Venez participer à quatre jours d’autonomie joyeuse, de curiosité partagée et de
+                réinvention
+                collective.<br>
+                Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
+                chacun·es.</p>
+
+        </section>
+    </main>
+    <footer>
+        footer
+    </footer>
+</body>
+
+</html>

poster.css

@@ -0,0 +1,33 @@
+
+body {
+    background: #434343;
+}
+
+aside {
+    background: url(assets/notebook.jpg);
+    width: fit-content;
+}
+
+main {
+    overflow: hidden;
+    max-width: 21cm;
+    aspect-ratio: 1 / 1.414;
+    box-shadow: 5px 5px 5px #00000085;
+    margin: 50px auto;
+    position: relative;
+}
+
+@page {
+    size: portrait;
+    margin: 0;
+}
+
+@media print {
+    body main {
+        margin: 0 !important;
+    }
+
+    aside, footer, nav {
+        display: none;
+    }
+}

poster.html

@@ -0,0 +1,40 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="base.css">
+    <link rel="stylesheet" href="poster.css">
+    <link rel="stylesheet" href="drag.css">
+    <script src="drag.js" defer></script>
+    <title>stickers</title>
+</head>
+
+<body>
+    <nav>
+        <a href="index.html">home</a>
+        <a href="poster.html">poster</a>
+    </nav>
+    <aside>
+        <a href="javascript:if(window.print)window.print()" class="print">🖨️ imprimer</a>
+    </aside>
+    <main>
+        <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
+
+        <h1>
+            <span class="draggable text">Camp</span>
+            <span class="draggable text">Interhack</span>
+            <span class="draggable">2026</span>
+        </h1>
+
+    </main>
+</body>
+
+</html>