Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
- <meta charset="utf-8">
- <title>Login</title>
- <style media="screen">
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- .clearfix { display: inline-block; }
- /* start commented backslash hack \*/
- * html .clearfix { height: 1%; }
- .clearfix { display: block; }
- /* close commented backslash hack */
- .login {
- font-family: 'Raleway', sans-serif;
- width: 400px;
- height: 200px;
- background-color: rgb(52, 52, 52);
- border-radius: 20px;
- position: relative;
- }
- .buttonBox-abs {
- background-color: rgb(52, 176, 210);
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
- position: absolute;
- right: 0;
- top: 0;
- width: 20%;
- height: 100%;
- }
- .buttonBox-rel {
- position: relative;
- height: 100%;
- width: 100%;
- }
- .loginButton {
- border: inherit;
- background-color: inherit;
- width: inherit;
- height: inherit;
- border: none;
- }
- .buttonBox-abs:hover {
- background-color: rgb(72, 195, 228);
- }
- .buttonBox-abs, .buttonBox-abs * {
- cursor: pointer;
- }
- .login > h1 {
- padding: 15px;
- margin: 0;
- color: #FFF;
- font-size: 1.5em;
- width: 80%;
- box-sizing: border-box;
- }
- .buttonBox-rel > p {
- font-size: 1.5em;
- position: absolute;
- color: #FFF;
- width: 100%;
- text-align: center;
- }
- .login label{
- color: white;
- }
- #usernamePassword {
- padding-top: 7%;
- width: 80%;
- }
- .labelBox {
- box-sizing: border-box;
- padding: 0 5%;
- width: 50%;
- float: left;
- }
- .labelBox label {
- font-size: .8em;
- }
- .labelBox input {
- border-radius: 5px;
- padding: 5px 25px 5px 10px;
- box-sizing: border-box;
- width: 100%;
- margin-top: 5%;
- }
- .labelImg {
- position: relative;
- }
- .labelImg img {
- position: absolute;
- right: 5px;
- top: 10px;
- height: 60%;
- }
- </style>
- </head>
- <body>
- <form class="login">
- <h1>LOGIN</h1>
- <div class="clearfix" id="usernamePassword">
- <div class="labelBox">
- <label for="username">Username:</label>
- <div class="labelImg">
- <input type="text" name="username">
- <img src="user.png" alt="username">
- </div>
- </div>
- <div class="labelBox">
- <label for="password">Password:</label>
- <div class="labelImg">
- <input type="text" name="password">
- <img src="lock.png" alt="password">
- </div>
- </div>
- </div>
- <div class="buttonBox-abs">
- <div class="buttonBox-rel">
- <input type="button" name="login" class="loginButton">
- <p style="top: 0; font-size: 3.5em; font-weight: bold; line-height: 0.5em;">></p>
- <p style="bottom: 0;">GO</p>
- </div>
- </div>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement