| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vita Activa | Coming Soon</title> |
| <script src="https://cdn.tailwindcss.com"></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=Poppins:wght@400;500;700;900&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| body { |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| background-color: #f8f8f8; |
| font-family: 'Poppins', sans-serif; |
| } |
| .brutal-border { |
| border: 3px solid #333; |
| border-radius: 12px; |
| box-shadow: 6px 6px 0 rgba(0,0,0,0.1); |
| transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
| .brutal-border:hover { |
| transform: translate(-3px, -3px); |
| box-shadow: 8px 8px 0 rgba(0,0,0,0.15); |
| } |
| .brutal-border:active { |
| transform: translate(0, 0); |
| box-shadow: 4px 4px 0 rgba(0,0,0,0.1); |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotate(-1deg); } |
| 50% { transform: translateY(-8px) rotate(1deg); } |
| } |
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
| .dotted-bg { |
| background-image: radial-gradient(#333 15%, transparent 15%); |
| background-size: 12px 12px; |
| background-color: #F0F9FF; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="container mx-auto px-4 py-8 md:py-16"> |
| <header class="flex justify-between items-center mb-16 md:mb-24"> |
| <div class="text-3xl font-black tracking-tight"> |
| VITA ACTIVA |
| </div> |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-8"> |
| <li><a href="#" class="font-bold underline">ABOUT</a></li> |
| <li><a href="#" class="font-bold">VISION</a></li> |
| <li><a href="#" class="font-bold">TEAM</a></li> |
| <li><a href="#" class="font-bold">CONTACT</a></li> |
| </ul> |
| </nav> |
| <button class="md:hidden font-bold"> |
| MENU |
| </button> |
| </header> |
|
|
| <main class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-8 leading-tight tracking-tight"> |
| BUILDING THE FUTURE<br> |
| OF ROBOTICS<br> |
| TOGETHER |
| </h1> |
| <p class="text-xl mb-12 max-w-lg leading-relaxed"> |
| We're a collective of engineers and makers creating practical robotics solutions. |
| From prototypes to production, we make robotics accessible. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="brutal-border bg-black text-white px-8 py-4 font-bold hover:bg-white hover:text-black"> |
| LEARN MORE |
| </button> |
| <button class="brutal-border border-black px-8 py-4 font-bold hover:bg-black hover:text-white"> |
| VIEW GITHUB |
| </button> |
| </div> |
| </div> |
|
|
| <div class="md:w-1/2 flex justify-center"> |
| <div class="brutal-border w-full h-64 md:h-96 flex items-center justify-center floating dotted-bg"> |
| <div class="text-center p-8 relative"> |
| <div class="absolute -top-4 -left-4 w-12 h-12 rounded-full bg-yellow-300 border-2 border-black"></div> |
| <div class="absolute -bottom-4 -right-4 w-8 h-8 rounded-full bg-pink-300 border-2 border-black"></div> |
| <h3 class="text-4xl font-black mb-4 relative z-10">ACTIVE NOW</h3> |
| <p class="text-3xl font-bold relative z-10">SEEKING PARTNERS</p> |
| <div class="absolute top-1/2 right-0 w-16 h-2 bg-green-300 transform translate-x-1/2 -rotate-12 border border-black"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <section class="my-24 md:my-32"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="brutal-border p-8"> |
| <h3 class="text-2xl font-bold mb-4">Prototyping</h3> |
| <p>Rapid development of robotic concepts from napkin sketches to working prototypes.</p> |
| </div> |
| <div class="brutal-border p-8"> |
| <h3 class="text-2xl font-bold mb-4">Open Source</h3> |
| <p>We believe in sharing knowledge. Most of our work is open for collaboration.</p> |
| </div> |
| <div class="brutal-border p-8"> |
| <h3 class="text-2xl font-bold mb-4">Workshops</h3> |
| <p>Hands-on sessions to teach robotics fundamentals to makers of all levels.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mb-24 md:mb-32"> |
| <div class="brutal-border p-8 md:p-12 dotted-bg"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Join Our Community</h2> |
| <p class="text-xl mb-8 max-w-2xl"> |
| We're always looking for passionate people to collaborate with. Whether you're an engineer, designer, or just robotics-curious - let's build something amazing. |
| </p> |
| <button class="brutal-border bg-black text-white px-8 py-4 font-bold hover:bg-white hover:text-black"> |
| GET IN TOUCH |
| </button> |
| </div> |
| </section> |
|
|
| <footer class="mt-24 md:mt-32 pt-8 border-t border-gray-200"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <span class="font-bold">© 2023 VITA ACTIVA</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="font-bold">GITHUB</a> |
| <a href="#" class="font-bold">YOUTUBE</a> |
| <a href="#" class="font-bold">DISCORD</a> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const navLinks = document.querySelectorAll('nav a'); |
| navLinks.forEach(link => { |
| link.addEventListener('mouseenter', () => { |
| if (!link.classList.contains('underline')) { |
| link.classList.add('underline'); |
| } |
| }); |
| link.addEventListener('mouseleave', () => { |
| if (!link.getAttribute('class').includes('font-bold underline')) { |
| link.classList.remove('underline'); |
| } |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ashercn97/loves-it" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
