Bibliothèques : Outil de sélection (Code Autonome)
✅ Tout le design est inclus dans le code (Inline CSS). Un simple copier-coller suffit !
Option 1 : Cartes Jumelles (Recommandée ⭐)
La présentation la plus esthétique, avec un code 100% autonome. Même l'effet d'ombre au survol de la souris est inclus !
• thématique
Les Femmes dans l'Art
Ateliers, projections et expositions pour mettre à l'honneur les figures féminines de l'art.
- Atelier Petrykivkamer. 1er avril
- Ateliers Yayoi1, 8 & 11 avril
- Sarah Bernhardtmer. 29 avril
⏱️ INFO PRATIQUE
Ajustement des horaires
À partir de fin avril, des changements concernent vos bibliothèques :
- •Abbé-Grégoire
- •Maurice-Genevoix
- •Rose-Valland
<div style="display: flex; flex-wrap: wrap; gap: 20px; font-family: 'Open Sans', sans-serif; margin-bottom: 24px;">
<!-- CARTE 1 : FEMMES DANS L'ART -->
<div style="flex: 1; min-width: 300px; display: flex; flex-direction: column;">
<div style="background: #fff; border: 2px solid #F0A500; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; flex: 1; transition: all 0.2s ease;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px -6px rgba(240, 165, 0, 0.4)';" onmouseout="this.style.transform='none'; this.style.boxShadow='none';">
<div style="background: #f8f9fa; position: relative; overflow: hidden; height: 105px; flex-shrink: 0; border-bottom: 1px solid #F0A500;">
<img alt="Les Femmes dans l'Art" src="basicimagedownload.ashx?repositoryId=1&itemId=11142" style="width: 100%; height: 100%; object-fit: cover; object-position: center 30%;" />
</div>
<div style="padding: 12px 18px; display: flex; flex-direction: column; flex: 1;">
<span style="font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; line-height: 1; color: #9f1239;">• thématique</span>
<h1 style="font-family: 'Roboto Slab', serif; font-size: 16px; font-weight: 700; color: #111; margin: 0 0 4px 0; line-height: 1.2;">Les Femmes dans l'Art</h1>
<p style="font-size: 11.5px; color: #555; line-height: 1.4; margin: 0 0 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Ateliers, projections et expositions pour mettre à l'honneur les figures féminines de l'art.</p>
<ul style="list-style: none; padding: 0; margin: 0 0 10px 0; font-size: 11px; color: #333;">
<li style="padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start;"><span style="min-width: 75px; font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #9f1239;">Atelier Petrykivka</span><span style="flex: 1;">mer. 1er avril</span></li>
<li style="padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start;"><span style="min-width: 75px; font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #9f1239;">Ateliers Yayoi</span><span style="flex: 1;">1, 8 & 11 avril</span></li>
<li style="padding: 3px 0; border-bottom: none; display: flex; align-items: flex-start;"><span style="min-width: 75px; font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #9f1239;">Sarah Bernhardt</span><span style="flex: 1;">mer. 29 avril</span></li>
</ul>
<a href="https://bibliotheques.agglopolys.fr/EXPLOITATION/Default/doc/AGENDA/2175/cycle-les-femmes-dans-l-art" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 100px; width: 100%; font-size: 11px; font-weight: 600; text-decoration: none; align-self: flex-start; margin-top: auto; transition: all 0.2s ease; background: #fff0f3; color: #9f1239; box-sizing: border-box;" onmouseover="this.style.filter='brightness(0.95)'" onmouseout="this.style.filter='none'">Toute la programmation ›</a>
</div>
</div>
</div>
<!-- CARTE 2 : HORAIRES -->
<div style="flex: 1; min-width: 300px; display: flex; flex-direction: column;">
<div style="background: #fff; border: 2px solid #F0A500; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; flex: 1; transition: all 0.2s ease;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px -6px rgba(240, 165, 0, 0.4)';" onmouseout="this.style.transform='none'; this.style.boxShadow='none';">
<div style="background: #f8f9fa; position: relative; overflow: hidden; height: 105px; flex-shrink: 0; border-bottom: 1px solid #F0A500;">
<img alt="Ajustement Horaires" src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" style="width: 100%; height: 100%; object-fit: cover;" />
</div>
<div style="padding: 12px 18px; display: flex; flex-direction: column; flex: 1;">
<span style="font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; line-height: 1; color: #ea580c;">⏱️ INFO PRATIQUE</span>
<h1 style="font-family: 'Roboto Slab', serif; font-size: 16px; font-weight: 700; color: #111; margin: 0 0 4px 0; line-height: 1.2;">Ajustement des horaires</h1>
<p style="font-size: 11.5px; color: #555; line-height: 1.4; margin: 0 0 10px 0;">À partir de fin avril, des changements concernent vos bibliothèques :</p>
<ul style="list-style: none; padding: 0; margin: 0 0 10px 0; font-size: 11px; color: #333;">
<li style="padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start;"><span style="font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #ea580c; min-width: 15px;">•</span><span style="flex: 1;">Abbé-Grégoire</span></li>
<li style="padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start;"><span style="font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #ea580c; min-width: 15px;">•</span><span style="flex: 1;">Maurice-Genevoix</span></li>
<li style="padding: 3px 0; border-bottom: none; display: flex; align-items: flex-start;"><span style="font-weight: 700; font-size: 10.5px; flex-shrink: 0; padding-right: 6px; color: #ea580c; min-width: 15px;">•</span><span style="flex: 1;">Rose-Valland</span></li>
</ul>
<a href="https://bibliotheques.agglopolys.fr/EXPLOITATION/Default/venir-ou-quand-comment.aspx" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 100px; width: 100%; font-size: 11px; font-weight: 600; text-decoration: none; align-self: flex-start; margin-top: auto; transition: all 0.2s ease; background: #fff7ed; color: #ea580c; box-sizing: border-box;" onmouseover="this.style.filter='brightness(0.95)'" onmouseout="this.style.filter='none'">Consulter les nouveaux horaires ›</a>
</div>
</div>
</div>
</div>
Option 2 : Bandeau "Ligne Fine"
Très discret. S'intègre sans prendre de place au-dessus des cartes.
⏱️ Horaires : Ajustement fin avril pour les bibliothèques Abbé-Grégoire, Maurice-Genevoix et Rose-Valland.
Consulter ›
<div style="border: 1px solid #F0A500; border-left: 4px solid #F0A500; padding: 10px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; font-family: 'Open Sans', sans-serif; border-radius: 4px; background: #fff;">
<div style="font-size: 13px;"><strong>⏱️ Horaires :</strong> Ajustement fin avril pour les bibliothèques Abbé-Grégoire, Maurice-Genevoix et Rose-Valland.</div>
<a href="https://bibliotheques.agglopolys.fr/EXPLOITATION/Default/venir-ou-quand-comment.aspx" style="color: #F0A500; font-weight: bold; font-size: 13px; text-decoration:none; white-space: nowrap; margin-left: 10px;">Consulter ›</a>
</div>
Option 3 : Bloc "Alerte Colorée"
Pour attirer l'œil directement. Idéal tout en haut de la page.
⚠️ VOS BIBLIOTHÈQUES AJUSTENT LEURS HORAIRES : Abbé-Grégoire, Maurice-Genevoix et Rose-Valland évoluent fin avril.
Consulter
<div style="background: #fffdf5; border: 2px solid #F0A500; margin-bottom: 24px; padding: 15px; border-radius: 8px; font-family: 'Open Sans', sans-serif; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
<div style="font-size: 14px;"><strong>⚠️ VOS BIBLIOTHÈQUES AJUSTENT LEURS HORAIRES :</strong> Abbé-Grégoire, Maurice-Genevoix et Rose-Valland évoluent fin avril.</div>
<a href="https://bibliotheques.agglopolys.fr/EXPLOITATION/Default/venir-ou-quand-comment.aspx" style="background: #F0A500; color: #fff; padding: 6px 15px; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: bold; white-space: nowrap;">Consulter ›</a>
</div>