"Login Form"
Bootstrap 4.1.1 Snippet by naufaalrmd

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="style.css"> <!-- Bootstrap 4.4 link--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <section class="row justify-content-center"> <div class="loginform"> <div class="mainform"> <img src="assets/chenjera.png" class="rounded mx-auto d-block" alt="..."> <center><h1>Log in to Chenjera</h1></center> <!-- Form --> <form> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="text-center"> <button type="submit" class="button">Log In</button> </div> </form> <!-- end form --> <!-- log in with --> <div class="text-center"> <div class="with"> <p>Or, log in with:</p> <button type="submit" class="button2">Google</button> <button type="submit" class="button2">Microsoft</button> </div> </div> <!-- end log in with --> </div> </div> </section> </body> </html>
*{ font-family: Graphik,Helvetica,Arial,sans-serif,EmojiOne !important; } body{ background-color:#F24463 !important; } .loginform{ width:580px; height: 550px; top: 10vh; position: absolute; background-color: white; border-radius: 20px; } .mainform{ margin: 0 auto; width: 80%; } .mainform h1{ font-family: CooperBold,Georgia,Times,serif !important; margin-bottom: 15px; text-align: center; letter-spacing: 0.3px; font-weight: 600; font-size: 30px; word-spacing: 1px; } .form-control{ height: 55px; border:10px solid; } .button{ border-radius:100px; border:1px solid; height: 55px; width: 200px; background-color:#f24463; color: white; cursor:pointer; } .button2{ cursor:pointer; } .with p{ margin-top:25px; letter-spacing: 0.48px; color: #8e8f91; } .with button{ border-radius:100px; border:0.50px solid #8e8f91; height: 55px; width: 200px; background-color:white; color: #f24463; } img{ margin: 0 auto; width: 120px; padding: 20px 0 10px 0; } .form-group{ margin: 0 auto; width: 80%; } @media only screen and (max-width: 600px) { .loginform { position: absolute; top:10vh; width: 300px; height: 600px; border-radius: 20px; } img{ margin: 0 auto; width: 100px; padding: 10px 0 3px 0; } .with button{ margin:5px; } .mainform h1{ text-align: center; letter-spacing: 0.3px; font-weight: 600; font-size: 18px; word-spacing: 1px; } }

Questions / Comments: