Beautiful login form design by me by using HTML and CSS.I hope you like it if yes then comment and describe how beautiful it is ?






HTML
__________________________________________________________________________
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="wasiii"/>
        <title>Login</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>

    </head>
    <body>
        <div id="pic">
            <img src="goo.png" height="450px" width="300px" alt="picture"/>
        </div>
        <div id="box">
            <h1>Login</h1>
            <div id="box2">
            <input type="text" class="login" placeholder="Your email address"/>
            <input type="password" class="login" placeholder="Password"/>
            </br><input type="submit" class="btn" value="Login"/>   
        </div>
        </div>

    </body>
</html>
_________________________________________________________________________
CSS
__________________________________________________________________________
body{
    padding:0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:black;
}
#box{
    height: 450px;
    width:650px;
    background-color: white;
    position: absolute;
    left: 35%;
    top: 15%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.login{
    background: none;
    padding: 6px 80px 10px 2px;
    margin: 10px 0px 0px 200px;
    border-bottom-style: solid;
    border-style: none none solid none;
}
h1{
    text-align: center;
    padding-bottom: 20px;
}
.btn{
    background: none;
    padding: 10px 60px 10px 60px;
    margin: 20px 0px 0px 240px;
    border-radius: 4px;
    background-color: black;
    color: white;
    border-style: solid;
    border-color: black;
    font-weight: bold;
}
.btn:hover{
    background: none;
    padding: 10px 60px 10px 60px;
    margin: 20px 0px 0px 240px;
    border-radius: 4px;
    background-color:white;
    color:black;
    border-style: solid;
    border-color:black;
    font-weight: bold;
    cursor: pointer;

}

   
#pic{
    position: absolute;
    top: 15%;
    left:15%;
}
___________________________________________________________________________


___________________________________________________________________________