"Log in form"
Bootstrap 4.1.1 Snippet by vaidehi1234

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Login Form</title> <link rel="stylesheet" type="text/css" href="Form3.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="box"> <h3>SIGN UP</h3> <form> <div class="inputbox"> <input type="text" name="fname" placeholder="Username" > <span><i class="fa fa-user" aria-hidden="true"></i></span> </div> <div class="inputbox"> <input type="password" name="password" placeholder="Password"> <span><i class="fa fa-lock" aria-hidden="true"></i></span> </div> <div class="inputbox"> <input type="password" name="password" placeholder="Confirm Password"> <span><i class="fa fa-lock" aria-hidden="true"></i></span> </div> <label>Remember Me</label> <input type="checkbox" name="remember" checked="checked"/> <div class="inputbox"> <button type="submit" name="FINISH" value="submit">FINISH</button> </div> <div class="box2"> <span><i class="fas fa-times"></i></span> <img src="https://image.flaticon.com/icons/png/512/149/149071.png" alt="img"/> <div class="text"> <h2>VAIDEHI PANCHAL</h2> <P>WEB DESIGNER</P> <button type="submit" name="FINISH" value="submit" >VIEW PROFILE</button> </div> </div> </form> </div> </div> </body> </html>
* { box-sizing: border-box; } .container-fluid { width: 100%; } body { background-image: url(https://cdn2.slidemodel.com/wp-content/uploads/7382-01-duotone-gradients-powerpoint-templates-16x9-2.jpg); background-size:cover; background-repeat:no-repeat; } .container { width: 1140px; margin: 0 auto; } .box { width: 370px; height: 500px; margin: 90px 40px; padding: 70px 40px; border-radius: 10px; background-color: white; position: relative; margin-left:200px; } h3 { color: #e600ac; font-family: open-sans,sans-serif; font-weight: normal; font-size: 30px; } .box input { width: 100%; margin-bottom: 20px; } .box input[type="text"], .box input[type="password"] { border: none; border-bottom: 1px solid gray; outline: none; height: 40px; color: gray; background: transparent; font-size: 16px; padding-left: 10px; box-sizing: border-box; display: inline-block; } .inputbox { position: relative; } .inputbox span { position: absolute; color: gray; top:10px; right:0; } .box button[type="submit"] { border:2px solid violet; border-radius:30px; display: inline-block; padding:8px 30px; background-color: transparent; margin-top: 15px; margin-left: 180px; } .box input[type="checkbox"] { width:10%; display:block; } .box label { display:block; position:absolute; left:20%; } .box2 { height:350px; width:400px; background-image:url(https://www.xmple.com/wallpaper/pink-gradient-purple-linear-1920x1080-c2-ff69b4-9400d3-a-90-f-14.svg); float:left; transform:translate(82.5%,-88%); border-radius:0 15px 15px 0; background-size:cover; overflow: hidden; position: relative; } .box2 span { position: absolute; color: #262626; right:0; margin:20px 20px; color: white; } .box2 img { height: 100px; width: 100px; margin-top:60px; margin-left: 150px; } .text h2 { color: white; text-align: center; font-family: open-sans,sans-serif; font-weight: normal; } .text p { color: white; text-align: center; font-family: open-sans,sans-serif; font-weight: normal; } .box2 button[type="submit"] { border:2px solid white; border-radius:30px; display: inline-block; text-align: center; background-color: transparent; margin-top: 15px; margin-left:120px; color: white; font-size: 12px; }

Related: See More

Material Bootstrap Wizard
login-form
Login Form
Contact Form

Questions / Comments: