Merge pull request #49 from Adi-204/Bugfix

Fix dark theme bug of About Page
codingkatty · Oct 13, 2024 · 3f7493c · 3f7493c
2 parents 1317e93 + 4fa6094
commit 3f7493c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 62 deletions.
diff --git a/about.html b/about.html
@@ -10,54 +10,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" 
           integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" 
           crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <style>
-        body {
-            font-family: 'Arial', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f4f4;
-            color: #333;
-        }
-        .container {
-            width: 80%;
-            margin: 20px auto;
-            padding: 20px;
-            background: white;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-        }
-        h1, h2 {
-            text-align: center;
-            color: #2C3E50;
-        }
-        p {
-            line-height: 1.6;
-            margin-bottom: 20px;
-            text-align: justify;
-        }
-        a {
-            color: #3498DB;
-            text-decoration: none;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-        .banner {
-            background-color: #2980B9;
-            color: white;
-            padding: 10px 0;
-            margin-bottom: 20px;
-            text-align: center;
-            border-radius: 8px 8px 0 0;
-        }
-        .banner h1 {
-            margin: 0;
-            font-size: 2em;
-        }
-        .section {
-            margin: 20px 0;
-        }
-    </style>
 </head>
 <body>
     <div class="navbar">
@@ -77,25 +29,25 @@
         <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
     </div>
 
-    <div class="container">
+    <div class="about-container">
         <div class="banner">
-            <h1>About Math 4 Python</h1>
+            <h1 class="about-h1">About Math 4 Python</h1>
         </div>
-        <div class="section">
-            <h2>Our Mission</h2>
-            <p>Welcome to Math 4 Python, where we blend the art of Python programming with the science of mathematics. Our mission is to provide a comprehensive learning platform that enhances your coding skills while deepening your understanding of mathematical concepts and problem-solving techniques.</p>
+        <div class="about-section">
+            <h2 class="about-h2">Our Mission</h2>
+            <p class="about-p">Welcome to Math 4 Python, where we blend the art of Python programming with the science of mathematics. Our mission is to provide a comprehensive learning platform that enhances your coding skills while deepening your understanding of mathematical concepts and problem-solving techniques.</p>
         </div>
-        <div class="section">
-            <h2>What We Offer</h2>
-            <p>At Math 4 Python, we offer a structured learning path that starts with the basics of Python programming and gradually incorporates complex mathematical problems. Our content includes interactive lessons, practical exercises, and real-world applications to help you master both coding and math.</p>
+        <div class="about-section">
+            <h2 class="about-h2">What We Offer</h2>
+            <p class="about-p">At Math 4 Python, we offer a structured learning path that starts with the basics of Python programming and gradually incorporates complex mathematical problems. Our content includes interactive lessons, practical exercises, and real-world applications to help you master both coding and math.</p>
         </div>
-        <div class="section">
-            <h2>Why Learn With Us?</h2>
-            <p>Our unique approach combines theoretical knowledge with hands-on practice. By learning Python through mathematical problems, you gain a dual advantage: proficiency in a powerful programming language and a solid foundation in math. This combination is essential for careers in data science, engineering, finance, and more.</p>
+        <div class="about-section">
+            <h2 class="about-h2">Why Learn With Us?</h2>
+            <p class="about-p">Our unique approach combines theoretical knowledge with hands-on practice. By learning Python through mathematical problems, you gain a dual advantage: proficiency in a powerful programming language and a solid foundation in math. This combination is essential for careers in data science, engineering, finance, and more.</p>
         </div>
-        <div class="section">
-            <h2>Contact Us</h2>
-            <p>If you have any questions or would like more information, feel free to reach out to us at <a href="https://magicmath.co/">https://magicmath.co/</a>.</p>
+        <div class="about-section">
+            <h2 class="about-h2">Contact Us</h2>
+            <p class="about-p">If you have any questions or would like more information, feel free to reach out to us at <a class="about-link" href="https://magicmath.co/">https://magicmath.co/</a>.</p>
         </div>
     </div>
 

diff --git a/styles.css b/styles.css
@@ -483,6 +483,41 @@ body.dark-theme .accordion.active {
     background-color: #34495e;
 }
 
+/* About Page Style */
+.about-container {
+    width: 80%;
+    margin: 20px auto;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+.about-h1, .about-h2 {
+    text-align: center;
+    color: #2C3E50;
+}
+.about-p {
+    line-height: 1.6;
+    margin-bottom: 20px;
+    text-align: justify;
+}
+.about-link {
+    color: #3498DB;
+    text-decoration: none;
+}
+.about-link:hover {
+    text-decoration: underline;
+}
+.banner h1 {
+    margin: 0;
+    font-size: 2em;
+}
+.about-section {
+    margin: 20px 0;
+} 
+body.dark-theme .about-container {
+    background-color: #0f3460;
+}
+
 /* Responsive design for challenge and FAQ pages */
 @media (max-width: 768px) {
     .challenge-container {