Spaces:
Running
Running
a robotics team website for team 5805, many tabs about, robot, person, roles, more stuff we are called SMbly Required, make it look moden and nice use place holder pictures
65ce8ac verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our Robot | SMbly Required 5805</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .tech-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .robot-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .robot-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg sticky top-0 z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="tech-font text-2xl font-bold text-cyan-400">SMbly Required</span> | |
| <span class="tech-font text-lg text-yellow-400">5805 | Mech Mavericks</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Home</a> | |
| <a href="robot.html" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Our Robot</a> | |
| <a href="team.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Team</a> | |
| <a href="roles.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Roles</a> | |
| <a href="sponsors.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Sponsors</a> | |
| <a href="events.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Events</a> | |
| <a href="gallery.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Gallery</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <h1 class="tech-font text-4xl font-bold text-center mb-12 text-cyan-400">Our Robot</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <div class="robot-card bg-gray-800 rounded-lg p-6 shadow-lg"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Robot Main Image" class="w-full h-64 object-cover rounded-lg mb-4"> | |
| <h2 class="tech-font text-2xl font-bold text-yellow-400 mb-2">Aurora</h2> | |
| <p class="text-gray-300">Our flagship competition robot designed for this year's challenges. Aurora combines precision engineering with cutting-edge software.</p> | |
| </div> | |
| <div class="robot-card bg-gray-800 rounded-lg p-6 shadow-lg"> | |
| <img src="http://static.photos/technology/1024x576/43" alt="Robot Features" class="w-full h-64 object-cover rounded-lg mb-4"> | |
| <h2 class="tech-font text-2xl font-bold text-yellow-400 mb-2">Key Features</h2> | |
| <ul class="text-gray-300 space-y-2"> | |
| <li><i data-feather="cpu" class="inline mr-2"></i> Advanced AI Vision System</li> | |
| <li><i data-feather="zap" class="inline mr-2"></i> 360° Omni-Directional Drive</li> | |
| <li><i data-feather="box" class="inline mr-2"></i> Rapid Ball Collection System</li> | |
| <li><i data-feather="target" class="inline mr-2"></i> Precision Scoring Mechanism</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow-lg mb-12"> | |
| <h2 class="tech-font text-3xl font-bold text-cyan-400 mb-6 text-center">Technical Specifications</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-yellow-400 mb-2">32</div> | |
| <div class="text-gray-300">Pounds</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-yellow-400 mb-2">15</div> | |
| <div class="text-gray-300">Motors</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-yellow-400 mb-2">8</div> | |
| <div class="text-gray-300">Sensors</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="robot-card bg-gray-800 rounded-lg p-6 shadow-lg"> | |
| <h2 class="tech-font text-2xl font-bold text-yellow-400 mb-4">Control System</h2> | |
| <img src="http://static.photos/technology/1024x576/44" alt="Control System" class="w-full h-48 object-cover rounded-lg mb-4"> | |
| <p class="text-gray-300">Custom-built control system with dual microprocessors for real-time processing and response.</p> | |
| </div> | |
| <div class="robot-card bg-gray-800 rounded-lg p-6 shadow-lg"> | |
| <h2 class="tech-font text-2xl font-bold text-yellow-400 mb-4">Awards</h2> | |
| <img src="http://static.photos/award/1024x576/45" alt="Awards" class="w-full h-48 object-cover rounded-lg mb-4"> | |
| <ul class="text-gray-300 space-y-2"> | |
| <li><i data-feather="award" class="inline mr-2"></i> 2023 Innovation Award</li> | |
| <li><i data-feather="award" class="inline mr-2"></i> 2022 Design Excellence</li> | |
| <li><i data-feather="award" class="inline mr-2"></i> 2021 Rookie All-Star</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |