login - Real Helper

Saldy Galliguez

1768

 <!DOCTYPE html>
<html>
<head>
<title>my log in</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="web">
<div class="form">
<h2>login</h2><br><br>
<h4>User name</h4><br>
<input type="text" id="uname" placeholder="enter username">
<br><br>
<h4>Password</h4><br>
<input type="password" id="uname" placeholder="enter password"><br><br>
<button class="log">login</button>
<span class="forgot"><a href="#">forgoten password ?</a></span>
</div>
</body>
</html>

Try it Yourself >>

 body{
    min-width: 100vh;
    background-image: linear-gradient(120deg, orange, purple);
    background-repeat: no-repeat;
    }
    .web{
    align-items: center;
    justify-content: center;
    }
    .form{
    bacground-color: white;
    border-radius: 12px;
    height: 50%;
    width: 420px;
    }
    h2{
    text-align: center;
    }
    h4{
    float: left
    margin: 1rem;
    } 
#uname{
    background-color: transparent;
    border: none;
    color: black;
    border-radius: 6px;
    width: 380px; 
    }
    /* some things i forgot but will still work */
    .web{
    dispay: flex;
    }
    .form{
    overflow: hidden
    }
    /* the login button style */
    .log{
    width: 360px
    border: none;
    background: linear-gradient(orange, purple, orange);
    border-radius: 12px;
    }
    /*the forgot password text*/
    .forgot{
    float: right;
    }

Try it Yourself >>