Skip to content

Instantly share code, notes, and snippets.

@aforwark

aforwark/clouds.png

Created April 12, 2012 21:28
Show Gist options
  • Save aforwark/2371100 to your computer and use it in GitHub Desktop.
Save aforwark/2371100 to your computer and use it in GitHub Desktop.
Download ZIP
Connect Login Box
Raw
connect-login.css
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
text-indent: 150%;
overflow: hidden;
white-space: nowrap;
}
.popup-modal {
float: left;
width: 919px;
margin: 0 auto;
*zoom: 1;
-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
border: 1px solid #a2a2a2;
}
.popup-modal:before,
.popup-modal:after {
display: table;
content: "";
}
.popup-modal:after {
clear: both;
}
.popup-modal .connect-sign-in {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border: none;
float: left;
}
.connect-sign-in {
font-family: Helvetica, Arial, sans-serif;
border: 1px solid #a2a2a2;
-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
width: 340px;
min-height: 230px;
position: relative;
*zoom: 1;
}
.connect-sign-in ul {
margin: 0;
padding: 0;
list-style: none;
}
.connect-sign-in:before,
.connect-sign-in:after {
display: table;
content: "";
}
.connect-sign-in:after {
clear: both;
}
.connect-sign-in .pop-arrow {
display: block;
background: url('connect-sprite.png') -82px 0 no-repeat;
width: 28px;
height: 17px;
text-indent: 150%;
overflow: hidden;
white-space: nowrap;
position: absolute;
top: -17px;
left: 75px;
}
.connect-form .signin-with-social {
padding: 20px 10px 10px 10px;
*padding: 10px;
margin: 0 auto;
width: 305px;
}
.connect-form .signin-with-social h2 {
font-size: 12px;
color: #9f9f9f;
font-weight: normal;
margin: 0 0 15px 0;
}
.connect-form .signin-with-social h2 .branding-logo {
display: inline-block;
background: url('connect-sprite.png') 0 0 no-repeat;
width: 81px;
height: 13px;
text-indent: 150%;
overflow: hidden;
white-space: nowrap;
}
.connect-form .signin-with-social .social {
*zoom: 1;
}
.connect-form .signin-with-social .social:before,
.connect-form .signin-with-social .social:after {
display: table;
content: "";
}
.connect-form .signin-with-social .social:after {
clear: both;
}
.connect-form .signin-with-social .social ul li {
margin: 0;
float: left;
display: block;
width: 143px;
height: 28px;
background-image: url('connect-sprite.png');
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
text-indent: 150%;
overflow: hidden;
white-space: nowrap;
}
.connect-form .signin-with-social .social ul li.facebook {
background-position: -111px 0;
margin-right: 10px;
}
.connect-form .signin-with-social .social ul li.twitter {
background-position: -255px 0;
}
.connect-form .signin-with-social .social ul li a {
display: block;
width: 143px;
height: 28px;
}
.connect-form .login-form h3.or_divider {
font-size: 12px;
color: #9e9e9e;
font-weight: normal;
margin: 5px 0 15px 0;
background: #e8e8e8;
border-bottom: 1px solid #dbdbdb;
height: 10px;
*height: 9px;
line-height: 10px;
text-align: center;
width: auto;
display: block;
}
.connect-form .login-form h3.or_divider span {
display: inline;
background: #fff;
width: auto;
padding: 0 5px;
}
.connect-form .login-form .input {
width: 239px;
margin: 10px auto 0;
position: relative;
}
.connect-form .login-form .input .label label {
position: absolute;
top: 5px;
left: 5px;
z-index: 11;
font-size: 12px;
font-weight: normal;
color: #939393;
}
.connect-form .login-form .input .field {
position: relative;
z-index: 10;
width: 239px;
height: 23px;
border: 1px solid #e8e8e8;
display: block;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #f8f8f8, #ffffff);
background-image: -ms-linear-gradient(top, #f8f8f8, #ffffff);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#ffffff));
background-image: -webkit-linear-gradient(top, #f8f8f8, #ffffff);
background-image: -o-linear-gradient(top, #f8f8f8, #ffffff);
background-image: linear-gradient(top, #f8f8f8, #ffffff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#ffffff', GradientType=0);
}
.connect-form .login-form .input .field input {
border: none;
background: none transparent;
width: 227px;
height: 23px;
line-height: 23px;
padding: 0 5px;
position: relative;
z-index: 12;
}
.connect-form .login-form .input .field input:focus {
background: white;
outline: none;
}
.connect-form .login-form .input-focused .label label,
.connect-form .login-form .input-has-value .label label {
display: none;
}
.connect-form .login-form .form-bottom {
width: 265px;
margin: 10px auto 0;
*zoom: 1;
}
.connect-form .login-form .form-bottom:before,
.connect-form .login-form .form-bottom:after {
display: table;
content: "";
}
.connect-form .login-form .form-bottom:after {
clear: both;
}
.connect-form .login-form .form-bottom .user-links {
float: left;
display: block;
width: 175px;
vertical-align: top;
}
.connect-form .login-form .form-bottom .user-links p {
color: #afafaf;
font-size: 12px;
line-height: 16px;
font-weight: normal;
margin: 0;
}
.connect-form .login-form .form-bottom .user-links p a {
color: #afafaf;
font-size: 12px;
text-decoration: none;
}
.connect-form .login-form .form-bottom button {
background-color: #e8623a;
background-image: -moz-linear-gradient(top, #f46c46, #d55228);
background-image: -ms-linear-gradient(top, #f46c46, #d55228);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f46c46), to(#d55228));
background-image: -webkit-linear-gradient(top, #f46c46, #d55228);
background-image: -o-linear-gradient(top, #f46c46, #d55228);
background-image: linear-gradient(top, #f46c46, #d55228);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f46c46', endColorstr='#d55228', GradientType=0);
border: 1px solid #c15030;
float: right;
display: block;
color: #FFF;
font-size: 13px;
width: 70px;
height: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
text-align: center;
*zoom: 1;
}
.connect-form .login-form .form-bottom button:before,
.connect-form .login-form .form-bottom button:after {
display: table;
content: "";
}
.connect-form .login-form .form-bottom button:after {
clear: both;
}
.connect-form .login-form .form-bottom button:hover {
background-color: #e15c34;
background-image: -moz-linear-gradient(top, #d55228, #f46c46);
background-image: -ms-linear-gradient(top, #d55228, #f46c46);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d55228), to(#f46c46));
background-image: -webkit-linear-gradient(top, #d55228, #f46c46);
background-image: -o-linear-gradient(top, #d55228, #f46c46);
background-image: linear-gradient(top, #d55228, #f46c46);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d55228', endColorstr='#f46c46', GradientType=0);
}
.non-member {
font-family: Helvetica, Arial, sans-serif;
background-color: #3d92a8;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#71b7ca), to(#3d92a8));
background-image: -webkit-radial-gradient(circle, #71b7ca, #3d92a8);
background-image: -moz-radial-gradient(circle, #71b7ca, #3d92a8);
background-image: -ms-radial-gradient(circle, #71b7ca, #3d92a8);
background-image: -o-radial-gradient(circle, #71b7ca, #3d92a8);
background-repeat: no-repeat;
width: 575px;
min-height: 239px;
float: left;
}
.non-member .bg {
background: url('clouds.png') top right no-repeat;
width: 575px;
}
.non-member .hd {
padding: 45px 25px 25px 25px;
}
.non-member .hd h1 {
margin: 0;
padding: 0;
font-size: 24px;
color: #fffd98;
font-weight: normal;
}
.non-member .hd h2 {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: normal;
color: #FFF;
}
.non-member .bd ul {
margin: 0;
padding: 0;
list-style: none;
}
.non-member .bd ul li {
float: left;
width: 125px;
height: 100px;
padding: 0 15px;
border-left: 1px solid #9dcdda;
text-align: left;
color: #FFF;
}
.non-member .bd ul li:first-child {
border-left: none;
padding: 0 15px 0 25px;
}
.non-member .bd ul li .number {
font-size: 42px;
font-weight: normal;
line-height: 42px;
display: block;
}
.non-member .bd ul li p {
font-size: 13px;
font-weight: normal;
margin: 0;
}
.non-member .bd ul li.sign-up {
text-align: center;
width: 70px;
height: 30px;
border-left: none;
margin: 45px 0 0 0;
padding: 0;
}
.non-member .bd ul li.sign-up a {
display: block;
background-color: #e8623a;
background-image: -moz-linear-gradient(top, #f46c46, #d55228);
background-image: -ms-linear-gradient(top, #f46c46, #d55228);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f46c46), to(#d55228));
background-image: -webkit-linear-gradient(top, #f46c46, #d55228);
background-image: -o-linear-gradient(top, #f46c46, #d55228);
background-image: linear-gradient(top, #f46c46, #d55228);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f46c46', endColorstr='#d55228', GradientType=0);
border: 1px solid #c15030;
color: #FFF;
font-size: 13px;
width: 70px;
height: 30px;
line-height: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
.non-member .bd ul li.sign-up a:hover {
background-color: #e15c34;
background-image: -moz-linear-gradient(top, #d55228, #f46c46);
background-image: -ms-linear-gradient(top, #d55228, #f46c46);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d55228), to(#f46c46));
background-image: -webkit-linear-gradient(top, #d55228, #f46c46);
background-image: -o-linear-gradient(top, #d55228, #f46c46);
background-image: linear-gradient(top, #d55228, #f46c46);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d55228', endColorstr='#f46c46', GradientType=0);
}
Raw
connect-login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Connect Login</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="connect-login.css" type="text/css" rel="stylesheet" />
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'event', 'event-focus', 'event-delegate', function (Y) {
var inputs = Y.all('.input'),
fields = Y.all('.input .field input');
function onFocus(e) {
focus(e.target.ancestor('.input'));
};
function focus(el) {
el.addClass('input-focused');
}
function onBlur(e) {
syncUI(e.target);
}
function syncUI(el) {
el.ancestor('.input').toggleClass(
'input-has-value',
el.get('value').length > 0
);
unfocusAll();
}
function unfocusAll() {
inputs.removeClass('input-focused');
}
// sync the initial field values (maybe some have initial values?)
fields.each(syncUI);
fields.on('focus', onFocus);
fields.on('blur', onBlur);
});
</script>
</head>
<body style="margin: 20px;">
<div id="connect-header" class="connect-sign-in" style="visibility: visible; ">
<span class="pop-arrow">arrow</span>
<ul id="yui_3_5_0_4_1334265351753_220">
<li id="yui_3_5_0_4_1334265351753_219">
<div id="connect-overlay" class="yui-module yui-overlay yui-button-menu yui-menu-button-menuundefined connect-form" style="z-index: 12001; visibility: visible; ">
<section id="login-inline">
<article class="signin-with-social">
<h2>Login with your <span class="branding-logo">SheKnows</span> Account</h2>
<div class="social social-big">
<ul>
<li class="facebook"><a href="http://connect.sheknows.com/login?client_id=943c0d37aa95a912b994f26bf2c05b9427856496&amp;x_provider=facebook" data-provider="facebook">facebook</a></li>
<li class="twitter"><a href="http://connect.sheknows.com/login?client_id=943c0d37aa95a912b994f26bf2c05b9427856496&amp;x_provider=twitter" data-provider="twitter">twitter</a></li>
</ul>
</div>
</article>
<article class="login-form">
<h3 class="or_divider">
<span>OR</span>
</h3>
<div id="login-errors"></div>
<form method="post" action="/connect/users/login">
<fieldset style="display:none;"><input type="hidden" name="_method" value="POST"></fieldset>
<input type="hidden" name="redirect_uri" value="">
<div class="input text">
<span class="label"><label for="UserEmail">enter your email address</label></span>
<span class="field"><input name="data[User][email]" type="text" maxlength="200" value="" id="UserEmail"></span>
</div>
<div class="input password">
<span class="label"><label for="UserPassword">enter your password</label></span>
<span class="field"><input type="password" name="data[User][password]" value="" id="UserPassword"></span>
</div>
<div class="form-bottom">
<div class="user-links">
<p><a href="/connect/users/password" rel="nofollow">forgot your password?</a> | <a href="/connect/users/register" rel="nofollow">sign up</a></p>
</div>
<button type="submit">Login</button>
</div>
</form>
</article>
</section>
</div>
</li>
</ul>
</div>
</body>
</html>
Raw
connect-login.less
// Mixins
.css-gradient-vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.css-gradient-radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
.box-shadow (@shadow:1px 1px 3px rgba(0,0,0,0.5)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
-o-box-shadow: @shadow;
box-shadow: @shadow;
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
.hide-text { text-indent:150%; overflow:hidden; white-space:nowrap; }
.popup-modal {
float:left;
width:919px;
margin:0 auto;
.clearfix;
.box-shadow(0px 0px 7px rgba(0,0,0,0.4));
border:1px solid #a2a2a2;
.connect-sign-in { .box-shadow(none); border:none; float:left; }
}
.connect-sign-in {
font-family:Helvetica, Arial, sans-serif;
border:1px solid #a2a2a2;
.box-shadow(0px 0px 7px rgba(0,0,0,0.4));
ul { margin:0; padding:0; list-style:none; }
width:340px;
min-height:230px;
position:relative;
.clearfix;
.pop-arrow {
display:block;
background:url('connect-sprite.png') -82px 0 no-repeat;
width:28px;
height:17px;
.hide-text;
position:absolute;
top:-17px;
left:75px;
}
}
.connect-form {
.signin-with-social {
padding:20px 10px 10px 10px;
*padding:10px;
margin:0 auto;
width:305px;
h2 {
font-size:12px;
color:#9f9f9f;
font-weight:normal;
margin:0 0 15px 0;
.branding-logo {
display:inline-block;
background:url('connect-sprite.png') 0 0 no-repeat;
width:81px;
height:13px;
.hide-text;
}
}
.social {
.clearfix;
ul li {
margin:0;
float:left;
display:block;
width:143px;
height:28px;
background-image:url('connect-sprite.png');
background-repeat:no-repeat;
.box-shadow(0px 0px 5px rgba(0,0,0,0.2));
.hide-text;
&.facebook { background-position:-111px 0; margin-right:10px; }
&.twitter { background-position:-255px 0; }
a {
display:block;
width:143px;
height:28px;
}
}
}
}
.login-form {
h3.or_divider {
font-size:12px;
color:#9e9e9e;
font-weight:normal;
margin:5px 0 15px 0;
background:#e8e8e8;
border-bottom:1px solid #dbdbdb;
height:10px;
*height:9px;
line-height:10px;
text-align:center;
width:auto;
display:block;
span { display:inline; background:#fff; width:auto; padding:0 5px; }
}
.input {
width:239px;
margin:10px auto 0;
position:relative;
.label label {
position:absolute;
top:5px;
left:5px;
z-index: 11;
font-size:12px;
font-weight:normal;
color:#939393;
}
.field {
position:relative;
z-index: 10;
width:239px;
height:23px;
border:1px solid #e8e8e8;
display:block;
.css-gradient-vertical(#f8f8f8, #FFFFFF);
input {
border:none;
background:none transparent;
width:227px;
height:23px;
line-height:23px;
padding:0 5px;
position:relative;
z-index: 12;
&:focus { background:white; outline:none; }
}
}
}
.input-focused .label label,
.input-has-value .label label { display:none; }
.form-bottom {
width:265px;
margin:10px auto 0;
.clearfix;
.user-links {
float:left;
display:block;
width:175px;
vertical-align:top;
p {
color:#afafaf;
font-size:12px;
line-height:16px;
font-weight:normal;
margin:0;
a {
color:#afafaf;
font-size:12px;
text-decoration:none;
}
}
}
button {
.css-gradient-vertical(#f46c46, #d55228);
border:1px solid #c15030;
float:right;
display:block;
color:#FFF;
font-size:13px;
width:70px;
height:30px;
.border-radius(5px);
cursor:pointer;
text-align:center;
.clearfix;
&:hover { .css-gradient-vertical(#d55228, #f46c46); }
}
}
}
}
// Styles for the left not a member sign up box
.non-member {
font-family:Helvetica, Arial, sans-serif;
.css-gradient-radial(#71b7ca, #3d92a8);
width:575px;
min-height:239px;
float:left;
.bg { background:url('clouds.png') top right no-repeat; width:575px; }
.hd {
padding:45px 25px 25px 25px;
h1 {
margin:0;
padding:0;
font-size:24px;
color:#fffd98;
font-weight:normal;
}
h2 {
margin:0;
padding:0;
font-size:14px;
font-weight:normal;
color:#FFF;
}
}
.bd {
ul { margin:0; padding:0; list-style:none; }
ul li {
float:left;
width:125px;
height:100px;
padding:0 15px;
border-left:1px solid #9dcdda;
text-align:left;
color:#FFF;
&:first-child { border-left:none; padding:0 15px 0 25px; }
.number {
font-size:42px;
font-weight:normal;
line-height:42px;
display:block;
}
p {
font-size:13px;
font-weight:normal;
margin:0;
}
}
ul li.sign-up {
text-align:center;
width:70px;
height:30px;
border-left:none;
margin:45px 0 0 0;
padding:0;
a {
display:block;
.css-gradient-vertical(#f46c46, #d55228);
border:1px solid #c15030;
color:#FFF;
font-size:13px;
width:70px;
height:30px;
line-height:30px;
.border-radius(5px);
text-decoration:none;
&:hover { .css-gradient-vertical(#d55228, #f46c46); }
}
}
}
}
Raw
popup-modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Connect Login</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="connect-login.css" type="text/css" rel="stylesheet" />
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'event', 'event-focus', 'event-delegate', function (Y) {
var inputs = Y.all('.input'),
fields = Y.all('.input .field input');
function onFocus(e) {
focus(e.target.ancestor('.input'));
};
function focus(el) {
el.addClass('input-focused');
}
function onBlur(e) {
syncUI(e.target);
}
function syncUI(el) {
el.ancestor('.input').toggleClass(
'input-has-value',
el.get('value').length > 0
);
unfocusAll();
}
function unfocusAll() {
inputs.removeClass('input-focused');
}
// sync the initial field values (maybe some have initial values?)
fields.each(syncUI);
fields.on('focus', onFocus);
fields.on('blur', onBlur);
});
</script>
</head>
<body>
<div class="popup-modal">
<div id="sign-up" class="non-member">
<div class="bg">
<div class="hd">
<h1>Not a Member? Sign up.</h1>
<h2>Need a reason? Here's three.</h2>
</div>
<div class="bd">
<ul>
<li>
<span class="number">1</span>
<p>Share comments and engage with other parents</p>
</li>
<li>
<span class="number">2</span>
<p>View content tailored to your personal interests</p>
</li>
<li>
<span class="number">3</span>
<p>Follow your favorite allParenting authors</p>
</li>
<li class="sign-up"><a href="#">Sign Up</a></li>
</ul>
</div>
</div>
</div>
<div id="connect-header" class="connect-sign-in" style="visibility: visible; ">
<ul id="yui_3_5_0_4_1334265351753_220">
<li id="yui_3_5_0_4_1334265351753_219">
<div id="connect-overlay" class="yui-module yui-overlay yui-button-menu yui-menu-button-menuundefined connect-form" style="z-index: 12001; visibility: visible; ">
<section id="login-inline">
<article class="signin-with-social">
<h2>Login with your <span class="branding-logo">SheKnows</span> Account</h2>
<div class="social social-big">
<ul>
<li class="facebook"><a href="http://connect.sheknows.com/login?client_id=943c0d37aa95a912b994f26bf2c05b9427856496&amp;x_provider=facebook" data-provider="facebook">facebook</a></li>
<li class="twitter"><a href="http://connect.sheknows.com/login?client_id=943c0d37aa95a912b994f26bf2c05b9427856496&amp;x_provider=twitter" data-provider="twitter">twitter</a></li>
</ul>
</div>
</article>
<article class="login-form">
<h3 class="or_divider">
<span>OR</span>
</h3>
<div id="login-errors"></div>
<form method="post" action="/connect/users/login">
<fieldset style="display:none;"><input type="hidden" name="_method" value="POST"></fieldset>
<input type="hidden" name="redirect_uri" value="">
<div class="input text">
<span class="label"><label for="UserEmail">enter your email address</label></span>
<span class="field"><input name="data[User][email]" type="text" maxlength="200" value="" id="UserEmail"></span>
</div>
<div class="input password">
<span class="label"><label for="UserPassword">enter your password</label></span>
<span class="field"><input type="password" name="data[User][password]" value="" id="UserPassword"></span>
</div>
<div class="form-bottom">
<div class="user-links">
<p><a href="/connect/users/password" rel="nofollow">forgot your password?</a> | <a href="/connect/users/register" rel="nofollow">sign up</a></p>
</div>
<button type="submit">Login</button>
</div>
</form>
</article>
</section>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment