How to design New Form on November 29, 2021 Get link Facebook X Pinterest Email Other Apps How to make simple form Design in html and css Html part <!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"> <title>sign up form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="text"> Register new account </h1> <div class="form"> <input type="text" class="same" placeholder="Name"> <input type="text" class="same" placeholder="Last Name"> <input type="text" class="input" placeholder="Location"> <input type="number" class="input" placeholder="Mobile Number"> <input type="email" class="input" placeholder="Email"> <input type="password" class="input" placeholder="password"> </div> <button class="btn">Create Account</button> </div> </body> </html> Css part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: linear-gradient(45deg,#03030331, #0a0a0a81); display: flex; justify-content: center; align-items: center; } .container{ width: 600px; height: 700px; background: rgb(3, 3, 3); border-radius: 8px; } .text{ display: inline-block; color: #fff; padding: 30px; font-size: 2.5rem; font-family: sans-serif; } .form{ margin-top: 20px; background: linear-gradient(90deg ,#e7d3d350, #3d3b3b75 ); padding: 7px; } .input{ display: block; width: 90%; margin: 40px 20px; padding: 15px 20px; border: none; outline: none; border-radius: 5px; } .same { display: inline-block; margin: 0 18px; margin-top: 40px; padding: 15px 20px; width: 40%; border: none; outline: none; border-radius: 5px; } .btn{ padding: 10px 30px; position: relative; left: 65%; top: 30px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: .2s; } .btn:hover{ background: rgb(49, 47, 44); color: #fff; } Comments
Comments
Post a Comment