How to make a simple form design in html and css on November 20, 2021 Get link Facebook Twitter 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>new project</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>welcome to our youtube channel</h1> <h2> new </h2> <div class="box"> <label>ID</label> <input type="text" placeholder="select your id"> <label >UserName</label> <input type="text" > <label >password</label> <input type="password"> <button class="btn">Login</button> <h5>Forget your password?</h5> </div> </body> </html> Html part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: rgb(151, 67, 67); font-family: sans-serif; color: #fff; } h1,h2{ font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; } h2{ border-bottom: 1px solid rgb(5, 3, 3); border-bottom-width: 7px; letter-spacing: 1px; font-family: sans-serif; } .box{ height: 350px; width: 400px; position: relative; left: 90px; background:rgb(151, 67, 67) ; box-shadow:2px 2px 10px rgb(49, 27, 27) ; } input{ padding: 8px 10px; width: 80%; margin: 15px 20px; border-radius: 4px ; border: none; outline: none; font-size: 1em; } label{ display: block; font-size: 1.1em; position: relative; left: 20px; top: 10px; text-transform: uppercase; } .btn{ padding: 8px 10px; width: 80%; border-radius: 4px; border: none; font-size: 1em; margin: 8px 20px; background: rgb(180, 56, 56); cursor: pointer; } .btn:hover{ background: crimson; } h5{ font-size: 0.9em; text-align: center; margin-top: 5px; } Comments
Comments
Post a Comment