POP-T20 : ${point.title}

======[[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>

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="#">&times;</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.

Titre 1

Titre 2

Titre 3

Titre 4

Ajouter un lien au texte selectionné ou créer une page

Modifier le lien

Créer une page

Télécharger le fichier

Apparence de la page CarteLangues

Choisir une page pour: