How To Create Login Page Using HTML  And CSS

source code for css

.rr{

    width: 320px;

    height: 400px;

    background: #000;

    color: #fff;

    position: absolute;

    top: 26%;

    left: 38%;

    padding:50%,10px ;

    text-align:center;

    letter-spacing: 1px;

    

}

.rr input[type="number"],[type="email"] { 

    background: transparent;

    border-bottom: 1px solid #fff;

    color: #fff;

    height: 25px;

    width: 80%;

    outline: none;

    text-align: center;

    overflow: hidden;

}

.btn{

    width: 80%;

    background: none;

    border: 2px solid #fff;

    color:#fff;

    padding: 5px;

    font: caption;

    cursor: pointer;

    color:#fff;

}

Source code for html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="rani.css"

</head>

<body>

    <div class="rr"><br><br><br>

        <p id="ss" style="font-size: 30px;"><u>

            Login</u></p>

     <i class="fa fa-lock" aria-hidden="true"></i>

    <input type="number" name="" placeholder="Place Your Number">

<p>OR</p>

     

     <input type="email" name="" placeholder="Enter Your Email">

     <br><br><br><input class="btn" type="submit" value="SUBMIT">

     <div class="footer">

 <br> <br><p><i style=" color:#fff;">@ Powered By Raushan</i></p>

</div>

</div>

</body>

</html>