About Me

Modern Login Form Design In HTML And CSS

wasiii May 05, 2019
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%;
}
___________________________________________________________________________


___________________________________________________________________________
Tags:

Post a Comment

4 Comments