Here,s My HTML code,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" /> <title>form</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="container"> <form> <h1>Please sign in</h1> <div class="div-container"> <label> <input type="email" id="email" placeholder="Email address" autofocus /> </label> <label> <input type="password" id="password" placeholder="Password" /> </label> <label for=""> <input type="checkbox" name="" id="" />Rememeber me </label> <button class="btn">Sign in</button> <p>Copyright ©2020</p> </div> </form> </div> </body> </html> Here,s My CSS code,
body { background-color: #f5f5f5; line-height: 3; } label { display: block; } .container { width: 100%; } form { width: 50%; padding: 5rem; margin: 0 auto; } h1 { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #000; font-size: 23px; text-align: center; } .btn { border-radius: 20px; background: #0d6efd; text-align: center; width: 200px; padding: 10px; color: #fff; border: #ced4da; } #email { width: 200px; padding: 10px; } #password { width: 200px; padding: 10px; } input { border: 1px solid #ced4da; background-color: #fff; border-radius: 5px; } .div-container { width: 25%; margin: 0 auto; } #email:focus, #password:focus { /* box-shadow: #b9d3fa; */ outline: 0; border-color: #86b7fe; } Here's the output
