154 lines
3.2 KiB
Plaintext
154 lines
3.2 KiB
Plaintext
#world_wrapper {
|
||
/* correction */
|
||
background: url('https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg');
|
||
border: 3px solid blue;
|
||
text-align: center;
|
||
padding: 10px;
|
||
margin: -10px;
|
||
|
||
}
|
||
#foret {
|
||
border: 8px solid green;
|
||
margin-bottom: 30px;
|
||
}
|
||
#world_wrapper:has(#checkbox:checked) {
|
||
background: #ffa5002b;
|
||
}
|
||
#world_wrapper:has(.champignon_bleu) {
|
||
background: blue;
|
||
}
|
||
|
||
|
||
#champi_img {
|
||
display:none;
|
||
}
|
||
|
||
#world_wrapper:has(#checkbox:checked) #foret,
|
||
#checkbox:checked + #foret,
|
||
#foret:has(.champignon_rouge) {
|
||
border: 5px solid red;
|
||
}
|
||
|
||
#foret {
|
||
margin: auto; /* si display==block + width donnée...
|
||
.... les marges auto à gauche et à droite vont centrer l'élément*/
|
||
width: 600px;
|
||
position: relative;
|
||
}
|
||
#foret,
|
||
.champignon_rouge {
|
||
background-size: 100% !important;
|
||
height: 410px;
|
||
display: block;
|
||
width: 400px;
|
||
background-position: 0px bottom !important;
|
||
background-repeat: no-repeat !important;
|
||
}
|
||
#foret {
|
||
/* correction */
|
||
background: url('https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg');
|
||
height: 420px;
|
||
width: 740px;
|
||
}
|
||
.champignon_rouge {
|
||
width: 400px;
|
||
background: url('https://cdn.futura-sciences.com/buildsv6/images/wide1920/0/e/7/0e77024415_77241_canonique-1358.jpg');
|
||
background-size: 200px auto !important;
|
||
background-position: left bottom !important;
|
||
display: block;
|
||
position: relative;
|
||
/* si l'élément est positionné (relative, fixed, absolute...) */
|
||
/* on peut changer sa position en partant... */
|
||
/* du haut==top bas==bottom gauche==left droite==right */
|
||
/* ... on peut mettre des valeurs négatives/ou/positives */
|
||
bottom: 10px; /* l'élément est déplacé de 10px depuis le bas */
|
||
right: -200px; /* l'élément est déplacé de -100px depuis le droite */
|
||
/* ... ici negatif(soustraction), ici le déplace vers la gauche*/
|
||
}
|
||
.champignon_rouge.droite {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 100px !important;
|
||
z-index: 99999;
|
||
border: 1px solid red;
|
||
width: 100px !important;
|
||
background: none !important;
|
||
height: 100px !important;
|
||
}
|
||
|
||
#world_wrapper:has(#checkbox:checked) .champignon_rouge {
|
||
background-size: 100px auto !important;;
|
||
}
|
||
#world_wrapper:has(#checkbox:checked) #foret:hover {
|
||
width: 100vw;
|
||
.champignon_rouge:not(.droite) {
|
||
width: fit-content !important;
|
||
background-size: contain !important;
|
||
height: 40%;
|
||
background-position: center bottom !important;
|
||
left: 230px;
|
||
bottom: 20px;
|
||
border: 3px solid red;
|
||
min-width: 380px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
#world_wrapper a:active ~ #foret img,
|
||
#world_wrapper a:active ~ #foret .champignon_rouge {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
#champi_img {
|
||
position: absolute;
|
||
width: 100px;
|
||
z-index: 999;
|
||
bottom: 0;
|
||
left: 10vw;
|
||
}
|
||
#champi_img_droite {
|
||
position: absolute;
|
||
width: 100px;
|
||
z-index: 999;
|
||
bottom: 0;
|
||
left: 0px;
|
||
right: auto;
|
||
width: auto;
|
||
height: auto;
|
||
max-height: 100px
|
||
}
|
||
#checkbox:checked + #foret img {
|
||
display: block;
|
||
}
|
||
input#checkbox {
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* correction */
|
||
#world_wrapper:has(#checkbox:checked) {
|
||
.champignon_rouge {
|
||
left: 400px !important;
|
||
}
|
||
}
|
||
#world_wrapper:has(#checkbox:checked) #foret:hover {
|
||
.champignon_rouge:not(.droite) {
|
||
left: 400px !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|