"Untitled"
Bootstrap 4.1.1 Snippet by Harikaran1994

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 and Registration Form</title> <link rel="stylesheet" href="Style.css"> </head> <body> <div class="login-page"> <div class ="form"> <form class="register-form"> <input type="text" placeholder="FirstName"/> <input type="text" placeholder="LastName"/> <input type="password" placeholder="Password"/> <input type="password" placeholder="ConfirmPassword"/> <input type="email" placeholder="emailid"/> <input type="number" placeholder=" MobileNumber"/> <input type="checkbox" place holder ="accepts terms & conditions">Accept Terms & Conditions <button> Sign Up </button> <p class="message"> Already registered? <a href="#"> Login </a> </p> </form> </div> </div> </body> </html>
body{ background-color: darkslategrey; height: auto; background-size: cover; background-position: center; } .login-page{ width: 360px; padding: 10% 0 0 ; margin: auto; } .form { position: relative; z-index: 1; background-color: darkgray; max-width: 360px; margin: 0 auto 100px; padding: 25px; text-align: center; } .form input{ font-family: "Roboto",sans-serif; outline: 1; background:#f1f1f1; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; } .form button { font-family: "Roboto",sans-serif; text-transform: uppercase; outline: 0; background-color: black; width: 100%; border: 0; padding: 15px; color: cornsilk; font-size: 14px; cursor: pointer; } .form button :hover,.form button:active{ background: #43A047; } .form .message{ margin: 15px 0 0; color: aliceblue; font-size: 14px; }

Related: See More

Gaia Bootstrap Template

Questions / Comments: