<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="login"> <div class="login-triangle"></div> <h2 class="login-header">Log in</h2> <form class="login-container"> <p><input type="email" placeholder="Email"></p> <p><input type="password" placeholder="Password"></p> <p><input type="submit" value="Log in"></p> </form> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- snipp1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9155049400353686" data-ad-slot="4807425052" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { background: #456; font-family: 'Open Sans', sans-serif; } .login { width: 400px; margin: 16px auto; font-size: 16px; } /* Reset top and bottom margins from certain elements */ .login-header, .login p { margin-top: 0; margin-bottom: 0; } /* The triangle form is achieved by a CSS hack */ .login-triangle { width: 0; margin-right: auto; margin-left: auto; border: 12px solid transparent; border-bottom-color: #28d; } .login-header { background: #28d; padding: 20px; font-size: 1.4em; font-weight: normal; text-align: center; text-transform: uppercase; color: #fff; } .login-container { background: #ebebeb; padding: 12px; } /* Every row inside .login-container is defined with p tags */ .login p { padding: 12px; } .login input { box-sizing: border-box; display: block; width: 100%; border-width: 1px; border-style: solid; padding: 16px; outline: 0; font-family: inherit; font-size: 0.95em; } .login input[type="email"], .login input[type="password"] { background: #fff; border-color: #bbb; color: #555; } /* Text fields' focus effect */ .login input[type="email"]:focus, .login input[type="password"]:focus { border-color: #888; } .login input[type="submit"] { background: #28d; border-color: transparent; color: #fff; cursor: pointer; } .login input[type="submit"]:hover { background: #17c; } /* Buttons' focus effect */ .login input[type="submit"]:focus { border-color: #05a; }