Update README.md

README.md

@@ -14,40 +14,40 @@ The **Model Context Protocol (MCP) Course** is your comprehensive guide to under
 
 ## 📑 Course Resources
 
-<div style="width: 100%; border: 1px solid #ccc; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 8px;">
+<div style="width: 100%; border: 1px solid #ccc; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 8px;">
   <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
-    <a href="https://youtu.be/p4q6LI-2yZ8" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+    <a href="https://youtu.be/p4q6LI-2yZ8" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
         <div>
-          <h3 style="margin-top: 10;">📹 Unit 0 Video</h3>
-          <p>Complete Introduction to The first parts of the MCP Course. This video is a must-watch for everyone who wants to start the MCP Course.</p>
+          <h3 style="margin-top: 10; color: #000000;">�� Unit 0 Video</h3>
+          <p style="color: #000000;">Complete Introduction to The first parts of the MCP Course. This video is a must-watch for everyone who wants to start the MCP Course.</p>
         </div>
         <img src="images/video_1.png" alt="Video Icon" style="height: 100%; width: auto; margin-left: 10px;">
       </div>
     </a>
-    <a href="https://youtube.com/live/aK8Jz-x5rJ8?feature=share" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+    <a href="https://youtube.com/live/aK8Jz-x5rJ8?feature=share" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
         <div>
-          <h3 style="margin-top: 10;">🔴 Unit 1 Live Stream</h3>
-          <p>On <b>29th May 8:00 PM CEST</b> we will have a live stream where we will cover Q&A and the MCP Course Unit 1 on MCP fundamentals. </p>
+          <h3 style="margin-top: 10; color: #000000;">🔴 Unit 1 Live Stream</h3>
+          <p style="color: #000000;">On <b style="color: #000000;">29th May 8:00 PM CEST</b> we will have a live stream where we will cover Q&A and the MCP Course Unit 1 on MCP fundamentals. </p>
         </div>
         <img src="images/live_session.png" alt="Live Stream Icon" style="height: 100%; width: auto; margin-left: 10px;">
       </div>
     </a>
-    <a href="https://huggingface.co/spaces/mcp-course/unit_1_quiz" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+    <a href="https://huggingface.co/spaces/mcp-course/unit_1_quiz" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
         <div>
-          <h3 style="margin-top: 10;">🏆 Get Certified</h3>
-          <p>If you want to get certified, you can do so by completing the MCP Course and passing the certification exam.</p>
+          <h3 style="margin-top: 10; color: #000000;">🏆 Get Certified</h3>
+          <p style="color: #000000;">If you want to get certified, you can do so by completing the MCP Course and passing the certification exam.</p>
         </div>
         <img src="images/certificate.png" alt="Certificate Icon" style="height: 100%; width: auto; margin-left: 10px;">
       </div>
     </a>
-    <a href="https://huggingface.co/learn/mcp-course/unit0/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 90px; margin-bottom: 10px; margin-top: 10px; margin-bottom: 30px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #ffffff, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #d0d0d0)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #ffffff, #e0e0e0)';">
+    <a href="https://huggingface.co/learn/mcp-course/unit0/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px; margin-bottom: 30px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
         <div>
-          <h3 style="margin-top: 10;">📝 Written Materials</h3>
-          <p>To start learning the MCP Course, you can start with the written materials.</p>
+          <h3 style="margin-top: 10; color: #000000;">📝 Written Materials</h3>
+          <p style="color: #000000;">To start learning the MCP Course, you can start with the written materials.</p>
         </div>
         <img src="images/written_material.png" alt="Written Materials Icon" style="height: 100%; width: auto; margin-left: 10px;">
       </div>