pcms2025/c-code-crusaders
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>C# Tutorials - Code Crusaders</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Montserrat:wght@400;700&display=swap');12 .code-block {13 font-family: 'Fira Code', monospace;14 }15 .tutorial-card:hover {16 transform: translateY(-5px);17 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);18 }19 </style>20</head>21<body class="font-sans bg-gray-100">22 <!-- Navigation -->23 <nav class="px-6 py-4 bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg sticky top-0 z-50">24 <div class="container mx-auto flex justify-between items-center">25 <div class="flex items-center space-x-2">26 <i data-feather="code" class="text-purple-400"></i>27 <a href="index.html" class="text-white font-bold text-xl">C# Code Crusaders</a>28 </div>29 <div class="hidden md:flex space-x-8">30 <a href="index.html" class="text-white hover:text-purple-300 transition">Home</a>31 <a href="tutorials.html" class="text-purple-300 font-semibold transition">Tutorials</a>32 <a href="#" class="text-white hover:text-purple-300 transition">Projects</a>33 <a href="learning.html" class="text-white hover:text-purple-300 transition">Learning Path</a>34 <a href="csharp_basics.html" class="text-white hover:text-purple-300 transition">C# Basics</a>35 <a href="#" class="text-white hover:text-purple-300 transition">Community</a>36</div>37 <button class="md:hidden text-white">38 <i data-feather="menu"></i>39 </button>40 </div>41 </nav>42 43 <!-- Tutorials Hero -->44 <section class="bg-gradient-to-r from-purple-800 to-blue-800 text-white py-20 px-6">45 <div class="container mx-auto text-center">46 <h1 class="text-4xl md:text-5xl font-bold mb-6">C# Tutorials</h1>47 <p class="text-xl opacity-90 max-w-2xl mx-auto">48 Master C# programming with our comprehensive tutorials, from beginner basics to advanced concepts.49 </p>50 </div>51 </section>52 53 <!-- Tutorials Grid -->54 <section class="py-16 px-6">55 <div class="container mx-auto">56 <div class="flex justify-between items-center mb-12">57 <h2 class="text-3xl font-bold text-gray-800">Learning Paths</h2>58 <div class="flex space-x-2">59 <button class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg">Beginner</button>60 <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300">Intermediate</button>61 <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300">Advanced</button>62 </div>63 </div>64 65 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">66 <!-- Tutorial Card 1 -->67 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">68 <div class="h-48 bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center">69 <i data-feather="terminal" class="w-12 h-12 text-white"></i>70 </div>71 <div class="p-6">72 <div class="flex items-center mb-2">73 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-2">Beginner</span>74 <span class="text-gray-500 text-sm">10 Lessons</span>75 </div>76 <h3 class="text-xl font-bold mb-3 text-gray-800">C# Basics</h3>77 <p class="text-gray-600">78 Learn fundamental C# concepts like variables, data types, operators and control flow.79 </p>80 </div>81 </a>82 83 <!-- Tutorial Card 2 -->84 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">85 <div class="h-48 bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center">86 <i data-feather="cpu" class="w-12 h-12 text-white"></i>87 </div>88 <div class="p-6">89 <div class="flex items-center mb-2">90 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">Intermediate</span>91 <span class="text-gray-500 text-sm">15 Lessons</span>92 </div>93 <h3 class="text-xl font-bold mb-3 text-gray-800">Object-Oriented Programming</h3>94 <p class="text-gray-600">95 Master classes, objects, inheritance, polymorphism and other OOP concepts in C#.96 </p>97 </div>98 </a>99 100 <!-- Tutorial Card 3 -->101 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">102 <div class="h-48 bg-gradient-to-r from-green-500 to-yellow-500 flex items-center justify-center">103 <i data-feather="database" class="w-12 h-12 text-white"></i>104 </div>105 <div class="p-6">106 <div class="flex items-center mb-2">107 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-2">Intermediate</span>108 <span class="text-gray-500 text-sm">12 Lessons</span>109 </div>110 <h3 class="text-xl font-bold mb-3 text-gray-800">Entity Framework Core</h3>111 <p class="text-gray-600">112 Learn to work with databases using C# and Entity Framework Core ORM.113 </p>114 </div>115 </a>116 117 <!-- Tutorial Card 4 -->118 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">119 <div class="h-48 bg-gradient-to-r from-yellow-500 to-red-500 flex items-center justify-center">120 <i data-feather="cloud" class="w-12 h-12 text-white"></i>121 </div>122 <div class="p-6">123 <div class="flex items-center mb-2">124 <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mr-2">Advanced</span>125 <span class="text-gray-500 text-sm">8 Lessons</span>126 </div>127 <h3 class="text-xl font-bold mb-3 text-gray-800">ASP.NET Core Web API</h3>128 <p class="text-gray-600">129 Build robust RESTful APIs with ASP.NET Core and deploy to the cloud.130 </p>131 </div>132 </a>133 134 <!-- Tutorial Card 5 -->135 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">136 <div class="h-48 bg-gradient-to-r from-red-500 to-purple-500 flex items-center justify-center">137 <i data-feather="zap" class="w-12 h-12 text-white"></i>138 </div>139 <div class="p-6">140 <div class="flex items-center mb-2">141 <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-2">Advanced</span>142 <span class="text-gray-500 text-sm">6 Lessons</span>143 </div>144 <h3 class="text-xl font-bold mb-3 text-gray-800">Asynchronous Programming</h3>145 <p class="text-gray-600">146 Master async/await, tasks, and parallel programming patterns in C#.147 </p>148 </div>149 </a>150 151 <!-- Tutorial Card 6 -->152 <a href="#" class="tutorial-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">153 <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">154 <i data-feather="smartphone" class="w-12 h-12 text-white"></i>155 </div>156 <div class="p-6">157 <div class="flex items-center mb-2">158 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-2">Intermediate</span>159 <span class="text-gray-500 text-sm">10 Lessons</span>160 </div>161 <h3 class="text-xl font-bold mb-3 text-gray-800">Xamarin.Forms Mobile Development</h3>162 <p class="text-gray-600">163 Build cross-platform mobile apps with C# and Xamarin.Forms.164 </p>165 </div>166 </a>167 </div>168 169 <!-- Newsletter -->170 <div class="mt-16 bg-gray-50 rounded-xl p-8 text-center">171 <h3 class="text-2xl font-bold mb-4 text-gray-800">Stay Updated</h3>172 <p class="text-gray-600 mb-6 max-w-2xl mx-auto">173 Subscribe to our newsletter and get notified when we release new tutorials and courses.174 </p>175 <div class="flex max-w-md mx-auto">176 <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">177 <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-6 py-3 rounded-r-lg transition">178 Subscribe179 </button>180 </div>181 </div>182 </div>183 </section>184 185 <!-- Footer -->186 <footer class="bg-gray-900 text-white py-12 px-6">187 <div class="container mx-auto">188 <div class="grid md:grid-cols-4 gap-8">189 <div>190 <h3 class="text-xl font-bold mb-4 flex items-center">191 <i data-feather="code" class="mr-2 text-purple-400"></i> C# Code Crusaders192 </h3>193 <p class="text-gray-400">194 Mastering C# one line at a time.195 </p>196 </div>197 198 <div>199 <h4 class="font-bold mb-4">Resources</h4>200 <ul class="space-y-2">201 <li><a href="tutorials.html" class="text-purple-300 hover:text-white transition">Tutorials</a></li>202 <li><a href="learning.html" class="text-gray-400 hover:text-white transition">Learning Path</a></li>203 <li><a href="csharp_basics.html" class="text-gray-400 hover:text-white transition">C# Basics</a></li>204 <li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li>205 <li><a href="#" class="text-gray-400 hover:text-white transition">Cheatsheets</a></li>206</ul>207 </div>208 209 <div>210 <h4 class="font-bold mb-4">Community</h4>211 <ul class="space-y-2">212 <li><a href="#" class="text-gray-400 hover:text-white transition">Discord</a></li>213 <li><a href="#" class="text-gray-400 hover:text-white transition">Forum</a></li>214 <li><a href="#" class="text-gray-400 hover:text-white transition">Events</a></li>215 </ul>216 </div>217 218 <div>219 <h4 class="font-bold mb-4">Connect</h4>220 <div class="flex space-x-4">221 <a href="#" class="text-gray-400 hover:text-white transition">222 <i data-feather="twitter"></i>223 </a>224 <a href="#" class="text-gray-400 hover:text-white transition">225 <i data-feather="github"></i>226 </a>227 <a href="#" class="text-gray-400 hover:text-white transition">228 <i data-feather="youtube"></i>229 </a>230 <a href="#" class="text-gray-400 hover:text-white transition">231 <i data-feather="linkedin"></i>232 </a>233 </div>234 </div>235 </div>236 237 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">238 <p>© 2023 C# Code Crusaders. All rights reserved.</p>239 </div>240 </div>241 </footer>242 243 <script>244 // Initialize feather icons245 feather.replace();246 </script>247</body>248</html>