edit result style and marked style

css/style.css

@@ -11,7 +11,7 @@ body {
 #notfound {
   position: relative;
   height: 100vh;
-  background-color: #fafbfd;
+  background-color: #f1f1f1;
 }
 
 #notfound .notfound {
@@ -44,7 +44,7 @@ body {
   width: 100%;
   background: #fff;
   border-radius: 90px;
-  height: 125px;
+  height: 140px;
 }
 
 .notfound .notfound-bg > div:nth-child(1) {
@@ -85,18 +85,40 @@ body {
   margin: 0;
   font-weight: 700;
   color: #151515;
+  /* color: #269a48; */
+  font-size: 33px;
 }
 
 
+#image-stauts{
+  width: 150px;
+  margin: 10px 0;
+}
+.score{
+  font-size: 20px;
+}
+
+.score #score-number{
+  display: inline-block;
+  padding: 10px 30px;
+  border-radius: 20px;
+  color: white;
+}
+
 @media only screen and (max-width: 767px) {
     .notfound .notfound-bg {
       width: 287px;
-      margin: auto;
+      margin: 0 auto;
     }
 
     .notfound .notfound-bg > div {
-      height: 85px;
+      height: 140px;
+      width: 320px;
+  }
+  #resultMessage {
+    font-size: 18px;
   }
+
 }
 
 @media only screen and (max-width: 480px) {
@@ -107,4 +129,18 @@ body {
   .notfound h2 {
     font-size: 18px;
   }
+  .notfound .notfound-bg > div {
+
+
+    border-radius: 90px;
+    height: 140px;
+  }
+  .score {
+    font-size: 13px;
+  }
+
+  .notfound h2 {
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
 }

js/result.js

@@ -3,11 +3,22 @@
     const score = urlParams.get('score');
     const scoreDisplay = document.getElementById('score');
     const resultMessage = document.getElementById('resultMessage');
+    const image = document.getElementById("image-stauts");
+    const head2 = document.getElementById("head2");
+    const scoreNumber = document.getElementById("score-number");
 
     scoreDisplay.textContent = score;
 
     if (score >= 6) {
         resultMessage.textContent = 'Congratulations! You passed the quiz.';
+        head2.style.color = "#269a48";
+        resultMessage.style.color = "#269a48";
+        scoreNumber.style.backgroundColor = "#269a48";
+        image.src = "congratulation.png";
     } else {
-        resultMessage.textContent = 'Sorry! You did not pass the quiz. Please try again.';
+        resultMessage.textContent = 'Sorry! You did not pass the quiz.';
+        head2.style.color = "#de0909";
+        scoreNumber.style.backgroundColor = "#de0909";
+        resultMessage.style.color = "#de0909";
+        image.src = "fail.png";
 }

result.html

@@ -18,9 +18,12 @@
 				<div></div>
 				<div></div>
 			</div>
-			<h2>Quiz Result</h2>
+			<h2 id="head2">Quiz Result</h2>
+			<div>
+				<img id="image-stauts" src="" alt="">
+			</div>
 			<div class="score">
-				<p>Your score is: <strong id="score"></strong></p>
+				<p id="score-number">Your score is: <strong id="score"></strong></p>
 				<p id="resultMessage"></p>
 			</div>
 		</div>

style/quiz.css

@@ -180,8 +180,11 @@ label {
 .marked-question {
   cursor: pointer;
   padding: 10px;
-  border-bottom: 1px solid #2d1414;
   text-align: center;
+  background-color: #f2be42;
+  margin: 20px 5px;
+  border-radius: 5px;
+
 }
 
 .title-ques {