Spaces:
Running
Running
add animation that when I scroll down it just changes and come up with the animations for each part - Initial Deployment
3ce32de verified Download index.html from Arashkazemi/codemastery: direct link, hf CLI and curl.
- Browser
- Download file 38.2 kB
-
https://huggingface.co/spaces/Arashkazemi/codemastery/resolve/main/index.html
- Command line
-
hf download hf://spaces/Arashkazemi/codemastery/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Arashkazemi/codemastery/resolve/main/index.html
38.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeMastery | Premium Programming Tutorials</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> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| /* New high-tech animations */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideInFromRight { | |
| from { | |
| transform: translateX(30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideInFromLeft { | |
| from { | |
| transform: translateX(-30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .animate-scale-in { | |
| animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-slide-right { | |
| animation: slideInFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .animate-slide-left { | |
| animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| /* Parallax effect */ | |
| .parallax { | |
| will-change: transform; | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .course-card:hover .course-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .testimonial-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); | |
| } | |
| .category-tab.active { | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| #mobile-menu { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 animate-fade-in"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-laptop-code mr-2"></i> | |
| CodeMastery | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Courses</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Paths</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Pricing</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">About</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-search"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </a> | |
| <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"> | |
| Sign In | |
| </a> | |
| </div> | |
| <button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t py-2 px-4 absolute w-full left-0"> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Home</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Courses</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Paths</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Pricing</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">About</a> | |
| <div class="flex space-x-4 py-2"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-search"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </a> | |
| <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"> | |
| Sign In | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Master the Tech Skills of Tomorrow</h1> | |
| <p class="text-xl mb-8 opacity-90">Learn programming, AI, data science and more from industry experts with our premium video tutorials and hands-on projects.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 text-center animate-pulse"> | |
| Browse Courses | |
| </a> | |
| <a href="#" class="border border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-indigo-600 transition text-center"> | |
| Try for Free | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" | |
| alt="Learning programming" | |
| class="rounded-lg shadow-2xl max-w-full h-auto parallax animate-float" | |
| data-parallax-speed="0.1"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4 animate-fade-in-up" style="animation-delay: 0.1s"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">500+</div> | |
| <div class="text-gray-600">Students Enrolled</div> | |
| </div> | |
| <div class="p-4 animate-fade-in-up" style="animation-delay: 0.2s"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">30+</div> | |
| <div class="text-gray-600">Premium Courses</div> | |
| </div> | |
| <div class="p-4 animate-fade-in-up" style="animation-delay: 0.3s"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">10+</div> | |
| <div class="text-gray-600">Expert Instructors</div> | |
| </div> | |
| <div class="p-4 animate-fade-in-up" style="animation-delay: 0.4s"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">24/7</div> | |
| <div class="text-gray-600">Learning Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Explore Our Categories</h2> | |
| <div class="flex flex-wrap justify-center gap-4 mb-10"> | |
| <button class="category-tab px-6 py-2 rounded-full border border-gray-300 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition active"> | |
| All Categories | |
| </button> | |
| <button class="category-tab px-6 py-2 rounded-full border border-gray-300 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition"> | |
| Programming | |
| </button> | |
| <button class="category-tab px-6 py-2 rounded-full border border-gray-300 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition"> | |
| AI & Machine Learning | |
| </button> | |
| <button class="category-tab px-6 py-2 rounded-full border border-gray-300 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition"> | |
| Data Science | |
| </button> | |
| <button class="category-tab px-6 py-2 rounded-full border border-gray-300 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition"> | |
| Web Development | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> | |
| <!-- Course Card 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 course-card transform hover:-translate-y-1 animate-scale-in" style="animation-delay: 0.1s"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1566837945700-30057527ade0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Python Course" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded"> | |
| Bestseller | |
| </div> | |
| <div class="course-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-2"> | |
| <a href="#" class="bg-white text-indigo-600 px-4 py-2 rounded-md font-medium hover:bg-gray-100"> | |
| Preview Course | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Python Mastery: From Beginner to Pro</h3> | |
| <p class="text-gray-600 text-sm mb-3">Learn Python programming with real-world projects</p> | |
| <div class="flex items-center text-yellow-400 mb-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span class="text-gray-600 ml-2 text-sm">4.7 (1,234)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$89.99</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 32 hours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Card 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 course-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1504639725599-5f897158b2f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="AI Course" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-green-400 text-xs font-bold px-2 py-1 rounded"> | |
| New | |
| </div> | |
| <div class="course-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-2"> | |
| <a href="#" class="bg-white text-indigo-600 px-4 py-2 rounded-md font-medium hover:bg-gray-100"> | |
| Preview Course | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">AI & Machine Learning Bootcamp</h3> | |
| <p class="text-gray-600 text-sm mb-3">Build real-world AI applications with Python</p> | |
| <div class="flex items-center text-yellow-400 mb-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <span class="text-gray-600 ml-2 text-sm">4.5 (876)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$129.99</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 45 hours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Card 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 course-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Data Science Course" class="w-full h-48 object-cover"> | |
| <div class="course-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-2"> | |
| <a href="#" class="bg-white text-indigo-600 px-4 py-2 rounded-md font-medium hover:bg-gray-100"> | |
| Preview Course | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Data Science with Python & R</h3> | |
| <p class="text-gray-600 text-sm mb-3">Master data analysis, visualization and ML</p> | |
| <div class="flex items-center text-yellow-400 mb-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-2 text-sm">4.9 (2,543)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$99.99</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 38 hours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Card 4 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 course-card"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Web Dev Course" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-red-400 text-xs font-bold px-2 py-1 rounded"> | |
| Sale | |
| </div> | |
| <div class="course-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-2"> | |
| <a href="#" class="bg-white text-indigo-600 px-4 py-2 rounded-md font-medium hover:bg-gray-100"> | |
| Preview Course | |
| </a> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Full Stack Web Development</h3> | |
| <p class="text-gray-600 text-sm mb-3">HTML, CSS, JavaScript, React, Node.js & MongoDB</p> | |
| <div class="flex items-center text-yellow-400 mb-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-2 text-sm">4.8 (3,210)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600 line-through text-gray-400">$119.99</span> | |
| <span class="font-bold text-indigo-600">$79.99</span> | |
| <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 52 hours</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition"> | |
| View All Courses | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Learning Paths Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Structured Learning Paths</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Path 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 hover:border-indigo-300 transition transform hover:scale-105 animate-slide-right" style="animation-delay: 0.1s"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-code text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Full-Stack Developer</h3> | |
| <p class="text-gray-600 mb-4">Master both front-end and back-end development to build complete web applications.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>6 months • 15 courses</span> | |
| </div> | |
| </div> | |
| <!-- Path 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 hover:border-indigo-300 transition animate-slide-right" style="animation-delay: 0.2s"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">AI Engineer</h3> | |
| <p class="text-gray-600 mb-4">Learn machine learning, deep learning and AI model deployment.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>8 months • 12 courses</span> | |
| </div> | |
| </div> | |
| <!-- Path 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 hover:border-indigo-300 transition animate-slide-right" style="animation-delay: 0.3s"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-database text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Data Scientist</h3> | |
| <p class="text-gray-600 mb-4">Master data analysis, visualization, statistics and machine learning.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>7 months • 10 courses</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Why Learn With CodeMastery?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-video text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">High-Quality Videos</h3> | |
| <p class="text-gray-600">Crystal clear 4K video lessons with professional editing.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-laptop-code text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Hands-On Projects</h3> | |
| <p class="text-gray-600">Build real-world projects to add to your portfolio.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-headset text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">24/7 Support</h3> | |
| <p class="text-gray-600">Get help from our team and community whenever you need it.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-certificate text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Certificates</h3> | |
| <p class="text-gray-600">Earn certificates to showcase your skills to employers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What Our Students Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg testimonial-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah J.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-4">"The Python course completely transformed my career. I went from knowing nothing to landing a junior developer role in just 3 months!"</p> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-graduation-cap mr-1"></i> Completed: Python Mastery | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg testimonial-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-4">"The AI Bootcamp gave me practical skills I could apply immediately at work. The instructors explain complex concepts in a way that's easy to understand."</p> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-graduation-cap mr-1"></i> Completed: AI & ML Bootcamp | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg testimonial-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya K." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Priya K.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-4">"I completed the Full Stack path and built an impressive portfolio that helped me transition from marketing to web development."</p> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-graduation-cap mr-1"></i> Completed: Full-Stack Developer Path | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Start Learning?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of students who have transformed their careers with CodeMastery.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100"> | |
| Browse All Courses | |
| </a> | |
| <a href="#" class="border border-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-indigo-600 transition"> | |
| Try Free Lessons | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-laptop-code mr-2"></i> | |
| CodeMastery | |
| </h3> | |
| <p class="text-gray-400 mb-4">The best platform to learn programming, AI, data science and web development from industry experts.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Courses</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Programming</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Web Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">AI & Machine Learning</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Data Science</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mobile Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">DevOps</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Affiliates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 CodeMastery. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-cc-visa text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-cc-mastercard text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-cc-paypal text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-cc-apple-pay text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Intersection Observer for scroll animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Initialize all elements with animation classes | |
| document.querySelectorAll('[class*="animate-"]').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Parallax effect | |
| document.addEventListener('mousemove', (e) => { | |
| const parallaxElements = document.querySelectorAll('.parallax'); | |
| parallaxElements.forEach(element => { | |
| const speed = parseFloat(element.getAttribute('data-parallax-speed')) || 0.1; | |
| const x = (window.innerWidth - e.pageX * speed) / 100; | |
| const y = (window.innerHeight - e.pageY * speed) / 100; | |
| element.style.transform = `translate(${x}px, ${y}px)`; | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Category tabs | |
| const tabs = document.querySelectorAll('.category-tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Simple cart counter | |
| let cartCount = 0; | |
| const cartButtons = document.querySelectorAll('.fa-shopping-cart').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| cartCount++; | |
| alert(`Added to cart! Total items: ${cartCount}`); | |
| }); | |
| }); | |
| </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=Arashkazemi/codemastery" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |