Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Google</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="icon" href="https://www.google.com/favicon.ico"> | |
| </head> | |
| <body class="bg-white min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="w-full flex justify-end p-4 space-x-4"> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Gmail</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Images</a> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i data-feather="grid"></i> | |
| </button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"> | |
| Sign in | |
| </button> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col items-center justify-center -mt-20 px-4"> | |
| <div class="mb-8"> | |
| <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="w-56 md:w-72"> | |
| </div> | |
| <div class="w-full max-w-xl relative"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="text-gray-400"></i> | |
| </div> | |
| <input type="text" class="w-full py-3 pl-10 pr-12 border border-gray-200 rounded-full hover:shadow-md focus:shadow-md focus:outline-none transition-shadow" autofocus> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i data-feather="mic"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8 space-x-2"> | |
| <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200"> | |
| Google Search | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200"> | |
| I'm Feeling Lucky | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-sm text-gray-600"> | |
| <p>Google offered in: <a href="#" class="text-blue-600 hover:underline">Español (Latinoamérica)</a></p> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 w-full"> | |
| <div class="px-8 py-3 border-b border-gray-300"> | |
| <p class="text-sm text-gray-600">United States</p> | |
| </div> | |
| <div class="px-8 py-3 flex flex-col md:flex-row md:justify-between"> | |
| <div class="flex space-x-6 mb-3 md:mb-0"> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">About</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Advertising</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Business</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">How Search works</a> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Privacy</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Terms</a> | |
| <a href="#" class="text-sm text-gray-600 hover:underline">Settings</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |