Merge pull request #87 from Boobeshkumar56/main

added 3d icons for more attractive look

index.html

@@ -44,14 +44,17 @@ <h1>Welcome to Math 4 Python</h1>
         <div class="features">
             <h2>Key Features:</h2>
             <div class="feature">
+                <img src="images/lesson.png" alt="lesson_image" id="icon1">
                 <h3>Interactive Lessons</h3>
                 <p>Learn Python through hands-on, interactive coding exercises.</p>
             </div>
             <div class="feature">
+                <img src="images/task.png" alt="challenge_image" id="icon2">
                 <h3>Math-focused Challenges</h3>
                 <p>Solve mathematical problems using Python to reinforce your skills.</p>
             </div>
             <div class="feature">
+                <img src="images/feedback.png" alt="feedback_image" id="icon3">
                 <h3>Real-time Feedback</h3>
                 <p>Get instant feedback on your code and track your progress.</p>
             </div>

styles.css

@@ -40,7 +40,18 @@ body {
 .navbar a:hover {
     background-color: #007bff;
     color: #fff;
-    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+    box-shadow: 0 4px 12px rgba(163, 165, 167, 0.2);
+}
+
+#icon1{
+    width:50%;
+    height:50%
+}
+#icon2,#icon3{
+    width:50%;
+    height:40%
+
+
 }
 
 .navbar a.active {
@@ -119,6 +130,10 @@ h2 {
 .feature:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Lift on hover */
+    #icon1,#icon2,#icon3{
+        cursor: pointer;
+        filter:drop-shadow(10px 10px 7px #9dc6f1);
+    }
 }
 
 .feature h3 {