publication site web

index.html

@@ -17,33 +17,35 @@
     <article id="tournoi"> <a name="tournoi" > </a><h2>Les tournois du Pic</h2>
     <ul class="tournoi">
       <li> <iframe id="haWidget" allowtransparency="true" src="https://www.helloasso.com/associations/le-pic-ludique/evenements/tournoi-seven-wonders/widget-vignette" style="width:350px;border:none;" onload="window.addEventListener( 'message', function(e) { const dataHeight = e.data.height; const haWidgetElement = document.getElementById('haWidget'); haWidgetElement.height = dataHeight + 'px'; } )"></iframe><a  class="reglement" target="ADJTournoi" href="assets/Reglement7Wonders.pdf">Règlement</a>
-      <li> <iframe id="haWidget" allowtransparency="true" src="https://www.helloasso.com/associations/le-pic-ludique/evenements/avalanche-de-jeux-tournoi-harmonies/widget-vignette" style="width:350px;border:none;" onload="window.addEventListener( 'message', function(e) { const dataHeight = e.data.height; const haWidgetElement = document.getElementById('haWidget'); haWidgetElement.height = dataHeight + 'px'; } )"></iframe>
+      <li> <iframe id="haWidget" allowtransparency="true" src="https://www.helloasso.com/associations/le-pic-ludique/evenements/avalanche-de-jeux-tournoi-harmonies/widget-vignette" style="width:350px;border:none;" onload="window.addEventListener( 'message', function(e) { const dataHeight = e.data.height; const haWidgetElement = document.getElementById('haWidget'); haWidgetElement.height = dataHeight + 'px'; } )"></iframe><a  class="reglement" target="ADJTournoi" href="assets/ReglementHArmonies.pdf">Règlement</a>
       <li> <iframe id="haWidget" allowtransparency="true" src="https://www.helloasso.com/associations/le-pic-ludique/evenements/avalanche-de-jeux-tournoi-faraway/widget-vignette" style="width:350px;border:none;" onload="window.addEventListener( 'message', function(e) { const dataHeight = e.data.height; const haWidgetElement = document.getElementById('haWidget'); haWidgetElement.height = dataHeight + 'px'; } )"></iframe><a  class="reglement" target="ADJTournoi" href="assets/ReglementFaraway.pdf">Règlement</a>
-      <li><img class="tournoi" src="assets/skyjo.jpg"></img> <p class="lititle">Tournoi Skyjo </p><p>Si vous avez encore envie d'un tournoi le dimanche, inscription sur place à l'accueil.</p><a  class="reglement" target="ADJTournoi" href="Tournoi_multijeux.pdf">Règlement</a>
+      <li><img class="tournoi" src="assets/skyjo.jpg"></img> <p class="lititle">Tournoi Skyjo </p><p>Si vous avez encore envie d'un tournoi le dimanche,<br/> inscription sur place à l'accueil.</p><a  class="reglement" target="ADJTournoi" href="Tournoi_multijeux.pdf">Règlement</a>
     </ul>
     </article>
     
     <article id="quoi"> <a name="quoi" > </a><h2>Programme - Bivouac Ludique</h2>
     <p> <ul class="Programme">
-    <li><span class="lititle">Vendredi 23 janvier :</span>Jeux libres dans toute la salle et défi des joueurs de 20h à minuit. Les associations et professionnels du jeu de la région viendront s'affronter autour d'un relais de jeux.
-   <li><span class="lititle">Samedi 24 janvier :</span> Jeux libres dans toute la salle et tournois des joueurs à partir de 10h. Venez jouer jusqu'au bout de la nuit ! Les portes du festival restent ouvertes non-stop pour les noctambules.
-  <li><span class="lititle">Dimanche 25 janvier :</span> Les animations pour enfants seront concentrées le dimanche, dont du jeu de rôle adapté à leur âge. Le dernier tournoi du festival sera sur le jeu Skyjo avec inscription à l'accueil.
-  <li class="max-width" ><span class="lititle">Tout au long du week-end</span> 
-  Des centaines de jeux en libre accès et diverses animations comme : 
-  <ul class="subul"> <li><span class="lititle">Les Loups-Garous de Thiercelieux :</span> Le hameau de Thiercelieux semble en apparence normal, mais il est en proie à de cruelles attaques. Chaque nuit, certains villageois se transforment en loups-garous pour décimer les autres villageois. Le matin venu, une victime est découverte dévorée, et le village se réunit pour tenter de démasquer les loups-garous qui s'y cachent.</ul>
-  Il y aura du jeu de rôle par session unique d'environ 2 heures, pour joueurs débutants ou initiés. Inscriptions sur place à l'accueil. 
-  <ul class="subul"> <li><span class="lititle">Donjons et Dragons : </span>explorez des mondes fantastiques et des royaumes oubliés, dans la peau d'un elfe, d'un nain ou d'un orc, à moins que vous ne préfériez rester humain. Serez-vous doté de pouvoirs druidiques ou de capacités occultes, ou vous sentez-vous l'âme d'un barde ou d'un guerrier ?
+    <li><img class="enluminure" src="assets/calendar.jpeg"/> <span class="lititle">Vendredi 23 janvier :</span> Jeux libres dans toute la salle et défi des joueurs de 20h à minuit. Les associations et professionnels du jeu de la région viendront s'affronter autour d'un relais de jeux.
+   <li><img class="enluminure" src="assets/calendar.jpeg"/><span class="lititle">Samedi 24 janvier :</span> Jeux libres dans toute la salle et tournois des joueurs à partir de 10h. Venez jouer jusqu'au bout de la nuit ! Les portes du festival restent ouvertes non-stop pour les noctambules.
+  <li><img class="enluminure" src="assets/calendar.jpeg"/><span class="lititle">Dimanche 25 janvier :</span> Les animations pour enfants seront concentrées le dimanche, dont du jeu de rôle adapté à leur âge. Le dernier tournoi du festival sera sur le jeu Skyjo avec inscription à l'accueil.
+  </ul>
 
-<li><span class="lititle">Star Wars : </span>Il y a bien longtemps, dans une galaxie lointaine, très lointaine... La résistance s'organise ! Incarnerez-vous un vaurien aux prises avec la pègre de Tatooine, un contrebandier au grand cœur ou un pilote de X-Wing combattant l'Empire au péril de sa vie ?
+ <div class="titreparagraphe"><span class="lititle">Et tout au long du week-end : </span>  <br/>Des centaines de jeux en libre accès et diverses animations comme : </div>
+  <ul > <li><img class="enluminure" src="assets/loupgarou.jpg"/><span class="lititle">Les Loups-Garous de Thiercelieux :</span> Le hameau de Thiercelieux semble en apparence normal, mais il est en proie à de cruelles attaques. Chaque nuit, certains villageois se transforment en loups-garous pour décimer les autres villageois. Le matin venu, une victime est découverte dévorée, et le village se réunit pour tenter de démasquer les loups-garous qui s'y cachent.
+  <li><span class="lititle">Jeux à identités cachés :</span> L'animateur proposera des jeux à identités cachés. Trahissez, dévinez votre équipe entre amis et ennemis.</ul>
+ <div class="titreparagraphe"> <span class="lititle">Jeu de rôle : </span>par session unique d'environ 2 heures, pour joueurs débutants ou initiés. Inscriptions sur place à l'accueil. </div>
+  <ul >
+  <li><img class="enluminure" src="assets/detd.jpeg"/><span class="lititle">Donjons et Dragons : </span>explorez des mondes fantastiques et des royaumes oubliés, dans la peau d'un elfe, d'un nain ou d'un orc, à moins que vous ne préfériez rester humain. Serez-vous doté de pouvoirs druidiques ou de capacités occultes, ou vous sentez-vous l'âme d'un barde ou d'un guerrier ?
 
-<li><span class="lititle">Avatar le Dernier Maître de l’Air : </span>formez un groupe de héros des Quatre Nations chargés d'œuvrer pour le bien commun en faisant progresser l’harmonie sans perdre votre propre équilibre. Apprenez à maîtriser l'air, le feu, l'eau ou la terre, à moins que vous ne préfériez manier les armes ou les gadgets technologiques ! 
+<li><img class="enluminure" src="assets/starwars.jpeg"/><span class="lititle">Star Wars : </span>Il y a bien longtemps, dans une galaxie lointaine, très lointaine... La résistance s'organise ! Incarnerez-vous un vaurien aux prises avec la pègre de Tatooine, un contrebandier au grand cœur ou un pilote de X-Wing combattant l'Empire au péril de sa vie ?
 
-<li><span class="lititle">Les Chants de Tindalos : </span>Bath, ville portuaire du Maine chargée de secrets, dans les années 1920. Affrontez l'horreur en évitant de succomber aux crises de folie qui vous guettent ! Il vous faudra garder votre sang-froid pour élucider ces mystères lovecraftiens.
+<li><img class="enluminure" src="assets/avatar.jpeg"/><span class="lititle">Avatar le Dernier Maître de l’Air : </span>formez un groupe de héros des Quatre Nations chargés d'œuvrer pour le bien commun en faisant progresser l’harmonie sans perdre votre propre équilibre. Apprenez à maîtriser l'air, le feu, l'eau ou la terre, à moins que vous ne préfériez manier les armes ou les gadgets technologiques ! 
 
-<li><span class="lititle">Numenéra :</span> explorez le futur très lointain du Neuvième Monde, où le mystère côtoie le danger, pour trouver parmi les numenéra, vestiges des mondes passés et artefacts étranges et merveilleux, ceux qui vous aideront à survivre et à forger votre destin !
+<li><img class="enluminure" src="assets/tindalos.png"/><span class="lititle">Les Chants de Tindalos : </span>Bath, ville portuaire du Maine chargée de secrets, dans les années 1920. Affrontez l'horreur en évitant de succomber aux crises de folie qui vous guettent ! Il vous faudra garder votre sang-froid pour élucider ces mystères lovecraftiens.
 
-<li><span class="lititle">Donjons et Chatons :</span> Les humains ont disparu et n’ont laissé comme vestiges que quelques bâtiments recouverts par des forêts denses, le sable ou la mer. Les animaux ont évolué et ont imité, à leur façon et sans doute à leur insu, les anciennes sociétés humaines. Chats, chiens, rats et autres sont à l’aube d’un Moyen Âge imprégné de "miagie" où tous respectent une loi universelle : « un animal qui parle ne mange pas un animal qui parle". 
-    </ul>
+<li><img class="enluminure" src="assets/numenera.jpg"/><span class="lititle">Numenéra :</span> explorez le futur très lointain du Neuvième Monde, où le mystère côtoie le danger, pour trouver parmi les numenéra, vestiges des mondes passés et artefacts étranges et merveilleux, ceux qui vous aideront à survivre et à forger votre destin !
+
+<li><img class="enluminure" src="assets/donjons-chatons.webp"/><span class="lititle">Donjons et Chatons :</span> Les humains ont disparu et n’ont laissé comme vestiges que quelques bâtiments recouverts par des forêts denses, le sable ou la mer. Les animaux ont évolué et ont imité, à leur façon et sans doute à leur insu, les anciennes sociétés humaines. Chats, chiens, rats et autres sont à l’aube d’un Moyen Âge imprégné de "miagie" où tous respectent une loi universelle : « un animal qui parle ne mange pas un animal qui parle". 
     </ul>
 </p>
  
@@ -73,7 +75,7 @@ Le festival Avalanche de Jeux est organisé par l'association <a href="https://w
       <ul class="partenaire">
         <li> <a href="https://www.facebook.com/LePicLudique/"> <img class="logo partenaire" src="logoPicLudique.png" /> </a>
         <li>  <a href="https://www.ville-lamontagne.fr" ><img class="logo partenaire" src="mairieLaMontagne.svg" /></a>
-        <li> <a href="https://www.rprod.com/fr/games/7-wonders" ><img class="logo partenaire" src="assets/Logo-repos.png" /></al
+        <li> <a href="https://www.rprod.com/fr/games/7-wonders" ><img class="logo partenaire" src="assets/logo-repos.png" /></al
       </ul>
     </article>
     

style.css

@@ -30,7 +30,7 @@ article h2 {
   font-family:"seasons";
 }
 
-article b, li .lititle {
+article b, li .lititle , div .lititle{
   font-weight: 700;
   font-size: 1.2rem;
   font-family: seasons;
@@ -118,18 +118,25 @@ ul {
 }
 
 ul li {
-  display:flex;
-  flex-direction: column;
-  align-items: center;
   gap: 10px;
   max-width:500px;
   min-width:200px;
   margin: 0 15px 8px 15px;
+  list-style: none;
 }
 ul li.max-width {
   max-width: 100%;
+}
+li .enluminure {
+  max-width: 96px;
+  margin:4px;
+  float:left;
+  border-radius: 6px;
 }
  #tournoi ul li {
+  display:flex;
+  flex-direction: column;
+  align-items: center;
   max-width: 265px;
   margin: 0 15px;
   color: #666;
@@ -141,11 +148,18 @@ ul li.max-width {
   margin-bottom: 16px;
 }
 li iframe {
-  min-height: 670px;
+  min-height: 685px;
 }
 img.logo.partenaire {
   max-width: 200px;
 }
+.titreparagraphe {
+  margin-top :16px;
+  font-weight: 500;
+  font-size: 1.2rem;
+  text-align: left;
+  width: 100%;
+}
 
 @media screen and (min-width: 900px) {
   body {