lielow1524/codecraft-tutorials-learn-by-doing
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeCraft Tutorials - Learn by Doing</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="components/navbar.js"></script>12 <script src="components/footer.js"></script>13</head>14<body class="bg-gray-50 text-gray-800">15 <custom-navbar></custom-navbar>16 17 <main class="container mx-auto px-4 py-12">18 <!-- Hero Section -->19 <section class="text-center mb-16">20 <h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900">Master Coding with Interactive Tutorials</h1>21 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Learn by doing with our hands-on tutorials designed for all skill levels.</p>22 <div class="mt-8">23 <a href="#tutorials" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium inline-block transition duration-300">Explore Tutorials</a>24 </div>25 </section>26 27 <!-- Featured Tutorials -->28 <section id="tutorials" class="mb-20">29 <h2 class="text-3xl font-bold mb-8 text-center">Featured Tutorials</h2>30 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">31 <!-- Tutorial Card 1 -->32 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">33 <div class="h-48 bg-indigo-100 flex items-center justify-center">34 <i data-feather="code" class="w-16 h-16 text-indigo-600"></i>35 </div>36 <div class="p-6">37 <h3 class="text-xl font-semibold mb-2">HTML & CSS Fundamentals</h3>38 <p class="text-gray-600 mb-4">Learn the building blocks of web development with this beginner-friendly tutorial.</p>39 <a href="tutorial1.html" class="text-indigo-600 font-medium hover:text-indigo-800 inline-flex items-center">40 Start Learning <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>41 </a>42 </div>43 </div>44 45 <!-- Tutorial Card 2 -->46 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">47 <div class="h-48 bg-blue-100 flex items-center justify-center">48 <i data-feather="cpu" class="w-16 h-16 text-blue-600"></i>49 </div>50 <div class="p-6">51 <h3 class="text-xl font-semibold mb-2">JavaScript Basics</h3>52 <p class="text-gray-600 mb-4">Dive into the world of JavaScript and learn how to make your websites interactive.</p>53 <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">54 Coming Soon <i data-feather="clock" class="ml-2 w-4 h-4"></i>55 </a>56 </div>57 </div>58 59 <!-- Tutorial Card 3 -->60 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">61 <div class="h-48 bg-green-100 flex items-center justify-center">62 <i data-feather="database" class="w-16 h-16 text-green-600"></i>63 </div>64 <div class="p-6">65 <h3 class="text-xl font-semibold mb-2">Responsive Design</h3>66 <p class="text-gray-600 mb-4">Master the art of creating websites that look great on any device.</p>67 <a href="#" class="text-green-600 font-medium hover:text-green-800 inline-flex items-center">68 Coming Soon <i data-feather="clock" class="ml-2 w-4 h-4"></i>69 </a>70 </div>71 </div>72 </div>73 </section>74 75 <!-- Features Section -->76 <section class="mb-20 bg-white rounded-xl shadow-md p-8">77 <h2 class="text-3xl font-bold mb-8 text-center">Why Learn With Us?</h2>78 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">79 <div class="text-center">80 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">81 <i data-feather="book-open" class="w-8 h-8 text-indigo-600"></i>82 </div>83 <h3 class="text-xl font-semibold mb-2">Interactive Lessons</h3>84 <p class="text-gray-600">Learn by doing with our hands-on coding exercises and real-world projects.</p>85 </div>86 <div class="text-center">87 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">88 <i data-feather="award" class="w-8 h-8 text-blue-600"></i>89 </div>90 <h3 class="text-xl font-semibold mb-2">Expert Guidance</h3>91 <p class="text-gray-600">Get support from experienced developers when you need help.</p>92 </div>93 <div class="text-center">94 <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">95 <i data-feather="clock" class="w-8 h-8 text-green-600"></i>96 </div>97 <h3 class="text-xl font-semibold mb-2">Self-Paced Learning</h3>98 <p class="text-gray-600">Learn at your own pace with our flexible tutorial structure.</p>99 </div>100 </div>101 </section>102 </main>103 104 <custom-footer></custom-footer>105 <script>feather.replace();</script>106<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>107</body>108</html>