done

iamrahulmahato · Nov 10, 2024 · cb6e3cd · cb6e3cd
1 parent 4fa7510
commit cb6e3cd
Showing 1 changed file with 34 additions and 24 deletions.
diff --git a/challenges/easycss.html b/challenges/easycss.html
@@ -7,7 +7,8 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #08114c;
+            background-color: #e0e7ff;
+            color: #333;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -17,21 +18,26 @@
         }
 
         .quiz-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            background-color: #fdfbff;
+            color: #333;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
             max-width: 600px;
             width: 100%;
         }
 
         h1 {
             text-align: center;
-            margin-bottom: 20px;
+            margin-bottom: 25px;
+            color: #5a189a;
+            font-size: 1.8em;
         }
 
         .question {
+            font-weight: bold;
             margin-bottom: 15px;
+            color: #333;
         }
 
         .options {
@@ -40,38 +46,42 @@
         }
 
         .option {
-            background-color: #e7f3fe;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 5px 0;
+            background-color: #f1faff;
+            color: #333;
+            padding: 12px;
+            border-radius: 6px;
+            margin: 8px 0;
             cursor: pointer;
-            transition: background-color 0.3s;
-            border: 2px solid transparent; /* Default border */
+            transition: background-color 0.3s, transform 0.2s;
+            border: 2px solid transparent;
         }
 
         .option:hover {
-            background-color: #d1e7fd;
+            background-color: #e0f7fa;
+            transform: scale(1.02);
         }
 
         .selected {
-            background-color: #b3e5fc;
-            border: 2px solid #007bff; /* Selected border color */
+            background-color: #ffccd5;
+            border: 2px solid #ff577f;
+            color: #ff577f;
         }
 
         button {
-            background-color: #007bff;
+            background-color: #5a189a;
             color: white;
             border: none;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 6px;
             cursor: pointer;
-            display: block;
             width: 100%;
-            margin-top: 10px;
+            font-size: 1em;
+            transition: background-color 0.3s;
+            margin-top: 15px;
         }
 
         button:hover {
-            background-color: #0056b3;
+            background-color: #4e148c;
         }
 
         .hidden {
@@ -134,7 +144,7 @@ <h1>CSS EASY CHALLENGE</h1>
                 options: [
                     "django",
                     "rails",
-                    "larawell",
+                    "laravel",
                     "bootstrap"
                 ],
                 answer: 3
@@ -237,10 +247,10 @@ <h3>${question.question}</h3>
 
         function submitAnswers() {
             alert(`You scored ${score} out of ${questions.length}`);
-            window.location.href = 'index.html'; // Redirect to main page after submitting
+            window.location.href = 'index.html';
         }
 
-        window.onload = showQuestion; // Show the first question when the page loads
+        window.onload = showQuestion;
     </script>
 </body>
 </html>