About Me

Beautiful Login Form Template Design By Me

wasiii May 09, 2019
I hope you like this template design by me in HTML and CSS.





HTML

________________________________________________________________________
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="wasiii"/>
        <title>Login Design</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
              <h1>Sign In</h1>

            </div>
            <div class="box3">
                <input type="text" class="container1" placeholder="username"/>
                <input type="password" class="container2" placeholder="password"/>
                <br/>
                <h6><a href="" target="_blank">Forgot <span class="pas">Username/Password?</a></span></h6>
                <input type="submit" class="submit" value="sign in "/>
            </div>
            <h5 class="txt"><a  >Don't have an account?</a></h5>
            <h5 class="txt2"></p><a href="" target="_blank" class="lin">Sign up now</a></h5>

        </div>
    </body>
</html>

CSS

_________________________________________________________________________
body{
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
.box1{
    background-color: white;
    border-style: solid;
    border-width: 2px;
    border-color:whitesmoke;
    height: 500px;
    width: 400px;
    position: absolute;
    top: 8%;
    left: 35%;
    border-radius: 20px;


}
.box2{
    margin: 0px;
    background-color: rgb(87,184,71);
    height: 120px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}
h1{
    color: white;
    padding-top: 42px;
    margin: 0;
    text-align: center;
    font-size: 25px;
}
.container1{
    border-style: solid;
    border-radius: 20px;
    background-color: whitesmoke;
    border-color:white;
    color:black;
    padding:10px 140px 10px 20px;
    display: block;
    margin-bottom: 10px;
}
.container2{
    border-style: solid;
    border-radius: 20px;
    background-color: whitesmoke;
    border-color: white;
    color:black;
    padding:10px 140px 10px 20px;
    display: block;
}
.box3{
    padding:30px 0px 0px 40px;

}
.submit{
    text-transform: uppercase;
    border-style: solid;
    border-radius: 25px;
    background-color:rgb(87,184,71);
    border-color: white;
    color:white;
    padding:11px 117px 11px 117px;
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;

}
.pas{
    color: rgb(87,184,71);
 
}
h6{
    float: right;
    padding: 0px 60px 0px 0px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: whitesmoke;
    margin-top: 0px;
}
a{
    color:rgb(199,206,212);
    cursor: pointer;
    text-decoration: none;

}
.txt{
 
    padding:40px 0px 0px 0;
    text-align: center;
    font-weight: 600;
}
.txt2{
    margin-top: -15px;
   text-align: center;
   font-weight: 600;
   font-weight: bold;

 
   text-transform: uppercase;
}
.lin{
    color:rgb(87,184,71);
}
______________________________________________________________________




Tags:

Post a Comment

1 Comments