diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..d881af9
Binary files /dev/null and b/favicon.ico differ
diff --git a/konexio_exo1.html b/konexio_exo1.html
new file mode 100644
index 0000000..432a92d
--- /dev/null
+++ b/konexio_exo1.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+ Quiz Ludique
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Quiz de Culture Générale
+
+
+
Question 1 : Quelle est la capitale de la France ?
+
+
+
+
+
Question 2 : Quel est le plus grand océan du monde ?
+
+
+
+
+ Bonnes réponses : 0 sur 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..9917e92
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,18 @@
+# Voici ce que l'on va construire
+
+1. Une page avec un quizz
+ - HTML
+ - CSS
+ - JS
+ - ajouter des questions
+ - ajouter un site externe
+ - modifier les polices de question et des boutons
+2. Ajouter une page d'accueil avec une liste de quizz
+ - donc on fait deux pages, une page pour chaque catégorie de question
+ - une page d'accueil qui fait la liste des questions
+ - on fait la navigation entre les pages
+3. PHP
+ - pour le header et le footer, pour éviter de les répéter
+
+# Google font
+https://fonts.google.com/share?selection.family=Atma:wght@300;400;500;600;700
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d482a48
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+let correctCount = 0;
+let totalQuestions = 0;
+
+
+function checkAnswer(questionId, answer) {
+ const result = document.getElementById(questionId + '-result');
+
+ if (result.dataset.answered === "false") {
+ totalQuestions++;
+ if (answer === 'correct') {
+ correctCount++;
+ result.textContent = '✅ Bonne réponse !';
+ result.style.color = 'green';
+ } else {
+ result.textContent = '❌ Mauvaise réponse !';
+ result.style.color = 'red';
+ }
+
+ result.style.display = 'block';
+ result.dataset.answered = 'true';
+
+ // Mise à jour du score
+ updateScore();
+ }
+}
+
+function updateScore() {
+ document.getElementById('correct-count').textContent = correctCount;
+ document.getElementById('total-questions').textContent = totalQuestions;
+}
+
+function resetQuiz() {
+ correctCount = 0;
+ totalQuestions = 0;
+
+ document.querySelectorAll('.result').forEach(result => {
+ result.textContent = '';
+ result.style.display = 'none';
+ result.dataset.answered = 'false';
+ });
+
+ updateScore();
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..5d44189
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,184 @@
+html {
+ background-color: #FDB32D;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ background-color: #FDB32D;
+ color: black;
+ text-align: center;
+ padding: 20px;
+
+}
+header .titre {
+ font-size: 54px;
+}
+@media (max-width: 768px) {
+ header .titre {
+ font-size: 34px;
+ }
+}
+
+
+
+footer {
+ background-color: #FDB32D;
+ color: white;
+ text-align: center;
+ padding: 10px;
+}
+footer .message {
+ padding: 10px;
+}
+
+main {
+ align-self: center;
+ display: flex;
+ max-width: 2000px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+article {
+ width: 60%;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ margin-left: 30px;
+ margin-right: 20px;
+ padding: 20px;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+aside {
+ width: 20%;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ margin-left: auto;
+ margin-right: 20px;
+ padding: 20px;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+ main {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ article, aside {
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+ article {
+ width: 80%;
+ }
+ aside {
+ width: 50%;
+ }
+}
+
+h1 {
+ text-align: center;
+ color: #333;
+}
+
+.question {
+ margin: 20px 0;
+}
+
+.question p {
+ font-weight: bold;
+}
+
+button {
+ display: inline-block;
+ padding: 10px 20px;
+ margin: 10px 0;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+button a {
+ text-decoration: none;
+ color: white;
+}
+
+button a:hover {
+ text-decoration: none;
+ color: white;
+}
+button a:visited {
+ text-decoration: none;
+ color: white;
+}
+
+button:hover {
+ background-color: #e97e90;
+}
+
+.result {
+ display: none;
+ font-weight: bold;
+}
+
+.reset-btn {
+ margin-top: 20px;
+ background-color: #ff6666;
+}
+
+#correct-count {
+ color:#00A851;
+ font-weight: bold;
+
+}
+
+.atma-light {
+ font-family: "Atma", serif;
+ font-weight: 300;
+ font-style: normal;
+}
+
+.atma-regular {
+ font-family: "Atma", serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.atma-medium {
+ font-family: "Atma", serif;
+ font-weight: 500;
+ font-style: normal;
+}
+
+.atma-semibold {
+ font-family: "Atma", serif;
+ font-weight: 600;
+ font-style: normal;
+}
+
+.atma-bold {
+ font-family: "Atma", serif;
+ font-weight: 700;
+ font-style: normal;
+}
+
+.bg_rouge {
+ background-color: #EE2F4E;
+}
+.bg_vert {
+ background-color: #00A851;
+}
\ No newline at end of file