Fix Index Problem

This commit is contained in:
salaheddine benkhanous
2023-12-08 04:39:02 +01:00
6 changed files with 153 additions and 21 deletions
+46 -8
View File
@@ -17,20 +17,55 @@
}
h1 {
font-family: 'Manrope', extrabold;
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 64px;
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
color: #0E3B43;
}
p {
font-size: 18px;
margin-bottom: 30px;
font-family: 'Manrope', sans-serif;
font-weight: 300;
font-size: 20px;
color: #0E3B43;
}
#santa {
font-size: 72px;
cursor: pointer;
color: darkred;
}
.arrow-container {
display: flex;
}
.arrow_right {
font-size: 36px;
animation: swing_arrow_right 1s infinite alternate;
}
.arrow_left {
font-size: 36px;
animation: swing_arrow_left 1s infinite alternate;
}
@keyframes swing_arrow_right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(10px);
}
}
@keyframes swing_arrow_left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-10px);
}
}
</style>
</head>
@@ -40,10 +75,13 @@
<p>En cette période festive, pensons à la nature et à la durabilité.</p>
<p>Faites un geste écologique pendant les fêtes ! 🌲</p>
<div id="santa" onclick="showEasterEgg()">→ 🎅 ←</div>
<div class="arrow-container">
<p class="arrow_right"></p>
<div id="santa" onclick="showEasterEgg()">🎅</div>
<p class="arrow_left"></p>
</div>
<script>
function showEasterEgg() {
const showEasterEgg = () => {
alert("Easter Egg : C'est le moment de penser à des cadeaux éco-friendly !");
}
</script>
+1
View File
@@ -30,6 +30,7 @@
<h2>distinguons la réalité<br>des idées reçues.</h2>
<p id="sous-pres">
Défiez les idées reçues sur l'écologie avec notre quiz captivant !
</br>
Testez-vous dès maintenant pour une expérience éducative et
amusante.
</p>
+84
View File
@@ -43,13 +43,39 @@
<div class="container">
<div class="choices">
<<<<<<< HEAD
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
</section>
||||||| 05f6282
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft">
</section>
=======
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft">
<div class="text-overlay">Votre texte ici</div>
</section>
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
<<<<<<< HEAD
<section id="right">
<img class="image" id="imgright" src="./img/imgright.webp" alt="imgright">
</section>
||||||| 05f6282
<section id="right">
<img class="image" id="imgright" src="./img/imgright.webp"
alt="imgright">
</section>
=======
<section id="right">
<img class="image" id="imgright" src="./img/imgright.webp"
alt="imgright">
<div class="text-overlay">Votre texte ici</div>
</section>
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
</div>
<div class="question">
@@ -86,6 +112,24 @@
let score = 20;
<<<<<<< HEAD
function augmenterCompteur() {
score += 5;
||||||| 05f6282
let score = 20;
=======
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
<<<<<<< HEAD
if (score >= 5) {
document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 10) {
document.getElementById('star2').style.visibility = 'visible';
}
if (score >= 15) {
document.getElementById('star3').style.visibility = 'visible';
||||||| 05f6282
function augmenterCompteur() {
score += 5;
@@ -107,6 +151,46 @@
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
=======
let score = 0;
function augmenterCompteur() {
score++;
if (score >= 5) {
document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 10) {
document.getElementById('star2').style.visibility = 'visible';
}
if (score >= 15) {
document.getElementById('star3').style.visibility = 'visible';
}
if (score >= 20) {
document.getElementById('star4').style.visibility = 'visible';
}
if (score >= 25) {
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
}
if (score >= 20) {
document.getElementById('star4').style.visibility = 'visible';
}
if (score >= 25) {
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
+4
View File
@@ -0,0 +1,4 @@
Liste des easter eggs :
- Joyeux noël écologique ! : Répondez juste à toutes les questions du quizz
et une nouvelle page s'ouvre.
+11 -9
View File
@@ -93,14 +93,18 @@ section a {
/*background-image: url('');*/
}
.answer {
margin-top: 50vh;
text-align: center;
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-family: 'inter', sans-serif;
font-weight: 400;
font-size: 40px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: center;
padding: 10px;
color: white;
}
.question {
@@ -108,8 +112,6 @@ section a {
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #FFF1DD;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
border-radius: 10px;
@@ -122,14 +124,14 @@ section a {
.question h2 {
font-family: 'inter', sans-serif;
font-weight: 400;
font-size: 40px;
font-size: 35px;
color: black;
margin: 0;
}
.question p {
font-family: 'Manrope', sans-serif;
font-size: 20px;
font-size: 25px;
color: black;
}
+7 -4
View File
@@ -17,7 +17,8 @@ main {
}
h1 {
font-family: 'Manrope', extrabold;
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 64px;
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -25,14 +26,16 @@ h1 {
}
h2 {
font-family: 'Manrope', extrabold;
font-family: 'Manrope', sans-serif;
font-weight: 400;
font-size: 48px;
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#sous-pres {
font-family: 'Manrope', bold;
font-family: 'Manrope', sans-serif;
font-weight: 300;
font-size: 20px;
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -45,7 +48,7 @@ h2 {
height: 59px;
padding: 10px 20px;
margin-top: 90px;
font-family: 'Manrope', bold;
font-family: 'Manrope', sans-serif;
font-size: 20px;
border: none;
border-radius: 10px;