Toggle navigation
POP-T20
Notre guide de voyage (cartes)
Carte générale de l'archipel
Carte de l'histoire & géographie
Carte de l'île des ambiances
Carte de l'île de la découverte
Carte de l'île linguistique
Notre guide de voyage (textes)
1. Introduction
2. Préparer son voyage
3. Itinéraires
4. Histoire & géo
5. Ambiances
6. Découverte, bons plans & bonnes adresses
7. Linguistique
8. Risques, lieux à éviter et précautions à prendre
Guide de voyage complet en pdf
C'est quoi ce POP ?
C'est quoi, cette POP ?
Organisation du groupe
Inspirations
Archives
Guide de voyage en construction - brouillons
Archipel de Coopératif
Ile de la découverte
Ile des ambiances
Avec un outil
Avec libreoffice & pdf
Fonds de cartes
Images pour le POP
Aide
Rechercher
×
Se connecter
×
Se connecter
Email ou NomWiki
Mot de passe
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
... à l'attention de celles & ceux qui veulent s'aventurer en pays coopératif
Activer JavaScript pour joindre des fichiers.
Fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
======[[https://ferme.yeswiki.net/POP-T20/?PagePrincipale Archipel coopératif]] / Île linguistique====== - Reste à faire : intégrer les textes & images des vignettes "" <style> .img-overlay-wrap { position: relative; display: inline-block; transition: transform 150ms ease-in-out; } .img-overlay-wrap svg { position: absolute; top: 0; left: 0; } @keyframes buttonTransition { from { r: 10; } to { r: 13; } } circle { opacity: 0.5; cursor:pointer; stroke-dasharray: 95; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms ease; transform-origin: 0px 0px 0px; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: buttonTransition; } circle:hover { opacity: 0.7; stroke-dashoffset: 95px; stroke-width: 2.3px; transform="translate(5,14)" } svg { width: 100%; height:100%; } img { width: 100%; height: auto; } .overlay_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay_bg:target { visibility: visible; opacity: 1; } .overlay_exit_link{ width: 100%; height: 100%; position: absolute; z-index: -1000; } .popup_page { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 2s ease-in-out; } .close_button { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #aaa; transition: all 0.2s ease; } .popup_page .popup_content { max-height: 30%; overflow: auto; } .content__title { font-size: 20px; font-family: sans-serif; padding: 1em 0.5em 0.25em 0.5em; text-align: center; color: #111; } .content__description { font-size: 15px; font-family: sans-serif; padding: 1em 0em; text-align: left; margin: 0; max-width: 90%; margin: auto; } .content__image { display: block; max-width: 90%; height: auto; margin: auto; } .content__image:hover { opacity: 0.8; transition: all 0.2s ease; } .close_button:hover { color: #34478b; transition: all 0.2s ease; text-decoration: none; } .content__button { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 2px solid #34478b; border-radius: 0.6em; color: #34478b; cursor: pointer; display: -webkit-box; display: flex; align-self: center; font-size: 1rem; font-weight: 400; line-height: 1; margin: 20px; padding: 1.2em 2.8em; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; max-width: 200px; margin: 2em auto 0.5em auto; justify-content: center; } .content__button:hover, .content__button:focus { color: #fff; outline: 0; box-shadow: 0 0 40px 40px #34478b inset; text-decoration: none; } </style> <html> <body> <div id="myDiv" class="img-overlay-wrap"> <img src="https://ferme.yeswiki.net/POP-T20/?CarteLangues/download&file=cartelinguistique.jpg" alt="Archipel" usemap="#workmap"> <svg id="mySvg"> </svg> </div> </body> </html> <script> var jsonObj = { points: [ { x: "65%", y: "53%", title: "Les essentiels", description: "Le vocabulaire de base de coopératien.nes, ... Ce qui faut savoir pour se lancer", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#lesessentiels", color: "red", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "23%", y: "67%", title: "Découverte de l'archipel", description: "Mais comment s'y prenez-vous pour se lancer ? Quelques pistes à découvrir", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#decouvertedelarchipel", color: "orange", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "38%", y: "80%", title: "Mode de vie", description: "Petit truc d'animation pour débuter une réunion ou accueillir un groupe", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#modedevie", color: "green", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "85%", y: "73%", title: "S'organiser", description: "La collaboration au sain d'une équipe, comment ça marche ?", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#sorganiser", color: "blue", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "33%", y: "51%", title: "Décider", description: "Prendre des décisions ensemble, c'est possible ?", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#decider", color: "purple", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "18%", y: "77%", title: "Les indispensables", description: "Les outils pratiques à emporter quoi qu'il arrive", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#lesindispensables", color: "black", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, ] }; window.onload = function() { var counter = 0; var svg = document.getElementById("mySvg"); var main = document.getElementById("myDiv"); jsonObj.points.forEach(point => { var child = `<a class="button" href="#popup${counter}"> <circle cx="${point.x}" cy="${point.y}" r="10" fill="${point.color}" stroke="#777" stroke-width="1.9"/> </a>`; var popup = `<div id="popup${counter}" class="overlay_bg"> <a href="#" class="overlay_exit_link"/> <div class="popup_page"> <a class="close_button" href="#">×</a> <div class="popup_content"> <h2 class="content__title">${point.title}</h2> <a class="content__link" href="${point.link}"> <img class="content__image" src="${point.image}" alt="some_alt"/> </a> <p class="content__description">${point.description}</p> <a class="content__button" href="${point.link}" target="blank">${point.link_text}</a> </div> </div>` svg.insertAdjacentHTML( 'beforeend', child ); main.insertAdjacentHTML( 'beforeend', popup ); counter++; }) }; </script> "" Partenaire : Ensemble, nous [[https://seo-maxime-guinard.fr/secteur/logiciel-services-aux-entreprises-b2b/ construisons des relations solides]] avec [[https://seo-maxime-guinard.fr/secteur/food-retail/ nos partenaires, basées sur la confiance]], la transparence et la réussite mutuelle.
Sauver
Annuler
Thème
Protection anti-spam active
×
{{ actionGroup.label }}
Choisissez un Formulaire
{{ name }}
{{ needFormField ? 'Sous quelle forme voulez-vous afficher les données?' : 'Actions' }}
{{ action.label }}
{{ selectedAction.hint }}
{{ panel.params.title ? panel.params.title : 'Paramètres'}}
Code à include dans la page
×
Apparence de la page CarteLangues
Thème
base
bootstrap3
city
colibris
enercoop
far
margot
organic
pactecivique
yeswiki
Squelette
1col.tpl.html
2cols-left.tpl.html
2cols-right.tpl.html
Style
city.css
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour:
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
Configuration graphique
×