Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DataSphere - Free Data Science Learning Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #4f46e5; | |
| transition: width .3s; | |
| } | |
| .progress-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-chart-line text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">DataSphere</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="nav-link border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#courses" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Courses</a> | |
| <a href="#path" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Learning Path</a> | |
| <a href="#resources" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-50 text-indigo-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-100 transition">Sign In</button> | |
| <button class="ml-4 bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition">Sign Up</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Master Data Science for Free | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl"> | |
| Curated collection of the best free data science courses from beginner to advanced levels. Start your journey today! | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#courses" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-50"> | |
| Browse Courses | |
| </a> | |
| <a href="#path" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Learning Path | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-indigo-600">500+</p> | |
| <p class="mt-2 text-base text-gray-500">Free Courses</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-indigo-600">100+</p> | |
| <p class="mt-2 text-base text-gray-500">Hours of Content</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-indigo-600">1M+</p> | |
| <p class="mt-2 text-base text-gray-500">Students</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-5xl font-extrabold text-indigo-600">50+</p> | |
| <p class="mt-2 text-base text-gray-500">Expert Instructors</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Courses Section --> | |
| <div id="courses" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Courses</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Free Data Science Courses | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Carefully selected courses from top universities and platforms | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="flex space-x-4 mb-6 overflow-x-auto pb-2 custom-scrollbar"> | |
| <button class="category-btn px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium">All</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Beginner</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Intermediate</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Advanced</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Python</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">R</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Machine Learning</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 border border-gray-300 text-sm font-medium hover:bg-gray-50">Deep Learning</button> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Course cards will be added here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Learning Path --> | |
| <div id="path" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Learning Path</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| From Zero to Data Science Pro | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Structured roadmap to guide your learning journey | |
| </p> | |
| </div> | |
| <div class="mt-10 space-y-10"> | |
| <!-- Beginner Level --> | |
| <div class="relative"> | |
| <div class="absolute left-4 top-4 h-full w-0.5 bg-gray-200" aria-hidden="true"></div> | |
| <div class="relative flex space-x-6"> | |
| <div> | |
| <span class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-100 ring-8 ring-white"> | |
| <span class="text-indigo-600 font-bold">1</span> | |
| </span> | |
| </div> | |
| <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Beginner Level</h3> | |
| <p class="text-sm text-gray-500">Foundation building (3-6 months)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 ml-16"> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Python Programming</h4> | |
| <p class="text-sm text-gray-500 mt-1">Learn Python fundamentals for data science</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="75"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">75% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Statistics Fundamentals</h4> | |
| <p class="text-sm text-gray-500 mt-1">Essential statistics for data analysis</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="60"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">60% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Data Visualization</h4> | |
| <p class="text-sm text-gray-500 mt-1">Matplotlib, Seaborn, and Plotly basics</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="45"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">45% complete</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Intermediate Level --> | |
| <div class="relative"> | |
| <div class="absolute left-4 top-4 h-full w-0.5 bg-gray-200" aria-hidden="true"></div> | |
| <div class="relative flex space-x-6"> | |
| <div> | |
| <span class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-100 ring-8 ring-white"> | |
| <span class="text-indigo-600 font-bold">2</span> | |
| </span> | |
| </div> | |
| <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Intermediate Level</h3> | |
| <p class="text-sm text-gray-500">Core data science skills (6-9 months)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 ml-16"> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Machine Learning</h4> | |
| <p class="text-sm text-gray-500 mt-1">Supervised and unsupervised learning</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="30"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">30% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">SQL & Databases</h4> | |
| <p class="text-sm text-gray-500 mt-1">Working with relational databases</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="25"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">25% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Data Wrangling</h4> | |
| <p class="text-sm text-gray-500 mt-1">Cleaning and preparing data</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="20"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">20% complete</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Level --> | |
| <div class="relative"> | |
| <div class="absolute left-4 top-4 h-full w-0.5 bg-gray-200" aria-hidden="true"></div> | |
| <div class="relative flex space-x-6"> | |
| <div> | |
| <span class="flex items-center justify-center h-8 w-8 rounded-full bg-indigo-100 ring-8 ring-white"> | |
| <span class="text-indigo-600 font-bold">3</span> | |
| </span> | |
| </div> | |
| <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">Advanced Level</h3> | |
| <p class="text-sm text-gray-500">Specialization (9-12+ months)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 ml-16"> | |
| <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Deep Learning</h4> | |
| <p class="text-sm text-gray-500 mt-1">Neural networks and TensorFlow/PyTorch</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="10"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">10% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">Big Data</h4> | |
| <p class="text-sm text-gray-500 mt-1">Hadoop, Spark, and distributed computing</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="5"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">5% complete</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-900">ML Deployment</h4> | |
| <p class="text-sm text-gray-500 mt-1">Productionizing machine learning models</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 0%" data-target="0"></div> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-500">0% complete</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resources Section --> | |
| <div id="resources" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Resources</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Additional Learning Materials | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Books, datasets, cheat sheets, and more to boost your learning | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-book text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Free Books</h3> | |
| <p class="mt-1 text-sm text-gray-500">Curated collection of free data science books</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View collection<span aria-hidden="true"> →</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-database text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Datasets</h3> | |
| <p class="mt-1 text-sm text-gray-500">Practice with real-world datasets</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Browse datasets<span aria-hidden="true"> →</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i class="fas fa-file-alt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Cheat Sheets</h3> | |
| <p class="mt-1 text-sm text-gray-500">Quick references for Python, R, SQL, etc.</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Download PDFs<span aria-hidden="true"> →</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i class="fas fa-laptop-code text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Practice Platforms</h3> | |
| <p class="mt-1 text-sm text-gray-500">Websites to practice coding challenges</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Explore platforms<span aria-hidden="true"> →</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center"> | |
| <div class="lg:w-0 lg:flex-1"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Stay updated with new courses | |
| </h2> | |
| <p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-200"> | |
| Subscribe to our newsletter to get notified when we add new free courses and resources. | |
| </p> | |
| </div> | |
| <div class="mt-8 lg:mt-0 lg:ml-8"> | |
| <form class="sm:flex"> | |
| <label for="email-address" class="sr-only">Email address</label> | |
| <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email"> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0"> | |
| <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </form> | |
| <p class="mt-3 text-sm text-indigo-200"> | |
| We care about your data. Read our <a href="#" class="text-white font-medium underline">Privacy Policy</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Home</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#courses" class="text-base text-gray-500 hover:text-gray-900">Courses</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#path" class="text-base text-gray-500 hover:text-gray-900">Learning Path</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#resources" class="text-base text-gray-500 hover:text-gray-900">Resources</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a> | |
| </div> | |
| </nav> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">GitHub</span> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">YouTube</span> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-center text-base text-gray-400"> | |
| © 2023 DataSphere. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample course data | |
| const courses = [ | |
| { | |
| title: "Introduction to Data Science", | |
| provider: "Coursera (University of Michigan)", | |
| level: "Beginner", | |
| duration: "Approx. 20 hours", | |
| description: "Learn about the data science process and the tools used by data scientists.", | |
| link: "https://www.coursera.org/learn/python-data-analysis", | |
| free: true, | |
| rating: 4.8, | |
| tags: ["Python", "Beginner"] | |
| }, | |
| { | |
| title: "Python for Data Science", | |
| provider: "edX (IBM)", | |
| level: "Beginner", | |
| duration: "6 weeks, 2-4 hours/week", | |
| description: "Learn Python programming fundamentals for data science applications.", | |
| link: "https://www.edx.org/course/python-for-data-science", | |
| free: true, | |
| rating: 4.7, | |
| tags: ["Python", "Beginner"] | |
| }, | |
| { | |
| title: "Data Science Math Skills", | |
| provider: "Coursera (Duke University)", | |
| level: "Beginner", | |
| duration: "Approx. 13 hours", | |
| description: "Essential math for data science - probability, statistics, and linear algebra.", | |
| link: "https://www.coursera.org/learn/datasciencemathskills", | |
| free: true, | |
| rating: 4.6, | |
| tags: ["Statistics", "Beginner"] | |
| }, | |
| { | |
| title: "Machine Learning", | |
| provider: "Coursera (Stanford University)", | |
| level: "Intermediate", | |
| duration: "Approx. 60 hours", | |
| description: "Andrew Ng's famous course covering machine learning fundamentals.", | |
| link: "https://www.coursera.org/learn/machine-learning", | |
| free: true, | |
| rating: 4.9, | |
| tags: ["Machine Learning", "Intermediate"] | |
| }, | |
| { | |
| title: "Data Visualization with Python", | |
| provider: "Coursera (IBM)", | |
| level: "Intermediate", | |
| duration: "Approx. 15 hours", | |
| description: "Learn to create meaningful visualizations with Matplotlib, Seaborn, and Plotly.", | |
| link: "https://www.coursera.org/learn/python-for-data-visualization", | |
| free: true, | |
| rating: 4.6, | |
| tags: ["Python", "Data Visualization", "Intermediate"] | |
| }, | |
| { | |
| title: "Deep Learning Specialization", | |
| provider: "Coursera (deeplearning.ai)", | |
| level: "Advanced", | |
| duration: "5 months, 5 hours/week", | |
| description: "Master deep learning concepts and applications with TensorFlow.", | |
| link: "https://www.coursera.org/specializations/deep-learning", | |
| free: true, | |
| rating: 4.9, | |
| tags: ["Deep Learning", "Advanced"] | |
| }, | |
| { | |
| title: "Data Science: R Basics", | |
| provider: "edX (Harvard University)", | |
| level: "Beginner", | |
| duration: "8 weeks, 1-2 hours/week", | |
| description: "Introduction to R programming for data science applications.", | |
| link: "https://www.edx.org/course/data-science-r-basics", | |
| free: true, | |
| rating: 4.5, | |
| tags: ["R", "Beginner"] | |
| }, | |
| { | |
| title: "SQL for Data Science", | |
| provider: "Coursera (University of California)", | |
| level: "Intermediate", | |
| duration: "Approx. 14 hours", | |
| description: "Learn SQL fundamentals for querying databases in data science.", | |
| link: "https://www.coursera.org/learn/sql-for-data-science", | |
| free: true, | |
| rating: 4.7, | |
| tags: ["SQL", "Intermediate"] | |
| }, | |
| { | |
| title: "Applied Data Science with Python", | |
| provider: "Coursera (University of Michigan)", | |
| level: "Intermediate", | |
| duration: "5 months, 7 hours/week", | |
| description: "Applied data science specialization using Python tools.", | |
| link: "https://www.coursera.org/specializations/data-science-python", | |
| free: true, | |
| rating: 4.6, | |
| tags: ["Python", "Intermediate"] | |
| } | |
| ]; | |
| // Render courses | |
| function renderCourses(filter = 'All') { | |
| const container = document.querySelector('.grid.grid-cols-1.gap-6.sm\\:grid-cols-2.lg\\:grid-cols-3'); | |
| container.innerHTML = ''; | |
| const filteredCourses = filter === 'All' | |
| ? courses | |
| : courses.filter(course => course.tags.includes(filter) || course.level === filter); | |
| filteredCourses.forEach(course => { | |
| const courseCard = document.createElement('div'); | |
| courseCard.className = 'course-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out'; | |
| courseCard.innerHTML = ` | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">${course.title}</h3> | |
| <p class="mt-1 text-sm text-gray-500">${course.provider}</p> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex items-center"> | |
| ${Array(Math.floor(course.rating)).fill('<i class="fas fa-star text-yellow-400"></i>').join('')} | |
| ${course.rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt text-yellow-400"></i>' : ''} | |
| ${Array(5 - Math.ceil(course.rating)).fill('<i class="far fa-star text-yellow-400"></i>').join('')} | |
| <span class="ml-1 text-sm text-gray-500">${course.rating}</span> | |
| </div> | |
| <span class="ml-3 text-xs px-2 py-1 rounded-full ${course.level === 'Beginner' ? 'bg-green-100 text-green-800' : course.level === 'Intermediate' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}">${course.level}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-600">${course.description}</p> | |
| </div> | |
| <div class="mt-5 flex justify-between items-center"> | |
| <span class="text-sm font-medium ${course.free ? 'text-green-600' : 'text-gray-500'}"> | |
| ${course.free ? 'FREE' : 'PAID'} • ${course.duration} | |
| </span> | |
| <a href="${course.link}" target="_blank" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Enroll Now | |
| </a> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(courseCard); | |
| }); | |
| } | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderCourses(); | |
| // Add event listeners to category buttons | |
| document.querySelectorAll('.category-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Update active button styling | |
| document.querySelectorAll('.category-btn').forEach(btn => { | |
| btn.classList.remove('bg-indigo-600', 'text-white'); | |
| btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-300'); | |
| }); | |
| this.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-300'); | |
| this.classList.add('bg-indigo-600', 'text-white'); | |
| // Filter courses | |
| const filter = this.textContent.trim(); | |
| renderCourses(filter); | |
| }); | |
| }); | |
| // Animate progress bars | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| progressBars.forEach(bar => { | |
| const targetWidth = bar.getAttribute('data-target'); | |
| setTimeout(() => { | |
| bar.style.width = targetWidth + '%'; | |
| }, 500); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=saqlainbasitt/saqlain-s-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |