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>About Us - CodeForTomorrow</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=Poppins:wght@300;400;600;700&display=swap');12 body {13 font-family: 'Poppins', sans-serif;14 }15 .timeline-item::before {16 content: '';17 position: absolute;18 left: -38px;19 top: 0;20 width: 24px;21 height: 24px;22 border-radius: 50%;23 background-color: #6366f1;24 border: 4px solid #e0e7ff;25 }26 .timeline {27 border-left: 2px solid #e0e7ff;28 }29 .team-card:hover {30 transform: translateY(-5px);31 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);32 }33 </style>34</head>35<body class="bg-gray-50">36 <!-- Navigation -->37 <nav class="bg-white shadow-md">38 <div class="container mx-auto px-6 py-4">39 <div class="flex items-center justify-between">40 <div class="flex items-center">41 <a href="index.html">42 <i data-feather="code" class="text-indigo-600 w-8 h-8 mr-2"></i>43 <span class="text-xl font-bold text-gray-800">CodeForTomorrow</span>44 </a>45 </div>46 <div class="hidden md:flex space-x-8">47 <a href="index.html" class="text-gray-600 hover:text-indigo-600 transition">Home</a>48 <a href="programs.html" class="text-gray-600 hover:text-indigo-600 transition">Programs</a>49 <a href="volunteer.html" class="text-gray-600 hover:text-indigo-600 transition">Volunteer</a>50 <a href="about.html" class="text-blue-600 font-semibold">About</a>51<a href="contact.html" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>52 </div>53 <button class="md:hidden focus:outline-none">54 <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>55 </button>56 </div>57 </div>58 </nav>59 60 <!-- Hero Section -->61 <section class="bg-gradient-to-r from-gray-800 to-gray-700 text-white py-20">62<div class="container mx-auto px-6 text-center">63 <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Story</h1>64 <p class="text-xl max-w-2xl mx-auto">65 Bridging the digital divide one child at a time66 </p>67 </div>68 </section>69 70 <!-- Mission Section -->71 <section class="py-16">72 <div class="container mx-auto px-6">73 <div class="flex flex-col md:flex-row items-center">74 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">75 <img src="http://static.photos/education/640x360/50" alt="Students learning to code" class="rounded-lg shadow-lg w-full">76 </div>77 <div class="md:w-1/2">78 <h2 class="text-3xl font-bold mb-6">Our <span class="text-indigo-600">Mission</span></h2>79 <p class="text-gray-600 mb-4">80 At CodeForTomorrow, we believe every child deserves access to quality computer science education, regardless of their socioeconomic background.81 </p>82 <p class="text-gray-600 mb-6">83 Our mission is to empower underprivileged youth with coding skills, computational thinking, and digital literacy to prepare them for future careers in technology.84 </p>85 <div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-600">86 <h3 class="font-bold text-indigo-800 mb-2">Vision Statement</h3>87 <p class="text-indigo-700">88 "A world where all children have equal opportunity to become creators of technology, not just consumers."89 </p>90 </div>91 </div>92 </div>93 </div>94 </section>95 96 <!-- History Section -->97 <section class="py-16 bg-gray-100">98 <div class="container mx-auto px-6">99 <h2 class="text-3xl font-bold text-center mb-12">Our100 <span class="text-gray-800">Journey</span></h2>101<div class="max-w-3xl mx-auto relative timeline pl-8">102 <!-- Timeline Item 1 -->103 <div class="relative mb-8 timeline-item">104 <div class="bg-white p-6 rounded-lg shadow-sm">105 <div class="flex justify-between items-start mb-2">106 <h3 class="font-bold text-lg">Founded in 2015</h3>107 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">2015</span>108 </div>109 <p class="text-gray-600">110 Started as a small after-school program in a community center serving 12 students.111 </p>112 </div>113 </div>114 115 <!-- Timeline Item 2 -->116 <div class="relative mb-8 timeline-item">117 <div class="bg-white p-6 rounded-lg shadow-sm">118 <div class="flex justify-between items-start mb-2">119 <h3 class="font-bold text-lg">First School Partnership</h3>120 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">2017</span>121 </div>122 <p class="text-gray-600">123 Expanded to our first public school partnership, reaching 50 students weekly.124 </p>125 </div>126 </div>127 128 <!-- Timeline Item 3 -->129 <div class="relative mb-8 timeline-item">130 <div class="bg-white p-6 rounded-lg shadow-sm">131 <div class="flex justify-between items-start mb-2">132 <h3 class="font-bold text-lg">501(c)(3) Status</h3>133 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">2018</span>134 </div>135 <p class="text-gray-600">136 Received official nonprofit status and first major foundation grant.137 </p>138 </div>139 </div>140 141 <!-- Timeline Item 4 -->142 <div class="relative mb-8 timeline-item">143 <div class="bg-white p-6 rounded-lg shadow-sm">144 <div class="flex justify-between items-start mb-2">145 <h3 class="font-bold text-lg">First Summer Camp</h3>146 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">2019</span>147 </div>148 <p class="text-gray-600">149 Launched our 6-week summer intensive program serving 100 students.150 </p>151 </div>152 </div>153 154 <!-- Timeline Item 5 -->155 <div class="relative timeline-item">156 <div class="bg-white p-6 rounded-lg shadow-sm">157 <div class="flex justify-between items-start mb-2">158 <h3 class="font-bold text-lg">Today</h3>159 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">2023</span>160 </div>161 <p class="text-gray-600">162 Serving over 2,500 students annually across 150 schools with 85% showing improved digital literacy.163 </p>164 </div>165 </div>166 </div>167 </div>168 </section>169 170 <!-- Team Section -->171 <section class="py-16">172 <div class="container mx-auto px-6">173 <h2 class="text-3xl font-bold text-center mb-12">Meet Our <span class="text-indigo-600">Team</span></h2>174 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">175 <!-- Team Member 1 -->176 <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 team-card">177 <img src="http://static.photos/people/640x360/51" alt="Dr. Sarah Chen" class="w-full h-64 object-cover">178 <div class="p-6">179 <h3 class="text-xl font-bold">Dr. Sarah Chen</h3>180 <p class="text-indigo-600 mb-2">Executive Director</p>181 <p class="text-gray-600 text-sm mb-4">182 Former computer science professor with 15+ years in education technology.183 </p>184 <div class="flex space-x-3">185 <a href="#" class="text-indigo-600 hover:text-indigo-800">186 <i data-feather="linkedin" class="w-4 h-4"></i>187 </a>188 <a href="#" class="text-indigo-600 hover:text-indigo-800">189 <i data-feather="twitter" class="w-4 h-4"></i>190 </a>191 </div>192 </div>193 </div>194 195 <!-- Team Member 2 -->196 <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 team-card">197 <img src="http://static.photos/people/640x360/52" alt="Michael Rodriguez" class="w-full h-64 object-cover">198 <div class="p-6">199 <h3 class="text-xl font-bold">Michael Rodriguez</h3>200 <p class="text-indigo-600 mb-2">Program Director</p>201 <p class="text-gray-600 text-sm mb-4">202 Former Google engineer passionate about educational equity.203 </p>204 <div class="flex space-x-3">205 <a href="#" class="text-indigo-600 hover:text-indigo-800">206 <i data-feather="linkedin" class="w-4 h-4"></i>207 </a>208 <a href="#" class="text-indigo-600 hover:text-indigo-800">209 <i data-feather="github" class="w-4 h-4"></i>210 </a>211 </div>212 </div>213 </div>214 215 <!-- Team Member 3 -->216 <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 team-card">217 <img src="http://static.photos/people/640x360/53" alt="Jamila Williams" class="w-full h-64 object-cover">218 <div class="p-6">219 <h3 class="text-xl font-bold">Jamila Williams</h3>220 <p class="text-indigo-600 mb-2">Community Partnerships</p>221 <p class="text-gray-600 text-sm mb-4">222 Nonprofit leader with expertise in underserved communities.223 </p>224 <div class="flex space-x-3">225 <a href="#" class="text-indigo-600 hover:text-indigo-800">226 <i data-feather="linkedin" class="w-4 h-4"></i>227 </a>228 <a href="#" class="text-indigo-600 hover:text-indigo-800">229 <i data-feather="instagram" class="w-4 h-4"></i>230 </a>231 </div>232 </div>233 </div>234 </div>235 </div>236 </section>237 238 <!-- Values Section -->239 <section class="py-16 bg-gray-100">240 <div class="container mx-auto px-6">241 <h2 class="text-3xl font-bold text-center mb-12">Our <span class="text-indigo-600">Values</span></h2>242 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">243 <div class="bg-white p-8 rounded-lg shadow-sm text-center">244 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">245 <i data-feather="heart" class="w-8 h-8 text-indigo-600"></i>246 </div>247 <h3 class="text-xl font-bold mb-3">Equity</h3>248 <p class="text-gray-600">249 We believe all children deserve access to computer science education, regardless of background.250 </p>251 </div>252 <div class="bg-white p-8 rounded-lg shadow-sm text-center">253 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">254 <i data-feather="zap" class="w-8 h-8 text-indigo-600"></i>255 </div>256 <h3 class="text-xl font-bold mb-3">Innovation</h3>257 <p class="text-gray-600">258 We continuously improve our programs to stay at the forefront of tech education.259 </p>260 </div>261 <div class="bg-white p-8 rounded-lg shadow-sm text-center">262 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">263 <i data-feather="users" class="w-8 h-8 text-indigo-600"></i>264 </div>265 <h3 class="text-xl font-bold mb-3">Community</h3>266 <p class="text-gray-600">267 We build partnerships with schools, families, and volunteers to maximize impact.268 </p>269 </div>270 </div>271 </div>272 </section>273 274 <!-- Footer -->275 <footer class="bg-gray-900 text-white py-12">276 <div class="container mx-auto px-6">277 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">278 <div>279 <div class="flex items-center mb-4">280 <i data-feather="code" class="w-8 h-8 text-indigo-400 mr-2"></i>281 <span class="text-xl font-bold">CodeForTomorrow</span>282 </div>283 <p class="text-gray-400">284 Empowering underprivileged youth with the skills they need for tomorrow's digital world.285 </p>286 </div>287 <div>288 <h4 class="font-bold text-lg mb-4">About</h4>289 <ul class="space-y-2">290 <li><a href="about.html" class="text-indigo-400 hover:text-indigo-300 transition">Our Story</a></li>291 <li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li>292 <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>293 </ul>294 </div>295 <div>296 <h4 class="font-bold text-lg mb-4">Quick Links</h4>297 <ul class="space-y-2">298 <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>299 <li><a href="programs.html" class="text-gray-400 hover:text-white transition">Programs</a></li>300 <li><a href="volunteer.html" class="text-gray-400 hover:text-white transition">Volunteer</a></li>301 </ul>302 </div>303 <div>304 <h4 class="font-bold text-lg mb-4">Legal</h4>305 <ul class="space-y-2">306 <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>307 <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>308 <li><a href="#" class="text-gray-400 hover:text-white transition">Financials</a></li>309 </ul>310 </div>311 </div>312 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">313 © 2023 CodeForTomorrow. All rights reserved. | 501(c)(3) nonprofit organization314 </div>315 </div>316 </footer>317 318 <script>319 feather.replace();320 </script>321</body>322</html>