Temporary436/codefortomorrow-kids-code-revolution
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>CodeForTomorrow - Empowering Kids Through Coding</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: '#3b82f6', // Changed to blue-500 for better contrast15 secondary: '#f59e0b'16 }17}18 }19 }20 </script>21 <script src="https://unpkg.com/feather-icons"></script>22 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>23 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>24 <style>25 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');26 body {27 font-family: 'Poppins', sans-serif;28 }29 .hero-gradient {30 background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);31 }32.card-hover:hover {33 transform: translateY(-10px);34 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);35 }36 .vanta-canvas {37 position: absolute;38 top: 0;39 left: 0;40 width: 100%;41 height: 100%;42 z-index: 0;43 }44 .content-wrapper {45 position: relative;46 z-index: 1;47 }48 </style>49</head>50<body class="bg-gray-50">51 <!-- Vanta.js Globe Background -->52 <div id="vanta-bg" class="vanta-canvas"></div>53 54 <!-- Navigation -->55 <nav class="relative bg-white shadow-md">56 <div class="container mx-auto px-6 py-4">57 <div class="flex items-center justify-between">58 <div class="flex items-center">59 <i data-feather="code" class="text-primary w-8 h-8 mr-2"></i>60 <span class="text-xl font-bold text-gray-800">CodeForTomorrow</span>61 </div>62 <div class="hidden md:flex space-x-8">63 <a href="index.html" class="text-primary font-semibold">Home</a>64 <a href="programs.html" class="text-gray-600 hover:text-primary transition">Programs</a>65 <a href="volunteer.html" class="text-gray-600 hover:text-primary transition">Volunteer</a>66 <a href="about.html" class="text-gray-600 hover:text-primary transition">About</a>67 <a href="contact.html" class="text-gray-600 hover:text-primary transition">Contact</a>68</div>69 <button class="md:hidden focus:outline-none">70 <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>71 </button>72 <div class="hidden md:block">73 <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">74 Donate Now75 </button>76 </div>77 </div>78 </div>79 </nav>80 81 <!-- Hero Section -->82 <section class="hero-gradient text-white py-20 relative overflow-hidden">83 <div class="content-wrapper">84 <div class="container mx-auto px-6 text-center">85 <h1 class="text-4xl md:text-6xl font-bold mb-6">Coding for <span class="text-secondary">Every Child</span></h1>86 <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">87 Empowering underprivileged youth with tech skills for a brighter future88 </p>89 <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">90 <button class="bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">91 Volunteer With Us92 </button>93 <button class="border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-primary transition">94 Learn More95 </button>96 </div>97 </div>98 </div>99 </section>100 101 <!-- Stats Section -->102 <section class="py-16 bg-white">103 <div class="container mx-auto px-6">104 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">105 <div class="p-8 border-b-2 md:border-b-0 md:border-r-2 border-gray-200">106 <div class="text-5xl font-bold text-primary mb-2">2,500+</div>107 <div class="text-gray-600">Students Impacted</div>108 </div>109 <div class="p-8 border-b-2 md:border-b-0 md:border-r-2 border-gray-200">110 <div class="text-5xl font-bold text-primary mb-2">150+</div>111 <div class="text-gray-600">Schools Partnered</div>112 </div>113 <div class="p-8">114 <div class="text-5xl font-bold text-primary mb-2">85%</div>115 <div class="text-gray-600">Improved Digital Literacy</div>116 </div>117 </div>118 </div>119 </section>120 121 <!-- Programs Section -->122 <section class="py-16 bg-gray-50">123 <div class="container mx-auto px-6">124 <h2 class="text-3xl font-bold text-center mb-12">Our <span class="text-primary">Programs</span></h2>125 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">126 <!-- Program Card 1 -->127 <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 card-hover">128 <img src="http://static.photos/technology/640x360/1" alt="After-School Coding Clubs" class="w-full h-48 object-cover">129 <div class="p-6">130 <div class="flex items-center mb-4">131 <i data-feather="code" class="w-6 h-6 text-primary mr-2"></i>132 <h3 class="text-xl font-bold">After-School Clubs</h3>133 </div>134 <p class="text-gray-600 mb-4">135 Weekly coding clubs teaching Scratch, Python, and web development fundamentals.136 </p>137 <button class="text-primary font-semibold hover:underline">Learn More →</button>138 </div>139 </div>140 141 <!-- Program Card 2 -->142 <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 card-hover">143 <img src="http://static.photos/education/640x360/2" alt="Summer Code Camp" class="w-full h-48 object-cover">144 <div class="p-6">145 <div class="flex items-center mb-4">146 <i data-feather="sun" class="w-6 h-6 text-primary mr-2"></i>147 <h3 class="text-xl font-bold">Summer Code Camp</h3>148 </div>149 <p class="text-gray-600 mb-4">150 Intensive 6-week program focused on game development and robotics.151 </p>152 <button class="text-primary font-semibold hover:underline">Learn More →</button>153 </div>154 </div>155 156 <!-- Program Card 3 -->157 <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 card-hover">158 <img src="http://static.photos/workspace/640x360/3" alt="Teacher Training" class="w-full h-48 object-cover">159 <div class="p-6">160 <div class="flex items-center mb-4">161 <i data-feather="users" class="w-6 h-6 text-primary mr-2"></i>162 <h3 class="text-xl font-bold">Teacher Training</h3>163 </div>164 <p class="text-gray-600 mb-4">165 Professional development for educators to integrate coding in their classrooms.166 </p>167 <button class="text-primary font-semibold hover:underline">Learn More →</button>168 </div>169 </div>170 </div>171 </div>172 </section>173 174 <!-- Testimonials -->175 <section class="py-16 bg-primary text-white">176 <div class="container mx-auto px-6">177 <h2 class="text-3xl font-bold text-center mb-12">Success <span class="text-secondary">Stories</span></h2>178 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">179 <div class="bg-indigo-700 p-8 rounded-lg">180 <div class="flex items-center mb-4">181 <img src="http://static.photos/people/200x200/1" alt="Maria" class="w-12 h-12 rounded-full mr-4">182 <div>183 <h4 class="font-bold">Maria G.</h4>184 <p class="text-indigo-200">Student, Age 12</p>185 </div>186 </div>187 <p class="italic">188 "I never thought I could create my own games before joining CodeForTomorrow. Now I'm teaching my little brother how to code!"189 </p>190 </div>191 <div class="bg-indigo-700 p-8 rounded-lg">192 <div class="flex items-center mb-4">193 <img src="http://static.photos/people/200x200/2" alt="James" class="w-12 h-12 rounded-full mr-4">194 <div>195 <h4 class="font-bold">James W.</h4>196 <p class="text-indigo-200">Volunteer</p>197 </div>198 </div>199 <p class="italic">200 "Seeing the kids' excitement when their code works for the first time is priceless. I wish I had this opportunity when I was their age."201 </p>202 </div>203 </div>204 </div>205 </section>206 207 <!-- Call to Action -->208 <section class="py-16 bg-gray-50">209 <div class="container mx-auto px-6 text-center">210 <h2 class="text-3xl font-bold mb-6">Ready to Make a <span class="text-primary">Difference</span>?</h2>211 <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">212 Whether you want to volunteer, donate, or bring our programs to your school, we'd love to hear from you.213 </p>214 <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">215 <button class="bg-primary text-white px-8 py-3 rounded-full font-bold hover:bg-indigo-700 transition">216 Get Involved217 </button>218 <button class="border-2 border-primary text-primary px-8 py-3 rounded-full font-bold hover:bg-indigo-50 transition">219 Contact Us220 </button>221 </div>222 </div>223 </section>224 225 <!-- Footer -->226 <footer class="bg-gray-900 text-white py-12">227 <div class="container mx-auto px-6">228 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">229 <div>230 <div class="flex items-center mb-4">231 <i data-feather="code" class="w-8 h-8 text-indigo-400 mr-2"></i>232 <span class="text-xl font-bold">CodeForTomorrow</span>233 </div>234 <p class="text-gray-400">235 Empowering underprivileged youth with the skills they need for tomorrow's digital world.236 </p>237 </div>238 <div>239 <h4 class="font-bold text-lg mb-4">Quick Links</h4>240 <ul class="space-y-2">241 <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>242 <li><a href="#" class="text-gray-400 hover:text-white transition">Programs</a></li>243 <li><a href="#" class="text-gray-400 hover:text-white transition">Volunteer</a></li>244 <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>245 </ul>246 </div>247 <div>248 <h4 class="font-bold text-lg mb-4">Contact</h4>249 <ul class="space-y-2">250 <li class="flex items-center">251 <i data-feather="mail" class="w-4 h-4 mr-2"></i>252 <span class="text-gray-400">hello@codefortomorrow.org</span>253 </li>254 <li class="flex items-center">255 <i data-feather="phone" class="w-4 h-4 mr-2"></i>256 <span class="text-gray-400">(555) 123-4567</span>257 </li>258 <li class="flex items-center">259 <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>260 <span class="text-gray-400">123 Tech Street, Silicon Valley</span>261 </li>262 </ul>263 </div>264 <div>265 <h4 class="font-bold text-lg mb-4">Stay Connected</h4>266 <div class="flex space-x-4 mb-4">267 <a href="#" class="bg-primary w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">268 <i data-feather="facebook" class="w-5 h-5"></i>269 </a>270 <a href="#" class="bg-primary w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">271 <i data-feather="twitter" class="w-5 h-5"></i>272 </a>273 <a href="#" class="bg-primary w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">274 <i data-feather="instagram" class="w-5 h-5"></i>275 </a>276 <a href="#" class="bg-primary w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">277 <i data-feather="linkedin" class="w-5 h-5"></i>278 </a>279 </div>280 <p class="text-gray-400 text-sm">281 Subscribe to our newsletter for updates and success stories.282 </p>283 </div>284 </div>285 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">286 © 2023 CodeForTomorrow. All rights reserved. | Nonprofit 501(c)(3) organization287 </div>288 </div>289 </footer>290 291 <script>292 // Initialize Vanta.js globe293 VANTA.GLOBE({294 el: "#vanta-bg",295 mouseControls: true,296 touchControls: true,297 gyroControls: false,298 minHeight: 200.00,299 minWidth: 200.00,300 scale: 1.00,301 scaleMobile: 1.00,302 color: 0x6366f1,303 backgroundColor: 0xf8fafc,304 size: 0.8305 });306 307 // Initialize Feather Icons308 feather.replace();309 </script>310</body>311</html>312