-
-
Save nikitae/4707536 to your computer and use it in GitHub Desktop.
Untitled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.form-2 { | |
/* Size and position */ | |
width: 500px; | |
margin: 60px auto 30px; | |
padding: 15px; | |
position: relative; | |
color: #7e7975; | |
} | |
.form-2 h1 { | |
font-size: 15px; | |
font-weight: bold; | |
color: #bdb5aa; | |
padding-bottom: 8px; | |
border-bottom: 1px solid #EBE6E2; | |
text-shadow: 0 2px 0 rgba(255,255,255,0.8); | |
box-shadow: 0 1px 0 rgba(255,255,255,0.8); | |
} | |
.form-2 h1 .log-in, | |
.form-2 h1 .sign-up { | |
display: inline-block; | |
text-transform: uppercase; | |
} | |
.form-2 h1 .log-in { | |
color: #6c6763; | |
padding-right: 2px; | |
} | |
.form-2 h1 .sign-up { | |
color: #ffb347; | |
padding-left: 2px; | |
} | |
.form-2 .container { | |
margin-top: 8px;margin-bottom: 10px; | |
} | |
.form-2 .float { | |
width: 49%; | |
float: left; | |
border-top: 1px solid rgba(255,255,255,1); | |
} | |
.form-2 .float:first-of-type { | |
padding-right: 5px; | |
} | |
.form-2 .float:last-of-type { | |
padding-left: 5px; | |
} | |
.form-2 label { | |
display: block; | |
padding: 0 0 5px 2px; | |
cursor: pointer; | |
text-transform: uppercase; | |
font-weight: 400; | |
text-shadow: 0 1px 0 rgba(255,255,255,0.8); | |
font-size: 11px; | |
} | |
.form-2 label i { | |
margin-right: 5px; /* Gap between icon and text */ | |
display: inline-block; | |
width: 10px; | |
} | |
.form-2 input[type=text], | |
.form-2 input[type=password], | |
.form-2 input[type=usernmail] { | |
font-family: 'Lato', Calibri, Arial, sans-serif; | |
font-size: 13px; | |
font-weight: 400; | |
display: block; | |
padding: 5px; | |
margin-bottom: 5px; | |
border: 3px solid #ebe6e2; | |
border-radius: 5px; | |
transition: all 0.3s ease-out; | |
} | |
.form-2 input[type=text], | |
.form-2 input[type=usernmail] { | |
width: 98%; | |
} | |
.form-2 input[type=password]{ | |
width: 100%; | |
} | |
.form-2 input[type=text]:hover, | |
.form-2 input[type=usernmail]:hover, | |
.form-2 input[type=password]:hover { | |
border-color: #CCC; | |
} | |
.form-2 label:hover ~ input { | |
border-color: #CCC; | |
} | |
.form-2 input[type=text]:focus, | |
.form-2 input[type=usernmail]:focus, | |
.form-2 input[type=password]:focus { | |
border-color: #BBB; | |
outline: none; /* Remove Chrome's outline */ | |
} | |
.clearfix:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.form-2 input[type=submit], | |
.form-2 .log-twitter { | |
/* Size and position */ | |
width: 48%; | |
height: 38px; | |
float: left; | |
position: relative; | |
/* Styles */ | |
box-shadow: inset 0 1px rgba(255,255,255,0.3); | |
border-radius: 3px; | |
cursor: pointer; | |
/* Font styles */ | |
font-family: 'Lato', Calibri, Arial, sans-serif; | |
font-size: 14px; | |
line-height: 38px; /* Same as height */ | |
text-align: center; | |
font-weight: bold; | |
} | |
.form-2 input[type=submit] { | |
margin-left: 2%; | |
background: linear-gradient(#fbd568, #ffb347); | |
border: 1px solid #f4ab4c; | |
color: #996319; | |
text-shadow: 0 1px rgba(255,255,255,0.3); | |
} | |
.form-2 .log-twitter { | |
margin-right: 1%; | |
background: linear-gradient(#34a5cf, #2a8ac4); | |
border: 1px solid #2b8bc7; | |
color: #ffffff; | |
text-shadow: 0 -1px rgba(0,0,0,0.3); | |
text-decoration: none; | |
} | |
.form-2 input[type=submit]:hover, | |
.form-2 .log-twitter:hover { | |
box-shadow: | |
inset 0 1px rgba(255,255,255,0.3), | |
inset 0 20px 40px rgba(255,255,255,0.15); | |
} | |
.form-2 input[type=submit]:active, | |
.form-2 .log-twitter:active{ | |
top: 1px; | |
} | |
.no-boxshadow .form-2 input[type=submit]:hover { | |
background: #ffb347; | |
} | |
.no-boxshadow .form-2 .log-twitter:hover { | |
background: #2a8ac4; | |
} | |
.form-2 p:last-of-type { | |
clear: both; | |
} | |
.form-2 .opt { | |
text-align: right; | |
margin-right: 3px; | |
} | |
.form-2 label[for=showPassword] { | |
display: inline-block; | |
margin-bottom: 10px; | |
font-size: 11px; | |
font-weight: 400; | |
text-transform: capitalize; | |
} | |
.form-2 input[type=checkbox] { | |
vertical-align: middle; | |
margin: -1px 5px 0 1px; | |
} | |
$(function(){ | |
$(".showpassword").each(function(index,input) { | |
var $input = $(input); | |
$("<p class='opt'/>").append( | |
$("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() { | |
var change = $(this).is(":checked") ? "text" : "password"; | |
var rep = $("<input placeholder='Password' type='" + change + "' />") | |
.attr("id", $input.attr("id")) | |
.attr("name", $input.attr("name")) | |
.attr('class', $input.attr('class')) | |
.val($input.val()) | |
.insertBefore($input); | |
$input.remove(); | |
$input = rep; | |
}) | |
).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent()); | |
}); | |
}); | |
? | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form class="form-2"> | |
<h1>Registrera dig här</h1> | |
<p class="float"> | |
<label for="login"><i class="icon-user"></i>Förnamn</label> | |
<input type="text" name="login" placeholder="Förnamn"> | |
</p> | |
<p class="float"> | |
<label for="login"><i class="icon-user"></i>Efternamn</label> | |
<input type="text" name="login" placeholder="Efternamn"> | |
</p> | |
<p> | |
<label for="login"><i class="icon-mail"></i>E-Mail</label> | |
<input type="usernmail" name="login" placeholder="E-Mail"> | |
</p> | |
<p> | |
<label for="login"><i class="icon-mail"></i>Användarnamn</label> | |
<input type="usernmail" name="login" placeholder="Användarnamn"> | |
</p> | |
<p class="float"> | |
<label for="password"><i class="icon-lock"></i>Lösenord</label> | |
<input type="password" name="password" placeholder="Password"> | |
</p> | |
<p class="float"> | |
<label for="password"><i class="icon-lock"></i>Upprepa Lösenord</label> | |
<input type="password" name="password" placeholder="Password"> | |
</p> | |
<p class="clearfix"> | |
<a href="#" class="log-twitter">Tillbaka</a> | |
<input type="submit" name="submit" value="Registrera"> | |
</p> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment