Bonsoir, j'ai créé un site avec ce que j'ai appris sur internet en lisant de nombreux articles.
Je bute en ce moment sur la mise en page de mon site lorsqu'il est vu sur téléphone, j'aimerais un peu d'aide pour régler le problème de logo et de positionnement du postit qui se fait mal.
Je vous demanderais d'être indulgent. Merci.
Je bute en ce moment sur la mise en page de mon site lorsqu'il est vu sur téléphone, j'aimerais un peu d'aide pour régler le problème de logo et de positionnement du postit qui se fait mal.
Je vous demanderais d'être indulgent. Merci.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survivre</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" >
<link rel="stylesheet" href="style.css" >
<style>
.logo1 {
position: relative;
top: -200px;
left: 0px;
z-index: 20;
color: wheat;
}
</style>
<script>
<!--
function anti_clic()
{
alert('Désolé le clic droit est désactivé sur ce site...');
return false;
}
//-->
</script>
</head>
<body id="hautpage" onContextMenu="return anti_clic();">
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 50) {
document.getElementById("logo").className = "logo1";
} else {
document.getElementById("logo").className = "logo";
}
}
</script>
<header>
<nav>
<h1 class="logo">Survie</h1>
<div class="toggle">
<i class="fas fa-bars ouvrir"></i>
<i class="fas fa-times fermer"></i>
</div>
<ul class="menu">
<li><a href="html/Les_regles.html">Régles</a></li>
<li><a href="html/Niveau_1.html"> EDC </a></li>
<li><a href="html/Niveau_2.html"> SSU </a></li>
<li><a href="html/Niveau_3.html"> SEU </a></li>
<li><a href="html/Photo.html">Photos</a></li>
<li><a href="html/Divers.html">Divers</a></li>
</ul>
</nav>
</header>
<!-- Le reste du contenu -->
<!-- Debut triangle -->
<div class="triangle"><a class="retour" href="#hautpage">▲</a></div>
<!-- >Fin triangle -->
<section>
<div class="section1">
<div class="content">
<h1 class="titre1"> La Survie Explication Simple et rapide </h1>
<div id="postit1">
<p class="ptitrenote"> Note </p>
<hr>
<p id="entretien">
EDC: Every Day Carry <br>
<br>
SSU: Sac Situation d'Urgence <br>
<br>
SEU: Sac Evacuation d'Urgence <br>
<br>
</p>
<hr>
<br>
</div>
<p class="paragraphe1">
<mark class="opak">
Bonjour à tous voici un peu de lecture pour remettre certaines idées reçues à leurs places. <br>
<br>
Tout d'abord, il faut bien comprendre que survie = danger , et pas n'importe lequel puisqu'il s'agit d'un danger de mort imminente. <br>
<br>
Une situation de survie peut arriver à tout moment sous diverses formes.
</mark>
</p>
<p class="paragraphe1">
<mark class="opak">
Lorsque l’on sort de chez toi, on s’expose de suite à une possible situation d’urgence pour diverse cause possible, tels qu’une panne, perte de l’orientation, voir même une blessure.
Ceci peut nous arriver aussi bien à pied, vélo, voiture, moto, quad, etc.
</mark>
<br> <br> <br>
</p>
</div>
</div>
</section>
<section class="section2">
<h1 class="titre2"> Introduction </h1>
<div class="introduction">
<p class="paragraphe2">
Pour parer au mieux à une situation difficile, j’ai toujours sur moi mon <b> EDC "expression anglaise qui signifie (porté tous les jours)" </b>, et j’emporte également mon sac à dos, qui est toujours à ma portée ou pas très loin de moi. <br>
<br>
Celui-ci est composé de <strong> "divers Kit" </strong> pour parer à toute éventualité, ou au moins, y parer au mieux. <br>
<br>
Je le surnomme <b> SSU pour "Sac Situation d'Urgence" </b><br>
<br>
Je complète se sac avec de l'équipement pour dormir, et rechange. Celui-ci c'est <b> SEU pour "Sac d'Évacuation d'Urgence" </b>. <br>
<br>
<b> <u> Mon moyen mnémotechnique : </u> </b> <br>
<br>
Lorsque je pars, je dois <strong> "Naviguer" </strong>, mais si j’ai un problème, je dois <strong> "Communiquer" </strong> ma position et me <strong> "Signaler"</strong>, <br>
<br>
Si je suis blessé, je dois me <strong> "Soigner" </strong> et de nuit <strong> "m’Eclairer" </strong>. <br>
<br>
Si la situation perdure, je dois <strong> "Boire" </strong>, me <strong> "Chauffer" </strong> et me <strong> "Protéger" </strong> des éléments, <br>
<br>
Eventuellement <strong> "Manger"</strong>. <br>
<br>
</p>
</div>
<br> <br> <br>
</section>
<section class="section3">
<h2 class="titre3">Les diffèrent éléments</h2>
<div class="colonne3">
<div class="texte3">
<p class="paragraphe3">
Dans le diaporama à côté, je vous présente les photos de <b>Mon EDC</b> que j’ai toujours avec moi la semaine. <br>
<br>
Il réunit le matériel que j’ai dans mes poches et le matériel que j’ai toujours à proximité de moi la semaine, au travail il est dans la voiture. <br>
<br>
En naviguant dans le site, vous verrez que j’améliore <b>mon EDC</b> avec un peut d’outillage, tels que <i><b>pince et bracelet multitools Leatherman, torche, crayon, couteau et même un tube de pastille micropure</b></i>. <br>
<br>
<b>Mon EDC</b> qui complète le Week-end n’est également jamais très loin de moi, puisqu’il se trouve dans mon <i><b>sac pour situation d’urgence</b></i> <b>(SSU)</b>. Vous pourrez également découvrir celui-ci en parcourant mon site. <br>
</p>
</div>
<div class="slider1">
<div class="slider">
<img src="picture/EDC-Journalier/1.jpg" alt="Naviguer">
<img src="picture/EDC-Journalier/2.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/3.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/4.jpg" alt="Naviguer">
<img src="picture/EDC-Journalier/5.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/6.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/7.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/8.jpg" alt="Communiquer">
<img src="picture/EDC-Journalier/1.jpg" alt="Communiquer">
</div>
</div>
</div>
<br> <br> <br> <br> <br>
</section>
<section class="risque">
<h2 class="h2">Risques majeurs</h2>
<br>
<p>
<strong>
De l’incident à la catastrophe majeure, de multiples événements d’origine naturelle ou humaine peuvent frapper la population française et nos territoires. <br>
<br>
C’est pour cela que le gouvernement lui-même préconise d’avoir un sac d’évacuation, pour plus de détail cliquez sur "Consulter
</strong>
</p>
<p class="btn1">
<a class="lienbtn" href="https://www.gouvernement.fr/risques/preparer-son-kit-d-urgence"
target="_blank"> Consulter</a>
</p>
</section>
<section class="section4">
<h1 class="titre4"> Validé W3C pour HTML5\CSS3 </h1>
<div>
<div class="conteneur">
<div class="div4-1">
<h2 class="soustitre4">HTML</h2>
<a href="https://validator.w3.org/" onclick="window.open(this.href);return false">
<img class="image-de-dessous" src="frame/htmllogo2.png" alt="Validation html 5" >
<img id="image-de-dessushtml" src="frame/htmllogo1.png" alt="Validation html 5" >
</a>
</div>
<div class="div4-2">
<h2 class="soustitre4">Version </h2>
<hr class="hrh">
<p class="valid2">
Réalisé par Bruno.H <br>
<br>
Mis à jour le 16 Novembre 2023. <br>
</p>
<hr class="hr">
</div>
<div class="div4-3">
<h2 class="soustitre4">CSS</h2>
<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
<img class="image-de-dessous" src="frame/csslogo2.png" alt="Validation css 3" >
<img id="image-de-dessuscss" src="frame/csslogo1.png" alt="Validation css 3" >
</a>
</div>
</div>
</div>
</section>
<script src="toggle.js"></script>
<script src="zoom.js"></script>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 50) {
document.getElementById("logo").className = "logo1";
} else {
document.getElementById("logo").className = "logo";
}
}
</script>
</body>
</html>
/* Mise en page principale */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Reset Margin et Padding */
}
html {
font-size: 16px;
}
body {
font-family: Arial, Helvetica Neue, Helvetica, sans-serif; /* Choix Fonts */
background-image: url("frame/Image-Acceuil2.png"); /* image de fond */
background-position: 50%;/* position image */
background-size: 70%;/* taille image */
background-repeat: no-repeat;/* statut image */
background-color: black;/* remplacement image */
background-attachment: fixed;/* effet sur image */
border: 10px ridge yellowgreen; /* bordure du header */
}
/* Debut Bandeau Haut Header */
header {
position: fixed; /* Position Fix par fixed */
width: 100%; /* Largeur header */
height: auto; /* Hauteur header */
top: 0; /* Position en haut de la page */
left: 0; /* Position a gauche de la page */
background-color: black; /* Couleur Fond du header */
color: wheat; /* Couleur Ecriture du header */
margin: 0 0 0 0; /* Marge Exterieur header */
padding: 0px 20px 0px 0; /* Marge Interieur header */
z-index: 40;
border: 10px ridge yellowgreen; /* bordure du header */
border-bottom: 10px ridge yellowgreen; /* bordure du header */;
}
nav {
width: 100%; /* Largeur Menu */
height: 100%; /* Hauteur Menu */
padding: 20px 0 20px 0; /* Marge Interieur header */
display: flex;
justify-content: space-between; /* */
align-items: center;
}
.logo {
font-size: 50px; /* Taille ecriture liste */
float: right; /* positionnement titre par apport liste */
margin: 10px 10px 10px 30px; /* marge logo */
padding: 5px 10px 5px 10px; /* Redimensionne Logo */
color: wheat; /* couleur texte logo */
background-color: yellowgreen; /* couleur fond logo */
text-shadow: goldenrod 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte boite */
border-radius: 50%; /* bordure logo */
text-align: center;
}
.toggle {
display: none;
top: 0px;
left: 0px;
color: yellowgreen; /* Couleur du toggle */
}
/* Fin Bandeau Haut Header */
a {
text-decoration: none; /* Suprime le soulignement genere par Menu */
color: wheat; /* Couleur des Liens */
font-weight: bold; /* Liens en Gras */
}
a:hover {
background-color: black;
margin: 0 0 0 0; /* Marge Exterieur header */
padding: 10px 10px 10px 10px; /* Marge Interieur header */
}
/* Debut Mise en Forme Menu Pleine Ecran */
.menu {
display: flex; /* Mets le Menu sur une Ligne */
justify-content: space-between; /* */
align-items: center; /* Centre Les Elements du menu */
font-size: 20px; /* Taille Police Liste */
width: 500px; /* Largeur Menu */
background-color: transparent;/* Couleur Fond Menu */
margin: 0 0 0 0; /* Marge Exterieur Menu */
padding: 5px 5px 5px 5px; /* Marge Interieur Menu */
list-style: none; /* Suprime les puces de Liste */
}
.menu li {
color: yellowgreen;
transition-property: background-color, border; /* transition */
transition-duration: 0.5s; /* duree transition */
margin: 0 5px 0 5px;
}
.menu li :hover
{
font-size: 30px; /* Taille Polices au Survol */
color: red; /* Couleur Polices au Survol */
background-color: yellowgreen; /* Couleur Fond Menu au Survol */
padding: 5px;
text-shadow: black 0.1em 0.1em 0.2em; /* Couleur Ombre Texte Menu */
box-shadow: blue 0.05em 0.05em 0.5em; /* Couleur Ombre Boite Menu */
border: 5px ridge wheat; /* Couleur Bordure Menu au Survol */
border-radius: 10px; /* Arrondis Angle Menu au Survol */
}
/* Fin Mise en Forme Menu Pleine Ecran */
/* ----------------------------------------------------- */
/* Debut Menu Ecran Telephone */
/* ----------------------------------------------------- */
@media all and (max-width: 600px) /*568px)*/ { /* (max-width: 991px) */
header {
background: transparent;
border-bottom: 0px /* bordure du header */;
}
nav {
position: fixed;
width: 70%;
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: row-reverse; /* */
align-items: center;
z-index: 10;
}
.toggle {
display: block; /* Affiche le Toggle "Menu Hamburger" */
position: fixed;
top: 12px;
left: 6px;
font-size: 2rem;
cursor: pointer;
z-index: 10;
}
.logo {
display: block;
position: fixed;
top: 10px;
right: 10px;
/* color: wheat; */
}
.ouvrir {
display: block;
position: absolute;
color: yellowgreen; /* Couleur du menu hamburger*/
top: 20px; /* Position en Hauteur du Menu Hamburger */
left: 20px; /* Position Transversal du Menu Hamburger */
}
.fermer {
display: none;
color: red; /* Couleur du bouton Fermer Menu*/
position: absolute;
top: 20px; /* Position en Hauteur du Menu Hamburger */
left: 20px; /* Position Transversal du Menu Hamburger */
}
.open .ouvrir {
display: none;
}
.open .fermer {
display: block;
}
.menu {
position: absolute;
top: 65px;
left: 10px; /* Donne la position de Menu Ferme */
width: 60%;
height: auto;
background: black;
flex-direction : column;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: black 0.05em 0.05em 0.5em; /* ombre texte menu */
border: 5px ridge goldenrod;
border-radius: 10px;
padding: 2rem;
justify-content: space-around;
transform: translateX(-120%);
transition: transform 1s;
z-index: 2;
}
li a {
text-decoration: none;
color: red ;
border: 5px ridge goldenrod;
border-radius: 10px;
}
.menu li {
font-size: 2rem;
margin: 15px 0 5px 0;
}
.open .menu {
transform: translateX(0);
}
}
/* ----------------------------------------------------- */
/* Debut Section */
/* ----------------------------------------------------- */
/* Debut Section 1 */
.section {
width: 100%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin: 200px 0 0 0; /* Marge Exterieur Menu */
padding: 0;
box-sizing: border-box; /* Reset Margin et Padding */
background-color: transparent; /* Couleur Fond Section 1 */
border: 10px ridge yellowgreen; /* bordure des sections */
border-top: 0px;
}
.section1 {
width: 100%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin: 50px 0 0 0; /* Marge Exterieur Menu */
padding: 10px 10px 10px 10px; /* Marge Interieur Menu */
background-color: transparent; /* Couleur Fond Section 1 */
/* border: 10px ridge #404040; /* bordure des sections */
backdrop-filter : blur(8px);
}
.opak
{
opacity: 0.6; /* opacite du texte */
}
.titre1
{
margin-top: 100px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
color: wheat;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
text-align: center;
font-size: 50px; /* Taille ecriture text */
}
.paragraphe1
{
color: red;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 50px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 28px; /* Taille ecriture text */
}
/* Fin Section 1 */
/* Debut Section 2 */
.section2 {
width: 100%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin: 0 0 0 0; /* Marge Exterieur Menu */
padding: 10px 10px 10px 10px; /* Marge Interieur Menu */
background-color: grey; /* Couleur Fond Section 1 */
border: 10px ridge #404040; /* bordure des sections */
/*display: flex; /* => permet de creer deux collonnes */
}
.titre2
{
width: 99%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin-top: 40px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
background-color: #404040;
color: yellowgreen;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
.paragraphe2
{
color: black;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 30px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 18px; /* Taille ecriture text */
}
/* Fin Section 2 */
/* Debut Section 3 */
.section3 {
width: 100%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
background-color: gray; /* Couleur Fond Section 1 */
border: 10px ridge #404040; /* bordure des sections */
margin-left: auto; /* Pour centrer mes div */
margin-right: auto; /* Pour centrer mes div */
}
.titre3 {
width: 94%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin-top: 40px; /* espacement bord haut titre1 */
margin-bottom: 30px;/* espacement bord bas titre1 */
margin-left: 20px; /* espacement bord gauche titre1 */
background-color: #404040;
color: yellowgreen;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
.colonne3 {
background-color: transparent;
width: 99%;
padding: 50px;
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.texte3 {
background-color: transparent;
padding: 5px;
}
/* Debut Slider */
.slider1
{
background-color: green;
width: 80%; /* taille Slider */
margin: 0 30px 0 20px;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
/* Debut Arrangement slider*/
@media all and (max-width: 368px) { /* (max-width: 991px) */
.colonne3 {
background-color: transparent;
width: 100%;
padding: 0;
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.slider1
{
background-color: transparent;
width: 300px; /* taille Slider */
margin: 2px;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
}
@media all and (max-width: 568px) { /* (max-width: 991px) */
.colonne3 {
background-color: transparent;
width: 99%;
padding: 10px;
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.slider1
{
background-color: transparent;
width: 4500px; /* taille Slider */
height: auto;
margin: 0 5px 0 5px;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
}
@media all and (max-width: 868px) { /* (max-width: 991px) */
.slider1
{
background-color: transparent;
width: 1500px; /* taille Slider */
margin: 0 20px 0 20px;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
}
/* Fin Arrangement slider*/
.slider1 .slider
{
display: flex;
animation: slider1 16s infinite ease-in-out;
}
.slider1 img
{
background-color: yellow;
flex-shrink: 0;
padding: 0px 0;
width: 100%;
height: 100%;
}
/*
Pour un diaporama de 8 images.
Calcule a effectuer:
2sec par image soit 2x8=16
donc remplaer par votre valer =>
=> animation: slider1 16s infinite ease-in-out;
------------------------------------------------
5% par transition
soit 5x8=40% de transition
reste divise par
100-40=60%
60%/nbr photo soit 8 = 7.5%
Avec ces deux valeur on adapte l'echelle du temps
et le nombre de photos
*/
@keyframes slider1 {
0%,
7.5%{ /* duree visionnage photo */
transform: translateX(0);
}
12.5%, /* plus transion */
20%{ /* duree visionnage photo */
transform: translateX(-100%);
}
25%, /* plus transion */
32.5%{ /* duree visionnage photo */
transform: translateX(-200%);
}
37.5%, /* plus transion */
45%{ /* duree visionnage photo */
transform: translateX(-300%);
}
50%, /* plus transion */
57.5%{ /* duree visionnage photo */
transform: translateX(-400%);
}
62.5%, /* plus transion */
70%{ /* duree visionnage photo */
transform: translateX(-500%);
}
75%, /* plus transion */
82.5%{ /* duree visionnage photo */
transform: translateX(-600%);
}
87.5%, /* plus transion */
95%{ /* duree visionnage photo */
transform: translateX(-700%);
}
99.5%, /* plus transion
ICI JE TRICHE UN PEU POUR MASQUER L4EFFET DE RETOUR*/
100%{ /* duree visionnage photo */
transform: translateX(-800%);
}
}
/* Fin Slider */
/* ----------------------------------------------------- */
/* Debut section risque */
.h2
{
margin-top: 10px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
color: wheat;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: black; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
}
.risque
{
background-color: grey;
border: 10px ridge #404040; /* bordure des sections */
color: black;
width:100%;
height: 100%;
padding: 20px 20px 0 20px;
font-size: 18px; /* Taille ecriture text */
text-align: left;
}
/* Debut section risque */
/* Bouton Consulter */
.btn1 {
margin-left: auto; /* centrer elements */
margin-right: auto; /* centrer elements */
padding: 15px 5px 15px 8px;
margin-top: 40px;
margin-bottom: 40px;
width: 160px;
height: 70px;
font-size: 30px;
background-color: yellowgreen;
border-radius: 100%;
color: red;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte */
box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
}
.lienbtn {
color: red;
}
.btn1:hover a {
margin-left: auto; /* centrer elements */
margin-right: auto; /* centrer elements */
padding: 17px 7px 17px 10px;
margin-top: 40px;
margin-bottom: 40px;
width: 165px;
height: 75px;
font-size: 32px;
background-color: yellow;
border-radius: 100%;
color: black;
font-weight: bold;
text-shadow: red 0.1em 0.1em 0.2em; /* ombre texte */
box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
transition-property: background-color, border;
transition-duration:2s;
}
/* Fin Bouton Consulter */
/* Section 4 Validation Html/Css */
.section4 {
background-color: gray;
border: 10px ridge #404040; /* bordure des sections */
width: 100%;
}
.titre4
{
width: 95%; /* Largeur de la section */
height: auto; /* Hateur de la Section */
margin-top: 40px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 20px; /* espacement bord gauche titre1 */
background-color: #404040;
color: yellowgreen;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
.conteneur {
position:relative;
width:auto;
height:485px;
margin:10px auto;
display: flex;
}
.div4-1
{
background-color: transparent;
width: 33% ;
height: 300px;
}
.div4-2
{
background-color: transparent;
width: 34% ;
height: 300px;
}
.div4-3
{
background-color: transparent;
width: 33% ;
height: 300px;
}
/* Debut Image HTML CSS */
.div4-1 img
{
transition: all 1s ease;
}
.conteneur img#image-de-dessushtml
{
transform:scale(1,0);
opacity:0;
}
.conteneur img#image-de-dessuscss
{
transform:scale(1,0);
opacity:0;
}
.div4-1:hover img#image-de-dessushtml
{
opacity:1;
transform:scale(1,1);
}
.div4-1:hover img#image-de-dessuscss
{
opacity:1;
transform:scale(1,1);
}
.div4-1:hover img.image-de-dessous
{
transform:rotate(360deg) scale(0,0);
}
.div4-1:hover a {
background-color: transparent;
}
.div4-3:hover a {
background-color: transparent;
}
.div4-3 img
{
transition: all 1s ease;
}
.div4-3:hover img#image-de-dessushtml
{
opacity:1;
transform:scale(1,1);
}
.div4-3:hover img#image-de-dessuscss
{
opacity:1;
transform:scale(1,1);
}
.div4-3:hover img.image-de-dessous
{
transform:rotate(360deg) scale(0,0);
}
.image-de-dessous
{
width: 100%;
margin-top: 20px;
}
#image-de-dessushtml /*#image-de-dessus*/
{
width: 30%;
position:absolute;
top: 100px;
left: 0px;
}
#image-de-dessuscss /*#image-de-dessus*/
{
width: 30%;
position:absolute;
top: 100px;
right: 0px;
}
.div4-3 .image-de-dessous
{
width: 100%;
top: 0px;
left: 200px;
}
/* Fin Image HTML CSS */
/* Debut sous titre 2 */
.soustitre4
{
text-align: center;
border-radius: 100%; /* bordure logo */
background-color: #404040;
margin: 10px auto;/* marge sous titre */
padding: 10px;
width: 200px;
color: wheat;
text-shadow: yellowgreen 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* taille contour du texte */
-webkit-text-stroke-color: rgb(196, 129, 129); /* couleur contour du texte */
font-size: 40px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous div */
}
/* Fin sous titre 2 */
/* Debut Texte Version */
p.valid2
{
margin: 35px 0;
background-color: transparent;
position: relative;
top:-0px;
width: 100%;
height: auto;
text-align: center;
font-size: 20px;
font-weight: bold;
color: rgb(59, 9, 9);
transition: transform 1s;
}
p.valid2:hover
{
padding: 20px;
margin: 35px 0;
background-color: gray;
text-align: center; /* positionnement du texte*/
font-size: 30px; /* talle du texte*/
font-weight: bold; /* epaisseur texte */
color: wheat; /* Couleur texte */
text-shadow: rgb(66, 64, 64) 0.1em 0.1em 0.1em; /* ombre titre */
-webkit-text-stroke: 2px; /* Talle du contour du texte */
-webkit-text-stroke-color: rgb(185, 100, 100); /* Couleur contour du texte */
transform: scale(1.6);
box-shadow: black 0.1em 0.1em 0.3em; ; /* Bordure boite */
z-index: 9; /* Permet de mettre en premier plan la div */
position: relative;/* Toujours utiliser avec z-index */
}
.hrh
{
width:100%;
color:firebrick;
background-color:firebrick;
height:3px;
padding: 0px 0px;
margin:100px 0 0 0;
box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}
.hr
{
width:100%;
color:firebrick;
background-color:firebrick;
height:3px;
padding: 0px 0px;
margin:30px 0 0 0;
box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}
/* Fin section Validaation */
.compteur {
z-index: 100;
width: 110px;
height: auto;
background-color: transparent;
position: relative;
top: 50%;
left: 50%;
}
/* Fin CSS */
.donnee {
unicode-bidi: bidi-override;
direction: rtl;
float: left;
}
.lienfb a {
color: red;
float: left;
}
.map{
float: right;
}
/* Fin de mon CSS */
/* -----------------Retour haut de page----------------------------------- */
/* Shadow Triangle */
.triangle {
position:fixed;
display: inline-block;
transform: scaleX(2.5);
color: red; /* couleur origine */
text-shadow:
0 2px 2px black,
0 10px 4px whitesmoke;
font-size: 32px;
bottom: 5%;
left: 5%;
z-index: 10;
}
.retour:hover { background-color: transparent;}
.triangle a { text-decoration: none; color: yellowgreen }
.triangle:hover {
transition: all 0.2s ease;
transform: scaleX(2.5) translateY(4px) translatex(-4px);
text-shadow:
0 1px 1px #4b40fd;
}
/* ---------------------------------------------------- */
#postit1 {
float: right;
top: 20px;
right: 0px;
width : 250px;
height : 250px;
background-color : #F3F350;
margin : 10px 70px 20px 40px; /* Positionne mon Post-It*/
padding : 20px;
transform:rotate(20deg);
font-family : "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
border-radius : 5px;
z-index: 1;
}
.ptitrenote {
text-align: center;
}
#postit1:before {
content : "";
position : absolute;
top : 0;
right : 0;
border-color : red black #DCDC2E blue;
border-style : solid;
border-width : 0 30px 30px 0;
height : 0;
width : 0;
display : block;
box-shadow : 0 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
border-radius : 0 0 0 5px;
}
/* -------------------------------------- */