Learning Modules

Choose a module to start learning!

.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9ca3af; } .filter-buttons { display: flex; gap: 10px; } .filter-btn { padding: 10px 20px; border: 2px solid #e5e7eb; background: white; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .filter-btn:hover, .filter-btn.active { border-color: #4f46e5; background: #4f46e5; color: white; } .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; padding: 20px 0; } .module-card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; position: relative; overflow: hidden; } .module-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); border-color: #4f46e5; } .module-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .module-icon { font-size: 3rem; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1)); } .module-info h3 { margin: 0 0 5px 0; color: #1f2937; font-size: 1.3rem; font-weight: 700; } .module-meta { display: flex; gap: 15px; font-size: 0.85rem; color: #6b7280; margin-bottom: 15px; } .module-description { color: #4b5563; line-height: 1.6; margin-bottom: 20px; } .module-progress { width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; margin-bottom: 15px; } .progress-fill { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); transition: width 0.3s ease; } .module-actions { display: flex; justify-content: space-between; align-items: center; } .start-btn { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .start-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4); } .module-difficulty { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .difficulty-beginner { background: #dcfce7; color: #166534; } .difficulty-intermediate { background: #fef3c7; color: #92400e; } .difficulty-advanced { background: #fecaca; color: #991b1b; } @media (max-width: 768px) { .modules-container { padding: 20px 15px; } .modules-controls { flex-direction: column; align-items: stretch; } .filter-buttons { justify-content: center; flex-wrap: wrap; } .modules-grid { grid-template-columns: 1fr; } }

Learning Modules

Explore hundreds of interactive learning modules designed for your age and interests