I want a fullscreen wallpaper background and the login form to be in right side of the page
5e16790 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WallFlick - Login</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .bg-blur { | |
| backdrop-filter: blur(8px); | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen overflow-hidden"> | |
| <div class="absolute inset-0 bg-gray-900"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-90"></div> | |
| <img src="http://static.photos/technology/1200x630/42" alt="Background" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="relative h-full flex items-center justify-end px-12"> | |
| <div class="w-full max-w-md bg-white bg-blur rounded-xl shadow-xl p-10 backdrop-blur-lg"> | |
| <div class="flex justify-center mb-8"> | |
| <div class="bg-indigo-600 p-3 rounded-full"> | |
| <i data-feather="lock" class="text-white w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-2">Welcome Back</h2> | |
| <p class="text-gray-500 text-center mb-8">Login to access your account</p> | |
| <form> | |
| <div class="mb-5"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="mail" class="text-gray-400"></i> | |
| </div> | |
| <input type="email" id="email" class="pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200" placeholder="you@example.com"> | |
| </div> | |
| </div> | |
| <div class="mb-5"> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="lock" class="text-gray-400"></i> | |
| </div> | |
| <input type="password" id="password" class="pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200" placeholder="••••••••"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-200 flex items-center justify-center"> | |
| <span>Sign In</span> | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </button> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-500">Don't have an account? <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500">Sign up</a></p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Randomize background image every 30 seconds | |
| setInterval(() => { | |
| const categories = ['technology', 'minimal', 'abstract', 'gradient', 'monochrome']; | |
| const randomCategory = categories[Math.floor(Math.random() * categories.length)]; | |
| const randomSeed = Math.floor(Math.random() * 1000); | |
| document.querySelector('img').src = `http://static.photos/${randomCategory}/1200x630/${randomSeed}`; | |
| }, 30000); | |
| </script> | |
| </body> | |
| </html> | |