diff --git a/src/CSS/python-basics/intro-to-python.css b/src/CSS/python-basics/intro-to-python.css new file mode 100644 index 0000000..e338439 --- /dev/null +++ b/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,wght@8..60,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 */ + } +} diff --git a/src/Constants/index.js b/src/Constants/index.js index 9330ed6..093a858 100644 --- a/src/Constants/index.js +++ b/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*/ ]; diff --git a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx b/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx index 4e1d7ef..a3a9b4a 100644 --- a/src/Python_Library_Pages/Python_Basics/Introduction-to-Python.jsx +++ b/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 ( -
-

Introduction to Python

+
+

Introduction to Python

-

Development can start for Python from here

+

Python is a versatile and popular programming language created by Guido van Rossum in 1991. It is widely used for various purposes, including:

+ + + +

Key Capabilities of Python

+ +

Python's flexibility and capabilities make it a preferred choice for many developers:

+ + + +

Why Choose Python?

+ + + +

Learn More About Python

+ +

If you'd like to learn more about Python, here's a video introduction to Python programming:

+ + {/* Embed the YouTube video */} +
+ +
+
+

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.

); }; diff --git a/src/layouts/sidebar/index.jsx b/src/layouts/sidebar/index.jsx index ed41fb1..9a786c4 100644 --- a/src/layouts/sidebar/index.jsx +++ b/src/layouts/sidebar/index.jsx @@ -37,93 +37,96 @@ const Sidebar = () => { const Nav_animation = isTabletMid ? { - open: { - x: 0, - width: "16rem", - transition: { - damping: 40, - }, + open: { + x: 0, + width: "16rem", + transition: { + damping: 40, }, - closed: { - x: -250, - width: 0, - transition: { - damping: 40, - delay: 0.15, - }, + }, + closed: { + x: -250, + width: 0, + transition: { + damping: 40, + delay: 0.15, }, - } + }, + } : { - open: { - width: "24rem", - transition: { - damping: 40, - }, + open: { + width: "24rem", + transition: { + damping: 40, }, - closed: { - width: "4rem", - transition: { - damping: 40, - }, + }, + closed: { + width: "4rem", + transition: { + damping: 40, }, - }; -// subMenusList.map(menu => { -// console.log(menu); -// }) + }, + }; + // subMenusList.map(menu => { + // console.log(menu); + // }) + const styleSidebar = { + "position": "sticky", + "top": "0", + "maxHeight": "100vh" + } return ( -
+
setOpen(false)} - className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${ - open ? "block" : "hidden" - } `} + className={`md:hidden fixed inset-0 max-h-screen z-[998] bg-black/50 ${open ? "block" : "hidden" + } `} >
-
+ overflow-hidden md:relative fixed h-screen "> +
{/* */} -

LEARN DOCKER

- +

+ PyLibLog +

+
- +
    - {(open || isTabletMid) && (
    {/* Product categories */} - {subMenusList?.map((data,i) => ( + {subMenusList?.map((data, i) => (
    ))}
    )} -
{open && ( -
-
+
+
-

Clear History

- No-cost $0/month +

PyLibLog

+ From The Curious Community
- {/*

- Upgrade -

*/}
)} @@ -135,15 +138,15 @@ const Sidebar = () => { animate={ open ? { - x: 0, - y: 0, - rotate: 0, - } + x: 0, + y: 0, + rotate: 0, + } : { - x: -10, - y: -200, - rotate: 180, - } + x: -10, + y: -200, + rotate: 180, + } } transition={{ duration: 0 }} className="absolute w-fit h-fit md:block z-50 hidden right-2 bottom-3 cursor-pointer" @@ -158,4 +161,4 @@ const Sidebar = () => { ); }; -export default Sidebar; +export default Sidebar; \ No newline at end of file