youngprogramers/duckquack-cs50-symphony
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>DuckQuack CS50</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 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');14 15 body {16 font-family: 'Space Grotesk', sans-serif;17 scroll-behavior: smooth;18 overflow-x: hidden;19 cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='18' fill='yellow'/><circle cx='15' cy='15' r='2' fill='black'/><circle cx='25' cy='15' r='2' fill='black'/><path d='M15 25 Q20 30 25 25' stroke='black' stroke-width='2' fill='none'/></svg>"), auto;20 }21 22 .duck-click {23 animation: quack 0.3s ease-out;24 }25 26 @keyframes quack {27 0% { transform: scale(1); }28 50% { transform: scale(0.9); }29 100% { transform: scale(1); }30 }31 32 .card-hover {33 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);34 }35 36 .card-hover:hover {37 transform: translateY(-10px) scale(1.03);38 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);39 }40 41 .team-card {42 transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);43 transform-origin: bottom;44 }45 46 .team-card:hover {47 transform: translateY(-15px) scale(1.05);48 z-index: 10;49 }50 51 .team-card:hover .team-info {52 opacity: 1;53 transform: translateY(0);54 }55 56 .team-info {57 opacity: 0;58 transform: translateY(20px);59 transition: all 0.3s ease-out;60 }61 62 .winter-bg {63 background: linear-gradient(180deg, #ffffff 0%, #e6f7ff 100%);64 position: relative;65 overflow: hidden;66 }67.winter-bg::before {68 content: "";69 position: absolute;70 top: 0;71 left: 0;72 right: 0;73 height: 100%;74 background-image: url('http://static.photos/winter/1200x630/42');75 background-size: cover;76 background-position: center;77 opacity: 0.2;78 z-index: -1;79 filter: blur(2px);80 }81 82 .winter-icon {83 transition: all 0.5s ease;84 filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.5));85 }86 .winter-icon:hover {87 transform: rotate(10deg) scale(1.1);88 }89.vanta-bg {90 position: absolute;91 top: 0;92 left: 0;93 width: 100%;94 height: 100%;95 z-index: -1;96 }97 98 .btn-register {99 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);100 box-shadow: 0 10px 20px -5px rgba(118, 75, 162, 0.4);101 transition: all 0.3s ease;102 }103 104 .btn-register:hover {105 transform: translateY(-3px);106 box-shadow: 0 15px 30px -5px rgba(118, 75, 162, 0.5);107 }108 109 .btn-support {110 background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);111 transition: all 0.3s ease;112 }113 114 .btn-support:hover {115 transform: translateY(-3px);116 box-shadow: 0 15px 30px -5px rgba(0, 242, 254, 0.3);117 }118 </style>119</head>120<body class="bg-gray-50">121 <!-- Hamburger Menu -->122 <div class="fixed top-4 right-4 z-50">123 <button id="menu-toggle" class="p-2 rounded-full bg-white bg-opacity-90 shadow-lg focus:outline-none">124 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">125 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />126 </svg>127 </button>128 <div id="mobile-menu" class="hidden fixed top-16 right-4 bg-white bg-opacity-90 backdrop-blur-sm z-40 rounded-xl shadow-xl p-6 w-64">129 <button id="menu-close" class="absolute top-2 right-2 p-1 text-gray-800">130<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">131 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />132 </svg>133 </button>134 <nav class="flex flex-col space-y-4">135 <a href="#" class="text-lg font-medium text-gray-800 hover:text-blue-600 transition duration-200 py-2">Home</a>136 <a href="#news" class="text-lg font-medium text-gray-800 hover:text-blue-600 transition duration-200 py-2">News</a>137 <a href="#team" class="text-lg font-medium text-gray-800 hover:text-blue-600 transition duration-200 py-2">Team</a>138 <a href="#contact" class="text-lg font-medium text-gray-800 hover:text-blue-600 transition duration-200 py-2">Contact</a>139 <a href="#" class="text-lg font-medium text-blue-600 hover:text-blue-800 transition duration-200 py-2">Register</a>140</nav>141 </div>142 </div>143 144 <div id="vanta-bg" class="vanta-bg"></div>145<!-- Winter Header -->146 <section class="relative h-64 md:h-96 overflow-hidden">147 <div class="absolute inset-0 bg-gradient-to-b from-blue-900/20 to-blue-900/40 z-10"></div>148 <img src="http://static.photos/winter/1200x630/42" alt="Winter Scene" class="w-full h-full object-cover object-center">149 <div class="absolute inset-0 flex items-center justify-center z-20">150 <h1 class="text-4xl md:text-6xl font-bold text-white text-center px-4 drop-shadow-lg">151 <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-100 to-blue-300">CS50</span>152 </h1>153 </div>154 </section>155 156 <!-- Hero Section -->157<section class="min-h-screen flex items-center justify-center relative overflow-hidden">158 <div class="container mx-auto px-6 py-20 text-center z-10">159<h1 class="text-6xl md:text-8xl font-bold text-gray-800 mb-6">160 <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-600">CS50</span>161 </h1>162<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-12">163 Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.164 </p>165 <div class="flex flex-col sm:flex-row justify-center items-center gap-6">166 <button class="btn-register text-white font-bold py-4 px-8 rounded-full text-lg">167 Register Now168 </button>169 <button class="btn-support text-white font-bold py-4 px-8 rounded-full text-lg">170 Get Support171 </button>172 </div>173 <div class="mt-20 animate-bounce">174 <i data-feather="chevron-down" class="w-12 h-12 text-gray-400"></i>175 </div>176 </div>177 </section>178 <!-- News Section -->179 <section id="news" class="winter-bg py-20">180<section class="winter-bg py-20">181 <div class="container mx-auto px-6">182 <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Latest News & Events</h2>183 184 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">185 <!-- News Card 1 -->186 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">187 <div class="h-48 overflow-hidden">188 <img src="http://static.photos/technology/640x360/1" alt="CS50 Event" class="w-full h-full object-cover transform hover:scale-110 transition duration-500">189 </div>190 <div class="p-6">191 <h3 class="text-2xl font-bold text-gray-800 mb-2">CS50 Puzzle Day</h3>192 <p class="text-gray-600 mb-4">Join us for the annual CS50 Puzzle Day on March 15th!</p>193 <a href="#" class="text-blue-500 font-medium hover:underline">Read More</a>194 </div>195 </div>196 197 <!-- News Card 2 -->198 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">199 <div class="h-48 overflow-hidden">200 <img src="http://static.photos/education/640x360/2" alt="CS50 Lecture" class="w-full h-full object-cover transform hover:scale-110 transition duration-500">201 </div>202 <div class="p-6">203 <h3 class="text-2xl font-bold text-gray-800 mb-2">New Lectures Added</h3>204 <p class="text-gray-600 mb-4">Check out our latest lectures on machine learning and AI.</p>205 <a href="#" class="text-blue-500 font-medium hover:underline">Watch Now</a>206 </div>207 </div>208 209 <!-- News Card 3 -->210 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">211 <div class="h-48 overflow-hidden">212 <img src="http://static.photos/workspace/640x360/3" alt="CS50 Hackathon" class="w-full h-full object-cover transform hover:scale-110 transition duration-500">213 </div>214 <div class="p-6">215 <h3 class="text-2xl font-bold text-gray-800 mb-2">Global Hackathon</h3>216 <p class="text-gray-600 mb-4">Participate in our worldwide hackathon this summer.</p>217 <a href="#" class="text-blue-500 font-medium hover:underline">Join Now</a>218 </div>219 </div>220 </div>221 </div>222 </section>223 <!-- Team Section -->224 <section id="team" class="py-20 bg-gray-50">225<section class="py-20 bg-gray-50">226 <div class="container mx-auto px-6">227 <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Meet Our Team</h2>228 229 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">230 <!-- Team Member 1 -->231 <div class="team-card bg-white rounded-xl p-6 shadow-lg text-center relative">232 <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-6 shadow-md">233 <img src="http://static.photos/people/320x240/1" alt="David Malan" class="w-full h-full object-cover">234 </div>235 <h3 class="text-xl font-bold text-gray-800">David Malan</h3>236 <p class="text-gray-600 mb-4">Professor</p>237 <div class="team-info absolute bottom-0 left-0 right-0 bg-white p-6 rounded-b-xl">238 <p class="text-gray-700">"Computer science is no more about computers than astronomy is about telescopes."</p>239 </div>240 </div>241 242 <!-- Team Member 2 -->243 <div class="team-card bg-white rounded-xl p-6 shadow-lg text-center relative">244 <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-6 shadow-md">245 <img src="http://static.photos/people/320x240/2" alt="Brian Yu" class="w-full h-full object-cover">246 </div>247 <h3 class="text-xl font-bold text-gray-800">Brian Yu</h3>248 <p class="text-gray-600 mb-4">Senior Preceptor</p>249 <div class="team-info absolute bottom-0 left-0 right-0 bg-white p-6 rounded-b-xl">250 <p class="text-gray-700">"The best way to learn is by doing - that's why CS50 is so project-focused!"</p>251 </div>252 </div>253 254 <!-- Team Member 3 -->255 <div class="team-card bg-white rounded-xl p-6 shadow-lg text-center relative">256 <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-6 shadow-md">257 <img src="http://static.photos/people/320x240/3" alt="Doug Lloyd" class="w-full h-full object-cover">258 </div>259 <h3 class="text-xl font-bold text-gray-800">Doug Lloyd</h3>260 <p class="text-gray-600 mb-4">Senior Preceptor</p>261 <div class="team-info absolute bottom-0 left-0 right-0 bg-white p-6 rounded-b-xl">262 <p class="text-gray-700">"Debugging is like being the detective in a crime movie where you're also the murderer."</p>263 </div>264 </div>265 266 <!-- Team Member 4 -->267 <div class="team-card bg-white rounded-xl p-6 shadow-lg text-center relative">268 <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-6 shadow-md">269 <img src="http://static.photos/people/320x240/4" alt="Rob Bowden" class="w-full h-full object-cover">270 </div>271 <h3 class="text-xl font-bold text-gray-800">Rob Bowden</h3>272 <p class="text-gray-600 mb-4">Preceptor</p>273 <div class="team-info absolute bottom-0 left-0 right-0 bg-white p-6 rounded-b-xl">274 <p class="text-gray-700">"Programming isn't about typing - it's about thinking and problem solving."</p>275 </div>276 </div>277 </div>278 </div>279 </section>280 <!-- Footer with Map -->281 <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8">282<footer class="bg-gray-900 text-white pt-16 pb-8">283 <div class="container mx-auto px-6">284 <div class="flex flex-col lg:flex-row gap-12">285 <div class="lg:w-1/2">286 <h3 class="text-2xl font-bold mb-6">About CS50</h3>287 <p class="text-gray-400 mb-6">288 CS50 is Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike.289 </p>290 <div class="flex space-x-4">291 <a href="#" class="text-gray-400 hover:text-white">292 <i data-feather="facebook"></i>293 </a>294 <a href="#" class="text-gray-400 hover:text-white">295 <i data-feather="twitter"></i>296 </a>297 <a href="#" class="text-gray-400 hover:text-white">298 <i data-feather="instagram"></i>299 </a>300 <a href="#" class="text-gray-400 hover:text-white">301 <i data-feather="youtube"></i>302 </a>303 </div>304 </div>305 306 <div class="lg:w-1/2">307 <h3 class="text-2xl font-bold mb-6">Our Location</h3>308 <div class="h-64 bg-gray-800 rounded-xl overflow-hidden">309 <!-- Google Map -->310 <iframe 311 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2947.4892408183736!2d-71.11784868454333!3d42.37700287918563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e377427d7f0199%3A0x5937c65cee2427f0!2sHarvard%20University!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 312 width="100%" 313 height="100%" 314 style="border:0;" 315 allowfullscreen="" 316 loading="lazy">317 </iframe>318 </div>319 </div>320 </div>321 322 <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">323 <p class="text-gray-400">© 2023 CS50. All rights reserved.</p>324 <div class="flex space-x-6 mt-4 md:mt-0">325 <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>326 <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>327 <a href="#" class="text-gray-400 hover:text-white">Contact Us</a>328 </div>329 </div>330 </div>331 </footer>332 333 <script>334 // Mobile Menu Toggle335 const menuToggle = document.getElementById('menu-toggle');336 const mobileMenu = document.getElementById('mobile-menu');337 const menuClose = document.getElementById('menu-close');338 menuToggle.addEventListener('click', () => {339 mobileMenu.classList.toggle('hidden');340 });341 342 menuClose.addEventListener('click', () => {343 mobileMenu.classList.add('hidden');344 });345 346 // Close menu when clicking on links347 document.querySelectorAll('#mobile-menu a').forEach(link => {348 link.addEventListener('click', () => {349 mobileMenu.classList.add('hidden');350 });351 });352// Initialize Vanta.js background353VANTA.NET({354 el: "#vanta-bg",355 mouseControls: true,356 touchControls: true,357 gyroControls: false,358 minHeight: 200.00,359 minWidth: 200.00,360 scale: 1.00,361 scaleMobile: 1.00,362 color: 0x3f83f8,363 backgroundColor: 0xf8fafc,364 points: 12.00,365 maxDistance: 22.00,366 spacing: 18.00367 });368 369 // Initialize Feather Icons370 document.addEventListener('DOMContentLoaded', function() {371 feather.replace();372 373 // Duck click animation374 document.addEventListener('click', function(e) {375 const duck = document.createElement('div');376 duck.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="yellow"/><circle cx="15" cy="15" r="2" fill="black"/><circle cx="25" cy="15" r="2" fill="black"/><path d="M15 25 Q20 30 25 25" stroke="black" stroke-width="2" fill="none"/></svg>`;377 duck.style.position = 'fixed';378 duck.style.left = (e.clientX - 20) + 'px';379 duck.style.top = (e.clientY - 20) + 'px';380 duck.style.pointerEvents = 'none';381 duck.style.zIndex = '9999';382 duck.style.transform = 'scale(1)';383 duck.style.transition = 'transform 0.3s ease-out';384 document.body.appendChild(duck);385 386 setTimeout(() => {387 duck.style.transform = 'scale(1.2)';388 }, 0);389 390 setTimeout(() => {391 duck.style.transform = 'scale(0)';392 }, 100);393 394 setTimeout(() => {395 document.body.removeChild(duck);396 }, 300);397 });398 // Smooth scroll for anchor links and close menu399 document.querySelectorAll('a[href^="#"]').forEach(anchor => {400 anchor.addEventListener('click', function (e) {401 e.preventDefault();402 document.querySelector(this.getAttribute('href')).scrollIntoView({403 behavior: 'smooth'404 });405 mobileMenu.classList.add('hidden');406 mobileMenu.classList.remove('flex');407 });408 });409});410 411 // Intersection Observer for animations412 const observer = new IntersectionObserver((entries) => {413 entries.forEach(entry => {414 if (entry.isIntersecting) {415 entry.target.classList.add('animate-fadeIn');416 }417 });418 }, {419 threshold: 0.1420 });421 422 document.querySelectorAll('.card-hover, .team-card').forEach(el => {423 observer.observe(el);424 });425 </script>426</body>427</html>428