Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Roblox - Imagine, Create, Play</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .game-card:hover .game-image { | |
| transform: scale(1.05); | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .search-bar:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px #00a2ff; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center"> | |
| <img src="https://cdn2.unrealengine.com/egs-social-roblox-icon-400x400-0e0fa1fcf6d6.png" alt="Roblox Logo" class="h-8 w-8"> | |
| <span class="ml-2 text-xl font-bold text-gray-800">ROBLOX</span> | |
| </a> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="hidden md:flex flex-1 mx-4"> | |
| <div class="relative w-full max-w-xl"> | |
| <input type="text" placeholder="Search games, items, people..." | |
| class="w-full py-2 px-4 rounded-full border border-gray-300 focus:outline-none search-bar"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation Links --> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="text-gray-700 hover:text-blue-500">Discover</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500">Marketplace</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500">Create</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500">Robux</a> | |
| <!-- Dropdown Menu --> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-700 hover:text-blue-500 flex items-center"> | |
| More <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white mt-2 py-2 w-48 rounded-md shadow-lg z-10"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Forum</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Blog</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Help</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Auth Buttons --> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"> | |
| Sign Up | |
| </button> | |
| <button class="hidden md:block border border-gray-300 hover:bg-gray-100 px-4 py-2 rounded-md"> | |
| Log In | |
| </button> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Imagine. Create. Play.</h1> | |
| <p class="text-xl mb-8">Roblox is the ultimate virtual universe that lets you create, share experiences with friends, and be anything you can imagine.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-full"> | |
| Start Playing | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-bold py-3 px-6 rounded-full"> | |
| Download Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0" alt="Roblox Characters" class="w-full max-w-md floating"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Games Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Featured Experiences</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/420/420/Image/Png" alt="Adopt Me!" class="w-full h-full object-cover game-image transition-transform duration-300"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2 overflow-hidden"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/150/150/Image/Png" alt="Creator" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-white text-sm">Uplift Games</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adopt Me!</h3> | |
| <p class="text-gray-600 text-sm mb-2">Raise pets, design your dream home, and roleplay with friends!</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.8</span> | |
| </div> | |
| <span class="text-gray-500 text-sm">100M+ visits</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/420/420/Image/Png" alt="Brookhaven RP" class="w-full h-full object-cover game-image transition-transform duration-300"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2 overflow-hidden"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/150/150/Image/Png" alt="Creator" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-white text-sm">Wolfpaq</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Brookhaven RP</h3> | |
| <p class="text-gray-600 text-sm mb-2">Roleplay in a massive city with houses, jobs, and vehicles!</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.7</span> | |
| </div> | |
| <span class="text-gray-500 text-sm">80M+ visits</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/420/420/Image/Png" alt="Tower of Hell" class="w-full h-full object-cover game-image transition-transform duration-300"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2 overflow-hidden"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/150/150/Image/Png" alt="Creator" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-white text-sm">YXCeptional Studios</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Tower of Hell</h3> | |
| <p class="text-gray-600 text-sm mb-2">Race to the top in this fast-paced obstacle course!</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.5</span> | |
| </div> | |
| <span class="text-gray-500 text-sm">60M+ visits</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 4 --> | |
| <div class="game-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/420/420/Image/Png" alt="Murder Mystery 2" class="w-full h-full object-cover game-image transition-transform duration-300"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2 overflow-hidden"> | |
| <img src="https://tr.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0/150/150/Image/Png" alt="Creator" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-white text-sm">Nikilis</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Murder Mystery 2</h3> | |
| <p class="text-gray-600 text-sm mb-2">Can you find the murderer before it's too late?</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-700">4.6</span> | |
| </div> | |
| <span class="text-gray-500 text-sm">75M+ visits</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md"> | |
| See All Experiences | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Create Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <img src="https://images.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0" alt="Roblox Studio" class="w-full max-w-md rounded-lg shadow-lg"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl font-bold mb-6">Create Anything You Can Imagine</h2> | |
| <p class="text-gray-700 mb-6">Roblox Studio lets you create anything and release with one click to smartphones, tablets, desktops, consoles, and virtual reality devices.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-cube text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Powerful Creation Tools</h3> | |
| <p class="text-gray-600">Build anything with our easy-to-use tools and templates.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-users text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Engage a Global Community</h3> | |
| <p class="text-gray-600">Reach millions of players and monetize your creations.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-code text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Learn to Code</h3> | |
| <p class="text-gray-600">Use Lua to create interactive experiences.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-md"> | |
| Start Creating | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Robux Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Get Robux</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Purchase Robux to get premium items and upgrades for your avatar and experiences.</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-2xl font-bold mb-2">400</div> | |
| <div class="mb-4">$4.99</div> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-2 px-4 rounded-full text-sm"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-2xl font-bold mb-2">800</div> | |
| <div class="mb-4">$9.99</div> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-2 px-4 rounded-full text-sm"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-2xl font-bold mb-2">1,700</div> | |
| <div class="mb-4">$19.99</div> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-2 px-4 rounded-full text-sm"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-2xl font-bold mb-2">4,500</div> | |
| <div class="mb-4">$49.99</div> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-2 px-4 rounded-full text-sm"> | |
| Buy Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Roblox</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">About Us</a></li> | |
| <li><a href="#" class="hover:text-white">Jobs</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Parents</a></li> | |
| <li><a href="#" class="hover:text-white">Gift Cards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white">Developer Hub</a></li> | |
| <li><a href="#" class="hover:text-white">Safety</a></li> | |
| <li><a href="#" class="hover:text-white">Community Standards</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of Use</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-white">Status</a></li> | |
| <li><a href="#" class="hover:text-white">Report Abuse</a></li> | |
| <li><a href="#" class="hover:text-white">Refund Policy</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <img src="https://images.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0" alt="App Store" class="h-10"> | |
| <img src="https://images.rbxcdn.com/5d7a795c4a0d0c7c5d6c0d0d0d0d0d0" alt="Google Play" class="h-10"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm"> | |
| <p>©2023 Roblox Corporation. All rights reserved.</p> | |
| <p class="mt-2">Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.className = 'hidden bg-white w-full absolute z-50 shadow-lg'; | |
| mobileMenu.innerHTML = ` | |
| <div class="px-4 py-2"> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Discover</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Marketplace</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Create</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Robux</a> | |
| <div class="border-t border-gray-200 my-2"></div> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Sign Up</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-500">Log In</a> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Game card hover effect | |
| const gameCards = document.querySelectorAll('.game-card'); | |
| gameCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.querySelector('.game-image').style.transform = 'scale(1.05)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.querySelector('.game-image').style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| }); | |
| </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=XLegendSigmaBro/roblox-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |