Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
​
  <title>Sleek And Modern Login Page</title>
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
​
<body>
  <div class="connect">
    <div id="section">
      <div class="ic">
        <input type="text" placeholder="Enter Your Email" class="email-input" />
      </div>
​
      <div class="ip">
        <input type="text" placeholder="Enter Your Password" class="password text-input" />
      </div><a class="si button" href="#">SIGN IN</a>
​
      <p class="pass-reset"><a href="#">Forgot Password?</a></p>
      <a class="fb-sign-in" href="http://facebook.com/app"><p>Sign in with Facebook</p></a>
    </div>
  </div>
</body>
</html>
 
body{
background:url("image/bg.png");
margin:100px 0 0;
}
​
.pass-reset a{
font-family: 'Open Sans',Serif;
font-weight: 300;
font-size:14px;
color:#f69589;
text-decoration:none;
}
​
.connect{
display:block;
width:350px;
margin:0 auto;
clear:both;
float:none;
}
​
​
.button {
border: 1px solid #C13827;
box-shadow: 0 1px 1px 0 #D34A39;
display: block;
font-family: 'Open Sans',Serif;
font-size: 16px;
font-weight: 300;
line-height: 50px;
margin: 0 auto;
opacity: 0.6;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 340px;
color:#fff;
text-decoration:none
}
.button:hover {
text-decoration: none;
}
​
#section {
height: 390px;
width:350px
}
.si.button {
background: #d84635;
}
​
.si.button:hover {
background: none repeat scroll 0 0 #222222;
border: 1px solid #111111;
opacity: 10;
}
.fb-sign-in {
background: none repeat scroll 0 0 #F95C48;
border: 1px solid #C13827;
box-shadow: 0 1px 1px 0 #D34A39;
color: #FFFFFF;
display: block;
line-height: 50px;
margin: 0;
opacity: 0.6;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration:none;
font-family:'Open Sans',Serif;
font-weight:300;
}
.fb-sign-in:hover {
background: #1a4e95;
text-decoration: none;
border:1px solid #154688;
}
.fa-facebook:before{
font-family: FontAwesome;
content:"\f09a";
line-height: 20px;
font-size: 12px;
padding: 0 1.5px;
display:inline-block;
color:#fff;
}
.fbb {
border: 2px solid #FFFFFF;
border-radius: 100%;
display: inline-block;
line-height: 20px;
margin: 10px;
padding: 2px 8px;
}
​
input[type="text"] {
font-family: 'Open Sans',Serif;
background: none repeat scroll 0 0 #F95C48;
border: 1px solid #D0402E;
color: #FFFFFF;
height: 50px;
margin-bottom: px;
opacity: 0.6;
padding-left: 45px;
width: 300px;
}
​
.ic{
display:inline-block;
}
.ic:before{
font-family: FontAwesome;
content:"\f003";
line-height: 20px;
display:block;
font-family: FontAwesome;
font-size: 14px;
line-height: 20px;
margin:0px 15px -38px;
}
.ip {
    display: inline-block;
    margin: 20px 0 0;
}
.ip:before{
font-family: FontAwesome;
content:"\f084";
line-height: 20px;
display: block;
font-family: FontAwesome;
font-size: 14px;
line-height: 20px;
margin:0px 15px -38px;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers