Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Megatron- IA</title> | |
| <link rel="stylesheet" href="stylee.css" /> | |
| <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Correction : class au lieu de clack --> | |
| <video class="back-vid" loop autoplay muted playsinline> | |
| <source src="videos/galaxy.mp4" type="video/mp4" /> | |
| </video> | |
| <header> | |
| <div class="left"> | |
| <img src="images/noun-technology-965231.png" alt="logo" /> | |
| <h1><span style="color:rgb(218, 218, 218)"> Keylo</span></h1> | |
| </div> | |
| <ul> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Models</a></li> | |
| <li><a href="#">Our tech</a></li> | |
| <li><a href="#">Guides</a></li> | |
| <li><a href="#">Next Up</a></li> | |
| <li><a href="#">More Features</a></li> | |
| </ul> | |
| <div class="box-icons"> | |
| <a href="#"><i class='bx bxl-gmail'></i></a> | |
| <a href="#"><i class='bx bxl-github'></i></a> | |
| <a href="#"><i class='bx bxl-linkedin'></i></a> | |
| <a href="#"><i class='bx bxl-twitter'></i></a> | |
| </div> | |
| </header> | |
| <div class="blackhole-box"> | |
| <video loop autoplay muted plays-inline | |
| src="videos/blackhole.mp4" type="video/mp4"></video> | |
| </div> | |
| <section class="hero"> | |
| <div class="hero-info autoBlur"> | |
| <div class="hero-info-title"> | |
| <i class='bx bxl-sketch'></i> Model inspiration Ideas creating | |
| </div> | |
| <h1>Understand what's <span class="gradient"> Beyound Universe</span> </h1> | |
| <p> | |
| AI’s knowledge should be all-encompassing and as far-reaching as possible. | |
| We build AI specifically to advance human comprehension and capabilities. | |
| We’re building an AI model named... | |
| </p> | |
| <button>Try It Now <i class='bx bxs-right-top-arrow-circle'></i></button> | |
| </div> | |
| <div class="hero-vid-box"> | |
| <video class="autoBlur" loop autoplay muted plays-inline | |
| src="videos/hero-video.mp4" type="video/mp4"></video> | |
| </div> | |
| <div class="scroll-down"> | |
| <span></span> | |
| </div> | |
| </section> | |
| <section class="info-section" id="about-us"> | |
| <h1 class="section-title">About Us</h1> | |
| <div class="info-cards"> | |
| <div class="card"> | |
| <div class="card-inner"> | |
| <h1>Our Company</h1> | |
| <p>We’re a crew of passionate students driven to build Kaylo Ben is a curious, innovative chatbot built to connect and inspire through conversation | |
| but connects—delivering answers, ideas, and a bit of fun along the way. Inspired by the vastness of human imagination and the power of tech | |
| Join us—let’s make the future epic, one chat at a time.</p> | |
| <video loop autoplay muted playsinline src="videos/momo.mp4" type="video/mp4"></video> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-inner"> | |
| <h1>Our Journey</h1> | |
| <p>A long time ago, in a dorm room far, far away, we sparked Kaylo Ben’s rebel code." | |
| "Like scrappy Jedi, we battled bugs and wielded AI to forge a galactic chatbot." | |
| "Our journey’s just begun—join us to strike back against boring tech!"</p> | |
| <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60" alt="space-tech"> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-inner"> | |
| <h1>The Kaylo Vision</h1> | |
| <p>We’re crafting Kaylo Ben to be more than just an AI—it’s a friend who gets you." | |
| "Our vision is simple blend tech with heart to inspire and assist, student-style." | |
| "Think bold chats, big ideas, and a bot that grows with us and you.</p> | |
| <video loop autoplay muted playsinline src="videos/glob.mp4" type="video/mp4"></video> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-inner"> | |
| <h1>Our Spark</h1> | |
| <p>Our spark ignites as passionate students, dreaming big through every line of code. | |
| It’s our drive to turn wild dreams into a chatbot that lights up your world</p> | |
| <video loop autoplay muted playsinline src="videos/ko.mp4" type="video/mp4"></video> </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="my-projects" id="models"> | |
| <h1 class="section-title">Models</h1> | |
| <div class="project-card"> | |
| <div class="project-vidbox"> | |
| <video id="p1" loop autoplay muted playsinline src="videos/project2.mp4"></video> | |
| </div> | |
| <div class="project-info"> | |
| <h1>Facial <span class="gradient">Recognition</span></h1> | |
| <p>Our Face Recognition model, built by student visionaries, spots faces and emotions in a flash. From pixel patterns to smiles, it’s the eyes of Kaylo Ben—crafted with grit and code.</p> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-vidbox"> | |
| <video id="p2" loop autoplay muted playsinline src="videos/project1.mp4"></video> | |
| </div> | |
| <div class="project-info"> | |
| <h1>Natural <span class="gradient">Language</span> Processing (NLP)</h1> | |
| <p>Through our Natural Language Processing model, our dedicated student team has enabled Kaylo Ben to engage in seamless, intelligent conversations. It skillfully interprets your input and responds with clarity and insight.</p> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-vidbox"> | |
| <video id="p3" loop autoplay muted playsinline src="videos/project1.mp4"></video> | |
| </div> | |
| <div class="project-info"> | |
| <h1>Speech <span class="gradient">Recognition</span></h1> | |
| <p>Our Speech Recognition model turns your voice into action, forged by students who love a good soundwave. Speak up—Kaylo Ben’s listening, ready to roll with every word.</p> | |
| </div> | |
| </div> | |
| <div class="project-card"> | |
| <div class="project-vidbox"> | |
| <video id="p4" loop autoplay muted playsinline src="videos/project1.mp4"></video> | |
| </div> | |
| <div class="project-info"> | |
| <h1>Predictive <span class="gradient">Analytics</span></h1> | |
| <p>Predictive Analytics is our student-made crystal ball, guessing what’s next with data-crunching finesse. From trends to tips, it powers Kaylo Ben’s forward-thinking edge.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="skills-section" id="our-tech"> | |
| <h1 class="section-title">Our Tech</h1> | |
| <div class="skills-box"> | |
| <img class="skills-img" src="images/digital brain.png" alt="skills-img"> | |
| </div> | |
| <div class="d"> | |
| <h1 class="gradient">Keylo's Core Tech</h1> | |
| <p> Keylo is specialized in delivering razor-sharp answers to your questions, breaking down complex queries with ease. | |
| It excels in real-time translation, bridging languages effortlessly, and powers human language processing to understand you like a friend. | |
| Plus, its image generators turn ideas into visuals, fueled by student-crafted creativity.</p> | |
| </div> | |
| <div class="coder"> | |
| <h1 class="gradient">The Cosmic Edge</h1> | |
| <p>Keylo doesn’t just compute—it dreams in binary, weaving data into insights that spark curiosity across the galaxy. | |
| From decoding the whispers of code to predicting trends with a hacker’s intuition, it’s built to push boundaries. | |
| Our tech fuses raw student grit with cosmic ambition, making Keylo a companion for explorers of the infinite.</p> | |
| </div> | |
| <div class="skills-center"> | |
| <div class="slider" reverse="true" style="--width:100px; --height:100px; --quantity:9;"> | |
| <div class="list"> | |
| <div class="items" style="--position:1"><img src="images/1.png" alt="slider-img"></div> | |
| <div class="items" style="--position:2"><img src="images/2.png" alt="slider-img"></div> | |
| <div class="items" style="--position:3"><img src="images/3.png" alt="slider-img"></div> | |
| <div class="items" style="--position:4"><img src="images/4.png" alt="slider-img"></div> | |
| <div class="items" style="--position:5"><img src="images/5.png" alt="slider-img"></div> | |
| <div class="items" style="--position:6"><img src="images/6.png" alt="slider-img"></div> | |
| <div class="items" style="--position:7"><img src="images/7.png" alt="slider-img"></div> | |
| <div class="items" style="--position:8"><img src="images/8.png" alt="slider-img"></div> | |
| <div class="items" style="--position:9"><img src="images/9.png" alt="slider-img"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!---<section class="skills-section"> | |
| <h1 class="skills-title">Skills Section</h1> | |
| <div class="skills-box"> | |
| <div class="skills-left"> | |
| <h2>Keylo's Core Tech</h2> | |
| <p>Keylo is specialized in delivering razor-sharp answers to your questions, breaking down complex queries with ease.</p> | |
| <p>It excels in real-time translation, bridging languages effortlessly, and powers human language processing to understand you like a friend.</p> | |
| <p>Plus, its image generators turn ideas into visuals, fueled by student-crafted creativity.</p> | |
| </div> | |
| <div class="skills-right"> | |
| <h2>The Cosmic Edge</h2> | |
| <p>Keylo doesn’t just compute—it dreams in binary, weaving data into insights that spark curiosity across the galaxy.</p> | |
| <p>From decoding the whispers of code to predicting trends with a hacker’s intuition, it’s built to push boundaries.</p> | |
| <p>Our tech fuses raw student grit with cosmic ambition, making Keylo a companion for explorers of the infinite.</p> | |
| </div> | |
| </div> | |
| </section>!---> | |
| <section class="guides-section" id="guides"> | |
| <h1 class="guides-title">Guides</h1> | |
| <div class="guides-box"> | |
| <div class="guides-content"> | |
| <h2 class="guides-subtitle">Unlock Keylo’s Power</h2> | |
| <div class="guides-text"> | |
| <p>Master the art of asking Keylo anything—start with “Hey Keylo, what’s beyond the stars?” and watch it unravel cosmic secrets.</p> | |
| <p>Translate alien tongues or your friend’s slang—just say the word, and Keylo’s got your back across galaxies.</p> | |
| <p>Chat like a pro: feed it questions, ideas, or wild theories—it’ll riff with you, blending tech and soul.</p> | |
| <p>Generate mind-blowing visuals—tell Keylo “paint me a nebula,” and see student-coded magic light up your screen.</p> | |
| </div> | |
| <button class="guides-button">Discover More <i class='bx bxs-right-top-arrow-circle'></i></button> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <section class="next-up-section" id="next-up"> | |
| <h1 class="next-up-title">Next Up</h1> | |
| <div class="next-up-card next-up-video"> | |
| <video class="background-video" loop autoplay muted playsinline src="videos/v2.mp4"></video> | |
| </div> | |
| <!-- <div class="next-up-card next-up-video"> | |
| <video loop autoplay muted playsinline src="videos/v1.mp4"></video>---> | |
| <div class="next-up-card next-up-content"> | |
| <h2>Keylo’s Upcoming Upgrades</h2> | |
| <ul> | |
| <li>Enhanced face recognition for sharper detection</li> | |
| <li class="separator"></li> | |
| <li>Visualize ML datasets with stunning clarity</li> | |
| <li class="separator"></li> | |
| <li>Special tools for effortless data analysis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="more-features-section" id="more-features"> | |
| <h1 class="more-features-title">More Features</h1> | |
| <div class="more-features-container autoBlur"> | |
| <div class="feature-bubble"> | |
| <h2>Cosmic Chat</h2> | |
| <p>Keylo chats beyond the ordinary—ask it anything, and it’ll weave answers with a galactic twist.</p> | |
| </div> | |
| <div class="feature-bubble"> | |
| <h2>Code Wizardry</h2> | |
| <p>Tap into Keylo’s student-coded magic—debug, brainstorm, or build with a tech-savvy sidekick.</p> | |
| </div> | |
| <div class="feature-bubble"> | |
| <h2>Stellar Insights</h2> | |
| <p>Get predictions and trends from Keylo’s data-crunching brain—insights that light up the unknown.</p> | |
| </div> | |
| <div class="feature-bubble"> | |
| <h2>Creative Spark</h2> | |
| <p>Unleash your imagination—Keylo generates art, ideas, and more, fueled by cosmic creativity.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="footer-wrapper"> | |
| <!-- Logo & Tagline --> | |
| <div class="footer-brand"> | |
| <h2>IA Chatbot</h2> | |
| <p>Powered by Vion AI</p> | |
| </div> | |
| <!-- Quick Links --> | |
| <div class="footer-links"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">How to Use</a></li> | |
| <li><a href="#">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div class="footer-contact"> | |
| <h4>Get in Touch</h4> | |
| <ul> | |
| <li><i class='bx bx-mail-send'></i> <a href="mailto:vion@gmail.com">vion@gmail.com</a></li> | |
| <li><i class='bx bx-phone'></i> +91-81000-25255</li> | |
| </ul> | |
| </div> | |
| <!-- Social & CTA --> | |
| <div class="footer-social"> | |
| <h4>Follow Us</h4> | |
| <div class="social-links"> | |
| <a href="#" aria-label="Facebook"><i class='bx bxl-facebook'></i></a> | |
| <a href="#" aria-label="Twitter"><i class='bx bxl-twitter'></i></a> | |
| <a href="#" aria-label="Instagram"><i class='bx bxl-instagram'></i></a> | |
| </div> | |
| <a href="index.html" class="cta-button">Try Vion Now</a> <!-- Updated link --> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="scriptt.js"></script> | |
| </body> | |
| </html> |