Sidebar issue fixed

src/CSS/python-basics/intro-to-python.css

@@ -0,0 +1,81 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Source+Serif+4:opsz,[email protected],300&display=swap');
+
+/* Global Styles */
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+
+/* Container Styles */
+.container {
+    max-width: 100%; /* Ensure content fits within the viewport */
+    margin-left: -20px; /* Center align the container horizontally */
+    padding: 10px; /* Reduced padding */
+
+}
+
+.main-heading {
+    color: #8800ff;
+    font-size: 20px; /* Reduced font size */
+    margin-bottom: 5px; /* Reduced spacing */
+    text-align: center;
+}
+
+.sub-heading {
+    font-family: 'Source Serif 4', serif;
+    font-size: 18px; /* Reduced font size */
+    font-weight: bolder;
+    margin-bottom: 3px; /* Reduced spacing */
+    color: #000000;
+}
+
+.unordered-list {
+    list-style-type: circle;
+    margin-left: 0;
+    padding-left: 15px; /* Slightly reduced left padding */
+    text-align: left;
+    margin-bottom: 10px;
+}
+
+.unordered-list li {
+    font-weight: lighter;
+    color: #000000;
+    font-size: 12px; /* Reduced font size */
+    overflow-wrap: break-word; /* Allow text to wrap */
+    text-align: left;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 768px) {
+    .main-heading {
+        font-size: 16px; /* Further reduced font size for smaller screens */
+        margin-bottom: 3px; /* Adjusted spacing */
+    }
+
+    .sub-heading {
+        font-size: 14px; /* Further reduced font size for smaller screens */
+        margin-bottom: 3px; /* Adjusted spacing */
+    }
+
+    .unordered-list li {
+        font-size: 10px; /* Further reduced font size for smaller screens */
+        margin-bottom: 3px; /* Adjusted spacing */
+    }
+
+    .container p {
+        font-size: 10px; /* Reduced font size for paragraphs */
+        margin-bottom: 3px; /* Adjusted spacing */
+        overflow-wrap: break-word; /* Allow text to wrap */
+        text-align: left;
+    }
+
+    /* Reduce the video iframe size */
+    .video-container iframe {
+        width: 100%; /* Make it full width of container */
+        height: auto; /* Automatically adjust the height */
+    }
+}

src/Constants/index.js

@@ -7,7 +7,46 @@ export const subMenusList = [
       {
         title: "Introduction to Python",
         name: "Introduction-to-Python",
-
+      },
+      {
+        title: "Install Python",
+        name: "Install Python",
+      },
+      {
+        title: "Basic Python Program",
+        name: "Basic Python Program",
+      },
+      {
+        title: "Variables & Data types",
+        name: "Variables & Data Types",
+      },
+      {
+        title: "Basic Input & Output",
+        name: "Basic Input & Output",
+      },
+      {
+        title: "Conditional Statements",
+        name: "Conditional Statements",
+      },
+      {
+        title: "Loops",
+        name: "Loops",
+      },
+      {
+        title: "Functions",
+        name: "Functions",
+      },
+      {
+        title: "Data structures in Python",
+        name: "Data structures in Python", 
+      },
+      {
+        title: "Modules & Libraries",
+        name: "Modules & Libraries",
+      },
+      {
+        title: "Advance Topics",
+        name: "Advance Topics",
       }
     ],
   },
@@ -33,5 +72,38 @@ export const subMenusList = [
       }
     ],
   },
+  {
+    name: "Matplotlib-Library",
+    title: "4. Intro-to-Matplotlib",
+    children: [
+      {
+        title: "Introduction to Matplotlib",
+        name: "Introduction-to-Matplotlib",
+
+      }
+    ],
+  },
+  {
+    name: "Scikit-Library",
+    title: "5. Intro-to-Scikit-Learn",
+    children: [
+      {
+        title: "Introduction to Scikit-Learn",
+        name: "Introduction-to-Scikit-Learn",
+
+      }
+    ],
+  },
+  {
+    name: "Seaborn-Library",
+    title: "6. Intro-to-Seaborn",
+    children: [
+      {
+        title: "Introduction to Seaborn",
+        name: "Introduction to Seaborn",
+
+      }
+    ],
+  },
   /* remaining contents*/
 ];

src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx

@@ -1,11 +1,60 @@
 import React from "react";
+import '../../CSS/python-basics/intro-to-python.css';
 
 const PythonBasics = () => {
   return (
-    <div>
-      <h1>Introduction to Python</h1>
+    <div className="container">
+      <h1 className="main-heading">Introduction to Python</h1> 
 
-      <p>Development can start for Python from here</p>
+      <p>Python is a versatile and popular programming language created by Guido van Rossum in 1991. It is widely used for various purposes, including:</p>
+
+      <ul className="unordered-list">
+        <li>Web Development (server-side)</li>
+        <li>Software Development</li>
+        <li>Mathematics</li>
+        <li>System Scripting</li>
+      </ul>
+
+      <h2 className="sub-heading">Key Capabilities of Python</h2>
+
+      <p>Python's flexibility and capabilities make it a preferred choice for many developers:</p>
+
+      <ul className="unordered-list">
+        <li>Creating Web Applications</li>
+        <li>Automating Workflows</li>
+        <li>Database Connectivity</li>
+        <li>Data Manipulation and Analysis</li>
+        <li>Rapid Prototyping</li>
+        <li>Production-Ready Software Development</li>
+      </ul>
+
+      <h2 className="sub-heading">Why Choose Python?</h2>
+
+      <ul className="unordered-list">
+        <li>Multi-Platform Support (Windows, Mac, Linux, Raspberry Pi, etc.)</li>
+        <li>Simple and Readable Syntax (Similar to English)</li>
+        <li>Concise Code (Fewer Lines Compared to Other Languages)</li>
+        <li>Interpreted Language (Quick Prototyping)</li>
+        <li>Support for Procedural, Object-Oriented, and Functional Programming</li>
+      </ul>
+
+      <h2 className="sub-heading">Learn More About Python</h2>
+
+      <p>If you'd like to learn more about Python, here's a video introduction to Python programming:</p>
+
+      {/* Embed the YouTube video */}
+      <div className="video-container">
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/qwAFL1597eM"
+          title="Introduction to Python"
+          frameborder="0"
+          allowfullscreen
+        ></iframe>
+      </div>
+<br/>
+      <p>As you explore this guide, you'll dive deeper into Python's core concepts and practical applications. Whether you're a beginner or an experienced developer, Python offers a wide range of possibilities for your programming journey.</p>
     </div>
   );
 };