screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .container { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; margin-top: 50px; max-width: 400px; /* Added max-width to limit the form width */ margin-left: auto; margin-right: auto; background-color: #ffffff; border-radius: 8px; } .container h2 { text-align: center; margin-bottom: 20px; color: #333333; } .form-group label { margin-bottom: 5px; color: #333333; } .form-control { border-radius: 4px; } .btn-primary { background-color: #007bff; border-color: #007bff; } .btn-primary:hover { background-color: #0069d9; border-color: #0062cc; } .text-end { text-align: right; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form> <div class="form-group mb-2"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" placeholder="Enter username" required> </div> <div class="form-group mb-2"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" placeholder="Enter password" required> </div> <div class="text-end"> <button type="submit" class="btn btn-primary">login</button> </div> </form> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>