interhack/2026.camp.public.website
12
1
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Compare commits

base: interhack:feat/new-design
Branches Tags
interhack:main
interhack:feat/new-design
interhack:fix/menu-order
interhack:feat/css-ajustements
..
compare: interhack:main
Branches Tags
interhack:feat/new-design
interhack:main
interhack:fix/menu-order
interhack:feat/css-ajustements

No commits in common. "feat/new-design" and "main" have entirely different histories.
feat/new-d ... main

34 changed files with 270 additions and 185 deletions
Show stats Expand all files Collapse all files

BIN
assets/Banquise-Regular.woff Normal file
View file

Binary file not shown.

BIN
assets/Dymo.ttf Normal file
View file

Binary file not shown.

BIN
assets/Erika-Type.ttf Normal file
View file

Binary file not shown.

BIN
assets/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

0
assets/logos/datapaulette.jpg → assets/datapaulette.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
assets/fonts/MonTrappist-Black.woff
View file

Binary file not shown.

BIN
assets/fonts/segoesc.ttf
View file

Binary file not shown.

0
assets/logos/fuz.png → assets/fuz.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 118 KiB

After

Width:  |  Height:  |  Size: 118 KiB

0
assets/logos/hackstub.svg → assets/hackstub.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

0
assets/logos/lebib.png → assets/lebib.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
assets/logos/lqdn.png → assets/lqdn.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
assets/notebook.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/paper.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/stickers/arbre-hetre.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/stickers/bac-e2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/stickers/clavier.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/stickers/clef.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
assets/stickers/ecran.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
assets/stickers/ecran.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/stickers/ferasouder.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
assets/stickers/foin.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/stickers/machineacoudre.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
assets/stickers/machineacoudre.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/stickers/tracteur.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
assets/stickers/tracteur.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

134
css/base.css
View file

@ -1,30 +1,21 @@
/* Primary Font */
@font-face { @font-face {
font-family: MonTrappist; font-family: Banquise;
src: url(../assets/fonts/MonTrappist-Black.woff); src: url(../assets/Banquise-Regular.woff);
} }
/* Secondary Font */
@font-face { @font-face {
font-family: Segoesc; font-family: Dymo;
src: url(../assets/fonts/segoesc.ttf); src: url(../assets/Dymo.ttf);
} }
:root { @font-face {
--primary-bg-color: black; /* global scope */ font-family: Erika;
--accent-violet: #8800FF; src: url(../assets/Erika-Type.ttf);
--accent-yellow: #ffbf3e;
--accent-orange: #FF4E00 ;
--accent-minor-blue: #33D8D8;
--text-color-primary: #FFFFFF;
} }
html, body { html, body {
height: 100%;
margin: 0; margin: 0;
font-family: "Verdana", "Helvetica", "Arial", sans-serif;
color: var(--text-color-primary);
background: var(--primary-bg-color);
} }
img { img {
@ -32,83 +23,45 @@ img {
} }
a { a {
color: var(--accent-yellow);
text-decoration: none; text-decoration: none;
color: black;
} }
main {
/* background-color: #413f43;*/
background: #058C9E;
background: radial-gradient(at left top, #058C9E, #BC5180);
/* background-repeat: no-repeat;
background-size: cover; */
}
main h1, main h2, main h3 { main h1, main h2, main h3 {
font-family: MonTrappist; font-family: Banquise;
color: white; color: white;
z-index: 20; z-index: 2;
} }
main h1 { main h1 {
position: relative; font-size: 8em;
text-align: center;
margin: auto;
width: 50%;
font-size: clamp(4em, 14vw, 8em);
margin-top: 5%;
max-width: 1400px;
}
main h2 {
position: relative;
margin: 4% auto;
text-align: center;
font-size: clamp(1.5em, 4vw, 3em);
font-family: segoesc;
}
main h3 {
position: relative;
text-align: center;
margin: auto;
width: 100%;
font-size: clamp(2em, 4vw, 4em);
margin-top: 5%;
}
main p {
margin: 1%;
padding: 1%;
/* border: solid 1px; */
opacity: 0.90;
display: inline-block;
z-index: 3;
background-color: black;
}
section {
position: relative ;
max-width: 1400px;
font-size: 2em;
text-align:justify;
margin: auto;
margin-bottom: 100px;
padding: 2%;
padding-left: 0px;
z-index: 1000;
box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet);
} }
nav, footer, aside { nav, footer, aside {
background: var(--accent-violet); background: #d7d7d7;
background: url(../assets/paper.avif);
padding: 5px; padding: 5px;
font-family: MonTrappist; font-family: Erika;
z-index: 10000; z-index: 10000;
position: relative; position: relative;
} opacity: 0.95;
box-shadow: 0px 0px 10px #00000070;
nav {
padding-left: 10%;
} }
nav a, footer a, aside a { nav a, footer a, aside a {
font-family: Dymo;
font-size: 3em; font-size: 3em;
display: inline-block; display: inline-block;
margin: 0.1em 0.3em; margin-right: 1em;
} }
nav a.current { nav a.current {
@ -119,6 +72,8 @@ footer a:hover, nav a:hover {
transform: rotate(-2deg); transform: rotate(-2deg);
} }
footer { footer {
display: block; display: block;
text-align: center; text-align: center;
@ -133,32 +88,3 @@ footer {
align-items: center; align-items: center;
} }
} }
main > img {
object-fit: scale-down;
}
.btn-nice {
color: #FFFFFF;
text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet);
color: var(--accent-yellow);
font-size: 1.2em;
text-align: center;
margin: auto;
position: relative;
display: block;
}
#camp {
font-family: segoesc;
float: left;
margin-left: 10%;
line-height: 0.8em;
}
#interhack {
text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet);
color: var(--accent-yellow);
margin-right: 10%;
line-height: 0.5em;
}

6
css/drag.css
View file

@ -1,10 +1,10 @@
main img.draggable { main img.draggable {
max-width: 200px; max-width: 150px;
max-height: 200px; max-height: 150px;
position: absolute; position: absolute;
z-index: 1; filter: saturate(2);
} }

112
css/guide.css Normal file
View file

@ -0,0 +1,112 @@
body {
background-image: radial-gradient(at left top, #058C9E, #BC5180);
background-repeat: no-repeat;
background-attachment: fixed;
}
main {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
background: none;
padding-bottom: 100px;
font-family: Erika;
line-height: 1.5;
}
main > * {
width: 100%;
background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white;
box-sizing: border-box;
margin: 0;
background-size: 100% auto;
padding-bottom: 1em;
filter: drop-shadow(5px 3px 2px #000000b7);
padding-left: 15px;
padding-right: 15px;
z-index: 1;
position: relative;
max-width: 100%;
}
main > img {
object-fit: scale-down;
}
main > .sticker {
background: none;
z-index: 0;
}
main > *.draggable:not(.sticker) {
&:not(h2) {
width: 100%;
}
&:not(h1):not(h2):hover {
animation: none;
}
}
main ul,
main ol,
main dl {
padding-left: calc(1em + 15px);
}
main h1 {
text-align: center;
font-size: 4rem;
}
main h1,
main h2 {
background: none;
padding-top: 1.5em;
padding-left: 0;
padding-right: 0;
}
@media screen and (max-width: 800px) {
main h2 {
padding-left: 1em;
}
}
main h1 + *,
main h2 + * {
padding-top: 1em;
}
main h1 small {
display: block;
background: url(../assets/notebook.jpg);
color: black;
font-family: Erika;
font-size: 2.5rem;
width: fit-content;
max-width: 90%;
margin-left: auto;
margin-right: auto;
transform: translateY(-0.3em) rotate(-2deg);
}
main pre {
white-space: pre-wrap;
}
main a {
text-decoration: underline;
color: teal;
}
main a:visited {
color: rebeccapurple;
}
footer {
padding: 1em;
}

54
css/home.css
View file

@ -1,9 +1,63 @@
main {
display: block;
color: black;
overflow: hidden;
width: 100%;
min-height: 1000px;
}
main h1 {
position: relative;
text-align: center;
margin: auto;
width: 100%;
font-size: clamp(4em, 14vw, 8em);
margin-top: 5%;
}
main h2 {
position: relative;
margin: 4% auto;
text-align: center;
font-size: clamp(2.5em, 5vw, 4em);
}
main h3 {
position: relative;
text-align: center;
margin: auto;
width: 100%;
font-size: clamp(2em, 4vw, 4em);
margin-top: 5%;
}
main p {
margin: 1%;
padding: 1%;
background: white;
background: url(../assets/notebook.jpg);
/* border: solid 1px; */
opacity: 0.92;
display: inline-block;
z-index: 3;
}
section {
max-width: 1400px;
font-size: 1.5em;
text-align: center;
font-family: Erika;
margin: auto;
margin-bottom: 100px;
padding: 2%;
}
.logo { .logo {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 7em ; max-width: 7em ;
padding: 0.2em; padding: 0.2em;
background-color:rgba(99, 99, 99, 0.2);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin: 1em; margin: 1em;
z-index: 2; z-index: 2;

1
css/poster.css
View file

@ -16,7 +16,6 @@ main {
box-shadow: 5px 5px 5px #00000085; box-shadow: 5px 5px 5px #00000085;
margin: 50px auto; margin: 50px auto;
position: relative; position: relative;
background: var(--primary-bg-color);
} }
@page { @page {

48
guide.template.html
View file

@ -16,46 +16,32 @@ BISOUS
<link rel="stylesheet" href="css/guide.css"> <link rel="stylesheet" href="css/guide.css">
<link rel="stylesheet" href="css/drag.css"> <link rel="stylesheet" href="css/drag.css">
<script src="js/drag.js" defer></script> <script src="js/drag.js" defer></script>
<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
<title>Guide Interhack Camp 2026</title> <title>Guide Interhack Camp 2026</title>
</head> </head>
<body id="page-guide"> <body id="page-guide">
<nav> <nav>
<a href="index.html">maison</a> <a href="index.html">home</a>
<a href="guide.html" class="current">guide</a> <a href="guide.html" class="current">guide</a>
<a href="poster.html">poster</a> <a href="poster.html">poster</a>
</nav> </nav>
<main> <main>
<img class="draggable randomStart " src="assets/stickers/ecran.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/tracteur.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/ecran.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/tracteur.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/ecran.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart " src="assets/stickers/tracteur.png" alt=""> <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
<h1> <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
<span id="camp" class="draggable">camp</span>
<br>
<span id="interhack" class="draggable">interhack</span>
</h1>
<h2>
<span class="draggable">Informations pratiques</span>
</h2>
<section>
<!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA --> <!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
</section>
</main> </main>
<footer> <footer>
<div> <div>

59
index.html
View file

@ -7,37 +7,38 @@
<link rel="stylesheet" href="css/home.css"> <link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/drag.css"> <link rel="stylesheet" href="css/drag.css">
<script src="js/drag.js" defer></script> <script src="js/drag.js" defer></script>
<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png"> <title>Camp Interhack 2026</title>
<title>Camp Interhack</title>
</head> </head>
<body> <body>
<nav> <nav>
<a href="index.html" class="current">maison</a> <a href="index.html" class="current">home</a>
<a href="guide.html">guide</a> <a href="guide.html">guide</a>
<a href="poster.html">poster</a> <a href="poster.html">poster</a>
</nav> </nav>
<main> <main>
<img class="draggable randomStart" src="assets/stickers/ecran.png" alt=""> <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" 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/ecran.png" alt=""> <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" 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/ecran.png" alt=""> <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" 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> <h1>
<span id="camp" class="draggable">camp</span> <span class="draggable">Camp</span>
<br> <span class="draggable">Interhack</span>
<span id="interhack" class="draggable">interhack</span> <span class="draggable">2026</span>
</h1> </h1>
<h2> <h2>
@ -90,20 +91,20 @@
<span>Iels y participent</span> <span>Iels y participent</span>
</h3> </h3>
<div class="participants"> <section class="participants">
<a href="https://lqdn.fr"> <a href="https://lqdn.fr">
<img class="logo" src="assets/logos/lqdn.png" alt="La Quadrature Du Net"> <img class="logo" src="assets/lqdn.png" alt="La Quadrature Du Net">
</a> </a>
<a href="https://datapaulette.org/"> <a href="https://datapaulette.org/">
<img class="logo" src="assets/logos/datapaulette.jpg" alt="Datapaulette"> <img class="logo" src="assets/datapaulette.jpg" alt="Datapaulette">
</a> </a>
<a href="https://lebib.org"><img class="logo" src="assets/logos/lebib.png" alt="Le Bib Net"></a> <a href="https://lebib.org"><img class="logo" src="assets/lebib.png" alt="Le Bib Net"></a>
</div> </section>
<div class="participants"> <section class="participants">
<a href="https://hackstub.eu/"><img class="logo" src="assets/logos/hackstub.svg" alt="La Hackstub"></a> <a href="https://hackstub.eu/"><img class="logo" src="assets/hackstub.svg" alt="La Hackstub"></a>
<a href="https://fuz.re"><img class="logo" src="assets/logos/fuz.png" alt="Le Fuz"></a> <a href="https://fuz.re"><img class="logo" src="assets/fuz.png" alt="Le Fuz"></a>
</div> </section>
</main> </main>
<footer> <footer>
<div> <div>

15
js/drag.js
View file

@ -1,6 +1,10 @@
const stepSize = 1; const stepSize = 100;
const main = document.querySelector('main'); const main = document.querySelector('main');
for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) {
guideDraggable.classList.add("draggable");
}
const draggables = document.querySelectorAll(".draggable"); const draggables = document.querySelectorAll(".draggable");
const randomStarts = document.querySelectorAll(".randomStart"); const randomStarts = document.querySelectorAll(".randomStart");
@ -9,8 +13,8 @@ var zIndex = 2;
activateDraggables(); activateDraggables();
/** /**
* *
* @param {number} n * @param {number} n
* @returns {number} * @returns {number}
*/ */
function stepedSize(n) { function stepedSize(n) {
@ -20,6 +24,8 @@ function stepedSize(n) {
function move(e) { function move(e) {
e.preventDefault(); e.preventDefault();
let target = e.target; let target = e.target;
target.style['z-index'] = zIndex;
zIndex++;
target.moving = true; target.moving = true;
@ -62,14 +68,13 @@ function activateDraggables() {
} }
function randomizeDragables() { function randomizeDragables() {
maxX = main.offsetWidth - 250; maxX = main.offsetWidth - 150;
maxY = main.offsetHeight - 150; maxY = main.offsetHeight - 150;
for (var randomStart of randomStarts) { for (var randomStart of randomStarts) {
randX = Math.floor(Math.random() * maxX); randX = Math.floor(Math.random() * maxX);
randY = Math.floor(Math.random() * maxY); randY = Math.floor(Math.random() * maxY);
randomStart.style.left = randX + "px"; randomStart.style.left = randX + "px";
randomStart.style.top = randY + "px"; randomStart.style.top = randY + "px";
randomStart.style.rotate = Math.floor(Math.random() * 61) - 30 + "deg";
} }
} }

26
poster.html
View file

@ -7,13 +7,12 @@
<link rel="stylesheet" href="css/poster.css"> <link rel="stylesheet" href="css/poster.css">
<link rel="stylesheet" href="css/drag.css"> <link rel="stylesheet" href="css/drag.css">
<script src="js/drag.js" defer></script> <script src="js/drag.js" defer></script>
<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
<title>Camp Interhack 2026 – Poster</title> <title>Camp Interhack 2026 – Poster</title>
</head> </head>
<body> <body>
<nav> <nav>
<a href="index.html">maison</a> <a href="index.html">home</a>
<a href="guide.html" >guide</a> <a href="guide.html" >guide</a>
<a href="poster.html" class="current">poster</a> <a href="poster.html" class="current">poster</a>
</nav> </nav>
@ -21,20 +20,23 @@
<aside> <aside>
<a href="javascript:if(window.print)window.print()" class="print">🖨️ imprimer</a> <a href="javascript:if(window.print)window.print()" class="print">🖨️ imprimer</a>
<section> <section>
<p> <p>
Vous pouvez arranger vous mêmes votre affiche en bougeant les informations et les autocollants ! Vous pouvez arranger vous mêmes votre affiche en bougeant les informations et les autocollants !
</p> </p>
</section> </section>
</aside> </aside>
<main> <main>
<img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/ecran.png" alt=""> <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt=""> <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt=""> <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
<img class="draggable randomStart" src="assets/stickers/tracteur.png" 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> <h1>
<span class="draggable text">Camp</span> <span class="draggable text">Camp</span>