Update index.html

index.html

@@ -59,6 +59,7 @@
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
             border: 1px solid #f3f4f6;
             animation: fadeInUp 1s ease-out 0.3s both;
+            margin-bottom: 40px;
         }
         .tech-stack-section h2 {
             text-align: center;
@@ -183,6 +184,104 @@
             letter-spacing: 1px;
             font-weight: 600;
         }
+
+        /* Resources Section Styles */
+        .resources-section {
+            background: white;
+            border-radius: 24px;
+            padding: 50px 40px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+            border: 1px solid #f3f4f6;
+            animation: fadeInUp 1s ease-out 0.5s both;
+            margin-bottom: 40px;
+        }
+        .resources-section h2 {
+            text-align: center;
+            font-size: 2.5rem;
+            color: #1f2937;
+            margin-bottom: 20px;
+            font-weight: 700;
+        }
+        .resources-section .description {
+            text-align: center;
+            color: #6b7280;
+            font-size: 1.1rem;
+            margin-bottom: 50px;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .resources-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 25px;
+        }
+        .resource-card {
+            background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+            border: 2px solid #e5e7eb;
+            border-radius: 16px;
+            padding: 30px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .resource-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background: linear-gradient(180deg, #ff9d00, #ffb347);
+            transform: scaleY(0);
+            transition: transform 0.3s ease;
+        }
+        .resource-card:hover::before {
+            transform: scaleY(1);
+        }
+        .resource-card:hover {
+            transform: translateX(8px);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+            border-color: #ff9d00;
+        }
+        .resource-icon {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(135deg, #ff9d00, #ffb347);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+            font-size: 1.8rem;
+        }
+        .resource-title {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: #1f2937;
+            margin-bottom: 10px;
+        }
+        .resource-description {
+            color: #6b7280;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            margin-bottom: 15px;
+        }
+        .resource-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #ff9d00;
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-decoration: none;
+            transition: gap 0.3s ease;
+        }
+        .resource-link:hover {
+            gap: 12px;
+        }
+
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
             50% { transform: translateY(-20px); }
@@ -237,14 +336,17 @@
             .header .subtitle {
                 font-size: 1.2rem;
             }
-            .tech-stack-section {
+            .tech-stack-section, .resources-section {
                 padding: 30px 20px;
             }
             .tech-grid {
                 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                 gap: 20px;
             }
-            .tech-stack-section h2 {
+            .resources-grid {
+                grid-template-columns: 1fr;
+            }
+            .tech-stack-section h2, .resources-section h2 {
                 font-size: 2rem;
             }
             .tech-stack-section h2 img {
@@ -264,7 +366,7 @@
 
         <div class="tech-stack-section">
             <h2>
-                <img src="https://huggingface.co/spaces/TheCodingClub-RVCE/README/resolve/main/logo.jpeg" alt="Coding Club Logo">
+                <img src="logo.jpeg" alt="Coding Club Logo">
                 Our Tech Stack
             </h2>
             <p class="description">
@@ -341,6 +443,82 @@
             </div>
         </div>
 
+        <!-- Resources Section -->
+        <div class="resources-section">
+            <h2>Learning Resources</h2>
+            <p class="description">
+                Curated courses and materials to help you master machine learning and AI
+            </p>
+
+            <div class="resources-grid">
+                <div class="resource-card">
+                    <div class="resource-icon">ML</div>
+                    <div class="resource-title">Machine Learning Specialization</div>
+                    <div class="resource-description">
+                        Stanford & DeepLearning.AI's comprehensive introduction to machine learning fundamentals by Andrew Ng.
+                    </div>
+                    <a href="https://www.coursera.org/specializations/machine-learning-introduction" class="resource-link" target="_blank">
+                        Start Learning →
+                    </a>
+                </div>
+
+                <div class="resource-card">
+                    <div class="resource-icon">DL</div>
+                    <div class="resource-title">Deep Learning Specialization</div>
+                    <div class="resource-description">
+                        Master neural networks, CNNs, RNNs, and transformers with DeepLearning.AI's flagship program.
+                    </div>
+                    <a href="https://www.coursera.org/specializations/deep-learning" class="resource-link" target="_blank">
+                        Enroll Now →
+                    </a>
+                </div>
+
+                <div class="resource-card">
+                    <div class="resource-icon">AI</div>
+                    <div class="resource-title">Open Machine Learning Course</div>
+                    <div class="resource-description">
+                        Hands-on practice with real-world ML problems, algorithms, and Python implementations.
+                    </div>
+                    <a href="https://mlcourse.ai/book/index.html" class="resource-link" target="_blank">
+                        Practice Now →
+                    </a>
+                </div>
+
+                <div class="resource-card">
+                    <div class="resource-icon">KG</div>
+                    <div class="resource-title">Kaggle Learn</div>
+                    <div class="resource-description">
+                        Interactive tutorials and competitions for practical machine learning and data science skills.
+                    </div>
+                    <a href="https://www.kaggle.com/learn" class="resource-link" target="_blank">
+                        Start Competing →
+                    </a>
+                </div>
+
+                <div class="resource-card">
+                    <div class="resource-icon">CC</div>
+                    <div class="resource-title">Coding Club AI/ML Handbook</div>
+                    <div class="resource-description">
+                        Our comprehensive guide covering ML fundamentals, deep learning, and best practices for RVCE students.
+                    </div>
+                    <a href="https://github.com/codingclubrvce/AI-ML-101" class="resource-link" target="_blank">
+                        Access Handbook →
+                    </a>
+                </div>
+
+                <div class="resource-card">
+                    <div class="resource-icon">HF</div>
+                    <div class="resource-title">Our Models & Datasets</div>
+                    <div class="resource-description">
+                        Explore projects, pre-trained models, and datasets created by Coding Club members on Hugging Face.
+                    </div>
+                    <a href="https://huggingface.co/TheCodingClub-RVCE" class="resource-link" target="_blank">
+                        View Collection →
+                    </a>
+                </div>
+            </div>
+        </div>
+
         <div class="footer">
             <p>🎓 RV College of Engineering | Bengaluru, Karnataka</p>
             <p style="margin-top: 15px;">
@@ -398,4 +576,4 @@
         });
     </script>
 </body>
-</html>
+</html>