OperatorUltra/pawall-learn-programming-pawsitively
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>Pawall - Learn Programming</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12</head>13<body class="bg-gray-50">14 <pawall-navbar></pawall-navbar>15 16 <main class="container mx-auto px-4 py-8">17 <!-- Hero Section -->18 <section class="hero-section flex flex-col md:flex-row items-center justify-between mb-16">19 <div class="md:w-1/2 mb-8 md:mb-0">20 <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Learn Programming the Paw-some Way!</h1>21 <p class="text-gray-600 text-lg mb-6">Master Swift, Python, JavaScript and more with our bite-sized, interactive lessons designed for all skill levels.</p>22 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">23 <a href="#lessons" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Start Learning</a>24 <a href="#features" class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Explore Features</a>25 </div>26 </div>27 <div class="md:w-1/2 flex justify-center">28 <div class="relative w-80 h-80 bg-indigo-100 rounded-3xl flex items-center justify-center shadow-xl">29 <div class="absolute -top-4 -right-4 bg-amber-400 w-24 h-24 rounded-full flex items-center justify-center">30 <i data-feather="code" class="text-white w-12 h-12"></i>31 </div>32 <div class="absolute -bottom-4 -left-4 bg-indigo-500 w-20 h-20 rounded-full flex items-center justify-center">33 <i data-feather="star" class="text-white w-10 h-10"></i>34 </div>35 <img src="http://static.photos/technology/320x240/7" alt="Coding Illustration" class="w-64 h-64 object-cover rounded-2xl shadow-lg">36 </div>37 </div>38 </section>39 40 <!-- Features Section -->41 <section id="features" class="features-section mb-16">42 <h2 class="text-3xl font-bold text-center text-indigo-800 mb-12">Why Choose Pawall?</h2>43 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">44 <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">45 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">46 <i data-feather="book-open" class="text-indigo-600 w-8 h-8"></i>47 </div>48 <h3 class="text-xl font-semibold text-indigo-800 mb-2">Interactive Lessons</h3>49 <p class="text-gray-600">Engaging, hands-on tutorials that make learning to code fun and effective.</p>50 </div>51 <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">52 <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4">53 <i data-feather="check-circle" class="text-amber-600 w-8 h-8"></i>54 </div>55 <h3 class="text-xl font-semibold text-indigo-800 mb-2">Real-time Feedback</h3>56 <p class="text-gray-600">Get instant feedback on your code with our built-in compiler and validator.</p>57 </div>58 <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">59 <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">60 <i data-feather="award" class="text-indigo-600 w-8 h-8"></i>61 </div>62 <h3 class="text-xl font-semibold text-indigo-800 mb-2">Track Progress</h3>63 <p class="text-gray-600">Monitor your learning journey with detailed progress tracking and achievements.</p>64 </div>65 </div>66 </section>67 68 <!-- Lessons Section -->69 <section id="lessons" class="lessons-section mb-16">70 <h2 class="text-3xl font-bold text-center text-indigo-800 mb-8">Popular Learning Paths</h2>71 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">72 <div class="lesson-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">73 <img src="http://static.photos/technology/640x360/1" alt="Swift Programming" class="w-full h-48 object-cover">74 <div class="p-6">75 <div class="flex items-center mb-3">76 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">77 <i data-feather="smartphone" class="text-indigo-600"></i>78 </div>79 <h3 class="ml-3 text-xl font-semibold text-indigo-800">Swift Fundamentals</h3>80 </div>81 <p class="text-gray-600 mb-4">Learn the basics of Swift programming for iOS development.</p>82 <div class="flex justify-between items-center">83 <span class="text-sm text-gray-500">12 lessons</span>84 <a href="/swift-lessons.html" class="text-indigo-600 hover:text-indigo-800 font-semibold">Start →</a>85 </div>86 </div>87 </div>88 <div class="lesson-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">89 <img src="http://static.photos/technology/640x360/2" alt="Python Programming" class="w-full h-48 object-cover">90 <div class="p-6">91 <div class="flex items-center mb-3">92 <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">93 <i data-feather="code" class="text-amber-600"></i>94 </div>95 <h3 class="ml-3 text-xl font-semibold text-indigo-800">Python Basics</h3>96 </div>97 <p class="text-gray-600 mb-4">Master the fundamentals of Python programming language.</p>98 <div class="flex justify-between items-center">99 <span class="text-sm text-gray-500">15 lessons</span>100 <a href="/python-lessons.html" class="text-indigo-600 hover:text-indigo-800 font-semibold">Start →</a>101 </div>102 </div>103 </div>104 <div class="lesson-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">105 <img src="http://static.photos/technology/640x360/3" alt="Web Development" class="w-full h-48 object-cover">106 <div class="p-6">107 <div class="flex items-center mb-3">108 <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">109 <i data-feather="globe" class="text-indigo-600"></i>110 </div>111 <h3 class="ml-3 text-xl font-semibold text-indigo-800">Web Development</h3>112 </div>113 <p class="text-gray-600 mb-4">Build modern websites with HTML, CSS, and JavaScript.</p>114 <div class="flex justify-between items-center">115 <span class="text-sm text-gray-500">20 lessons</span>116 <a href="/web-lessons.html" class="text-indigo-600 hover:text-indigo-800 font-semibold">Start →</a>117 </div>118 </div>119 </div>120 </div>121 </section>122 123 <!-- Testimonials Section -->124 <section class="testimonials-section mb-16">125 <h2 class="text-3xl font-bold text-center text-indigo-800 mb-8">What Learners Say</h2>126 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">127 <div class="testimonial bg-white p-6 rounded-xl shadow-md">128 <div class="flex items-center mb-4">129 <img src="http://static.photos/people/80x80/1" alt="User" class="w-12 h-12 rounded-full">130 <div class="ml-4">131 <h4 class="font-semibold text-indigo-800">Sarah Johnson</h4>132 <p class="text-amber-500">★ ★ ★ ★ ★</p>133 </div>134 </div>135 <p class="text-gray-600">"Pawall made learning Swift so much fun! The interactive lessons and real-time feedback helped me build my first iOS app in just 2 weeks."</p>136 </div>137 <div class="testimonial bg-white p-6 rounded-xl shadow-md">138 <div class="flex items-center mb-4">139 <img src="http://static.photos/people/80x80/2" alt="User" class="w-12 h-12 rounded-full">140 <div class="ml-4">141 <h4 class="font-semibold text-indigo-800">Mike Chen</h4>142 <p class="text-amber-500">★ ★ ★ ★ ★</p>143 </div>144 </div>145 <p class="text-gray-600">"As a beginner, I was intimidated by programming, but Pawall's bite-sized lessons and clear explanations made everything click. Highly recommended!"</p>146 </div>147 </div>148 </section>149 </main>150 151 <pawall-footer></pawall-footer>152 153 <script src="components/navbar.js"></script>154 <script src="components/footer.js"></script>155 <script src="script.js"></script>156 <script>157 feather.replace();158 </script>159<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>160</body>161</html>