{INFO CACHÉE
-
OkiCom
Toggle navigation
Wiki Pas à pas
-
PasCherMontres
-
Plaquette
**Accueil1**
Étape 0
Étape 1
Étape 2
Étape 3
Étape 4
Étape 5
Étape 6
Étape 7
Étape 8
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
No-Name
Maho
-
AubergeDeCannedda
Activer JavaScript pour joindre des fichiers.
Joindre / Insérer un 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
PaGe37 <!DOCTYPE html> ""<html> <head> <title>Grille de carrés</title> <style> background-image: url('img_tree.gif'), url('paper.gif'); .grid { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); grid-gap: 5px; } .square { width: 50px; height: 50px; border: 1px solid black; background-color: red; } .blue { background-color: blue; } </style> </head> <body> <h1>Grille de carrés</h1> <div class="grid"> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> </div> <div> <button onclick="changeColor('blue')">Bleu</button> <button onclick="changeColor('green')">Vert</button> </div> </body> <script> let selectedColor = 'blue'; let blueSquares = []; // Ajouter 2 carrés bleus de manière aléatoire while (blueSquares.length < 2) { let index = Math.floor(Math.random() * 9); if (!blueSquares.includes(index)) { blueSquares.push(index); } } // Ajouter la classe "blue" aux carrés sélectionnés let squares = document.querySelectorAll('.square'); for (let i = 0; i < squares.length; i++) { if (blueSquares.includes(i)) { squares[i].classList.add('blue'); } } function chooseColor(square) { square.style.backgroundColor = selectedColor; } function changeColor(color) { selectedColor = color; } </script> </html>"" <!DOCTYPE html> ""<html> <head> <title>Grille de carrés</title> <style> .grid { display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(5, 50px); grid-gap: 60px; } .square { width: 100px; height: 45px; border: 4px solid black; background-color: red; } </style> </head> <body> <h1>Grille de carrés</h1> <div class="grid"> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> <div class="square" onclick="chooseColor(this)"></div> </div> <div> <button onclick="changeColor('blue')">Bleu</button> <button onclick="changeColor('green')">Vert</button> <button onclick="changeColor('white')">Blanc</button> <button onclick="changeColor('black')">Noire</button> <button onclick="changeColor('yellow')">Jaune</button> </body> <script> let selectedColor = 'red'; function chooseColor(square) { square.style.backgroundColor = selectedColor; } function changeColor(color) { selectedColor = color; } </script> </html>"" ""<!DOCTYPE html> <html> <head> <title>Image centrée dans un rectangle avec fond clignotant en x, y</title> <style> .rectangle { position: relative; left:300px; width:150px; height: 150px; background-color: red; /* Couleur de fond initiale */ overflow: hidden; /* Pour masquer le dépassement de l'image */ animation: clignotement 5s infinite alternate; /* Animation de clignotement sur le fond du rectangle */ display: flex; /* Pour centrer l'image horizontalement et verticalement */ justify-content: center; /* Pour centrer l'image horizontalement */ align-items: center; /* Pour centrer l'image verticalement */ } @keyframes clignotement { 0% { background-color: red; /* Couleur de fond au début de l'animation */ } 50% { background-color: green; /* Couleur de fond à mi-chemin de l'animation */ } 100% { background-color: red; /* Couleur de fond à la fin de l'animation */ } } .rectangle img { max-width: 90%; max-height: 90%; object-fit: contain; /* Pour ajuster la taille de l'image tout en conservant son ratio d'aspect */ } </style> </head> <body> <div class="rectangle"> <img src="https://ferme.yeswiki.net/wikipasapas/files/PaGe36_michel22_20230313145020_20230321174159.jpg" alt="Votre image"> </div> </body> </html>"" ""<!DOCTYPE html> <html> <head> <style> .bordered-box { border: 3px solid #000; /* Couleur de la bordure et épaisseur en pixels */ background-color: green; /* Couleur de fond du rectangle */ width: 400px; /* Largeur du rectangle */ height: 100px; /* Hauteur du rectangle */ position: relative; /* Position relative pour permettre le positionnement absolu du texte à l'intérieur */ left:300px; overflow: hidden; /* Pour que le texte clignotant reste à l'intérieur du rectangle */ } .blinking-text { position: absolute; /* Position absolue pour placer le texte à l'intérieur du rectangle */ top: 0; /* Position en haut du rectangle */ left: 0; /* Position à gauche du rectangle */ width: 100%; /* Largeur du texte égale à celle du rectangle */ height: 100%; /* Hauteur du texte égale à celle du rectangle */ display: flex; /* Pour centrer le texte verticalement et horizontalement */ align-items: center; /* Centrage vertical */ justify-content: center; /* Centrage horizontal */ } .blinking-text span { animation: blink 1s infinite; /* Animation clignotante */ } .blinking-text span:nth-child(1) { color: blue; /* Couleur bleue du texte clignotant */ } .blinking-text span:nth-child(2) { color: red; /* Couleur rouge du texte clignotant */ } @keyframes blink { 0% { opacity: 0; /* Texte transparent */ } 50% { opacity: 1; /* Texte opaque */ } 100% { opacity: 0; /* Texte transparent */ } } </style> </head> <body> <div class="bordered-box"> <div class="blinking-text"> <h1> <span>Texte clignotant</span></p> <hr> <span>Texte clignotant</span> </div> </div> </body> </html> "" ====**Une phrase de Fisherman'sFriends**==== ""<button style="position: absolute; left: 0px; top: 50px;" onclick="location.href='https://saintjohnspotters.com/?AnglaisHistoireSemaine '">Check out (🚣 Sea Shanty Santiana 🚣)</button>"" {{accordion}} {{grid}} {{col size="4"}} ""<marquee bgcolor="orange" width="65%" direction="left" loop="0"><p><strong>🚣 Fisherman's Friends 🚣</strong></p></marquee>"" {{end elem="col"}} {{col size="5"}} ""<div id="lecteur"> <audio controls> <source src="https://saintjohnspotters.com/files/AnglaisPhrasesSemaine_friendfisherman_20230313091647_20230313091833.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas l'audio HTML5. </audio> </div> <style> #lecteur { position: relative; left: 0px; top: 0px; } </style> "" {{attach file="friendfisherman.mp3" desc="friendfisherman.mp3 (0.4MB)" size="original" class="left"}} ""<!-{{attach file="friendfisherman.mp3" desc="friendfisherman.mp3 (0.4MB)" size="original" class="left"}}>"" {{panel title="<span class='glyphicon glyphicon-volume-down'></span> 🚣 Fresh. Bold. And Always By Your Side.🚣" class="panel-success"}} 🚣 Fisherman’s Friend likes to be by your side to remind you of your own strength. And as real friends do, we are there for you in great and not so great times. So get ready to face your every day challenges. Stay fresh, be brave, be bold, be yourself and seize the moment. Whatever the day throws at you ... Never be without a friend.🚣 {{end elem="panel"}} {{end elem="col"}} {{end elem="grid"}} {{end elem="accordion"}} {{attach file="michel22.jpg" desc="image michel22.jpg (85.6kB)" size="small" class="left"}} <!DOCTYPE html> ""<html> <head> <title>Button Show/Hide Image with Position and Size</title> <style> /* Style pour cacher l'image par défaut et définir la position */ #image { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s; } /* Style pour le bouton */ #btn { padding: 10px; background-color: #007bff; color: #fff; cursor: pointer; } </style> </head> <body> <!-- Bouton et image à cacher/montre --> <button id="btn" onclick="toggleImage()">Cacher/Montrer Image</button> <img id="image" src="https://ferme.yeswiki.net/wikipasapas/files/PaGe36_michel22_vignette_97_97_20230313145020_20230321174159.jpg" alt="Exemple d'image"> <!-- Script JavaScript pour gérer le clic sur le bouton --> <script> function toggleImage() { var img = document.getElementById("image"); if (img.style.display === "none") { img.style.display = "block"; img.style.width = "50%"; img.style.height = "50%"; img.style.top = "25%"; img.style.left = "25%"; img.style.opacity = "1"; } else { img.style.display = "none"; img.style.width = "0"; img.style.height = "0"; img.style.top = "50%"; img.style.left = "50%"; img.style.opacity = "0"; } } </script> </body> </html>"" https://ferme.yeswiki.net/wikipasapas/files/PaGe36_michel22_vignette_97_97_20230313145020_20230321174159.jpg
Sauver
Annuler
Thème
Protection anti-spam active
×
Apparence de la page PaGe36
Thème
bootstrap3
margot
yeswiki
Squelette
fixed-1col.tpl.html
fixed-2cols-left.tpl.html
fixed-2cols-right.tpl.html
fixed-3cols.tpl.html
fullscreen-1col.tpl.html
fullscreen-2cols-left.tpl.html
fullscreen-2cols-right.tpl.html
fullscreen-3cols.tpl.html
fullwidth-1col.tpl.html
responsive-1col.tpl.html
responsive-2cols-left.tpl.html
responsive-2cols-right.tpl.html
responsive-3cols.tpl.html
Style
blue.css
gray.css
green.css
red.css
yellow.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
×