Login Form Concept | Enjoy

Kotomi · 01-26-2016, 04:31 AM

I was bored.

Live
http://rawr.pw/.~Designs/.~Login

HTML

Spoiler:Code:
<doctype HTML>
<head>

    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>

<div class="loginbox">

    <div class="loginhead">
    
    <i class="fa fa-lock"></i> Viper Chat
    
    </div>
    <div class="loginboxback">
    <div class="username"><input class="passwordtype" type="username" placeholder="Username"></div>
    
    <div class="password"><input class="passwordtype" type="password" placeholder="Password"></div>
        
</div>
    <div class="loginfoot">
    
    Secure Login <i class="fa fa-arrow-circle-o-right"></i>

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

</doctype>

CSS

Spoiler:Code:
body{
    width:100%;
    background:#141414;
    height:100%;
    margin:0;
}

.loginbox{
    
position:absolute;
     width:800px;
     height:500px;
    font-size:50px;
     z-index:15;
    text-align:center;
     top:55%;
     left:50%;
     margin:-250px 0 0 -400px;
}

.loginhead{
    color:#fff;
    background:#96281B;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width:50%;
    margin:0 auto;
    padding:10px;
}

.username{
    margin-top:15%;
    
}

.passwordtype{
    
    color:#555;
    background:#000;
    border:0;
    height:50px;
    width:70%;
    padding:5px;
    margin-top:5px;
    text-align:center
}
.passwordtype:focus{
    border:3px solid #96281B !important;
    outline:none;
}
::-webkit-input-placeholder{
    color:#555;
    
}

.loginboxback{
    background:#1B1B1B;
    width:53%;
    height:50%;
     top:56%;
     left:50%;
     margin:-25% 0 0 -26.5%;
    position:absolute;
    
}

.loginfoot{
    color:#fff;
    background:#1E824C;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width:50.5%;
    margin:0 auto;
    padding:10px;
    top:66%;
    position:absolute;
    left:23.5%;
    font-size:20px;
}

CSS Mini (not enough css to make a difference but ya..)

Spoiler:Code:
body{width:100%;background:#141414;height:100%;margin:0}.loginbox{position:absolute;width:800px;height:500px;font-size:50px;z-index:15;text-align:center;top:55%;left:50%;margin:-250px 0 0 -400px}.loginhead{color:#fff;background:#96281b;border-top-left-radius:5px;border-top-right-radius:5px;width:50%;margin:0 auto;padding:10px}.username{margin-top:15%}.passwordtype{color:#555;background:#000;border:0;height:50px;width:70%;padding:5px;margin-top:5px;text-align:center}.passwordtype:focus{border:3px solid #96281b!important;outline:none}::-webkit-input-placeholder{color:#555}.loginboxback{background:#1b1b1b;width:53%;height:50%;top:56%;left:50%;margin:-25% 0 0 -26.5%;position:absolute}.loginfoot{color:#fff;background:#1e824c;border-bottom-left-radius:5px;border-bottom-right-radius:5px;width:50.5%;margin:0 auto;padding:10px;top:66%;position:absolute;left:23.5%;font-size:20px}

Login Form Concept \| Enjoy
Author Message