Skip to content

Instantly share code, notes, and snippets.

@midoghranek

midoghranek/Responsive-login-page-template.markdown

Created October 31, 2013 23:38
Show Gist options
  • Save midoghranek/7258958 to your computer and use it in GitHub Desktop.
Save midoghranek/7258958 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Muhamed.
Raw
index.html
<html>
<head>
<title>Responsive Sign up Form</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
</head>
<body>
<div class="signform">
<div class="left">
<div class="bts">
<a href="#" class="fblogin"><i class="fa fa-facebook"></i><span>Sign in with facebook</span></a>
<a href="#" class="gplogin"><i class="fa fa-google-plus"></i><span>Sign in with Google</span></a>
<a href="#" class="twlogin"><i class="fa fa-twitter"></i><span>Sign in with twitter</span></a>
</div>
</div>
<div class="right">
<div class="headit">
<h>login here or </h><a href="#">sign up now</a>
</div>
<form>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<input class="subbt" type="submit" value="login" />
</form>
<a href="#">Forgot your password?</a>
</div>
</div>
<a class="copyright" target="_blank" href="https://www.facebook.com/midoghranek"><i class="fa fa-check-square"></i> Desgined by Mido Ghranek</a>
</body>
</html>
Raw
Responsive-login-page-template.markdown
Raw
script.js
/*
without javascipt
*/
Raw
style.css
body { background-color: #F7F7F7 ; }
a.copyright {
font-family: 'Stint Ultra Condensed', cursive;
font-size: 1.5em;
text-decoration: none;
color: #FFF;
background: #08C;
padding: 1%;
position: absolute;
top: 0px;
left:0px;
}
.signform {
background-color: #FFF;
border-left: 15px solid #08C;
position: absolute;
top: 20%;
padding-bottom: 40px;
padding-top: 35px;
}
.bts {
padding-bottom: 10px;
padding-top: 10px;
}
.bts span {
text-align: center;
margin-left: 15%;
font-size: .9em;
font-family: 'Arimo', sans-serif;
font-weight: 700;
font-style: italic;
}
.fblogin {
margin-top: 12px;
background-color:#3b5898;
-webkit-border-top-left-radius:1px;
-moz-border-radius-topleft:1px;
border-top-left-radius:1px;
-webkit-border-top-right-radius:1px;
-moz-border-radius-topright:1px;
border-top-right-radius:1px;
-webkit-border-bottom-right-radius:1px;
-moz-border-radius-bottomright:1px;
border-bottom-right-radius:1px;
-webkit-border-bottom-left-radius:1px;
-moz-border-radius-bottomleft:1px;
border-bottom-left-radius:1px;
text-indent:0;
display:block;
color:#ffffff;
height:50px;
line-height:50px;
width: 85%;
text-decoration:none;
text-align:center;
}.fblogin:hover {
background-color:#5177c2;
}.fblogin:active {
position:relative;
top:1px;
}
.gplogin {
margin-top: 12px;
background-color:#dd4c39;
-webkit-border-top-left-radius:1px;
-moz-border-radius-topleft:1px;
border-top-left-radius:1px;
-webkit-border-top-right-radius:1px;
-moz-border-radius-topright:1px;
border-top-right-radius:1px;
-webkit-border-bottom-right-radius:1px;
-moz-border-radius-bottomright:1px;
border-bottom-right-radius:1px;
-webkit-border-bottom-left-radius:1px;
-moz-border-radius-bottomleft:1px;
border-bottom-left-radius:1px;
text-indent:0;
display:block;
color:#ffffff;
height:50px;
line-height:50px;
width: 85%;
text-decoration:none;
text-align:center;
}.gplogin:hover {
background-color:#f06e60;
}.gplogin:active {
position:relative;
top:1px;
}
.twlogin {
margin-top: 12px;
background-color:#00abee;
-webkit-border-top-left-radius:1px;
-moz-border-radius-topleft:1px;
border-top-left-radius:1px;
-webkit-border-top-right-radius:1px;
-moz-border-radius-topright:1px;
border-top-right-radius:1px;
-webkit-border-bottom-right-radius:1px;
-moz-border-radius-bottomright:1px;
border-bottom-right-radius:1px;
-webkit-border-bottom-left-radius:1px;
-moz-border-radius-bottomleft:1px;
border-bottom-left-radius:1px;
text-indent:0;
display:block;
color:#ffffff;
height:50px;
line-height:50px;
width: 85%;
text-decoration:none;
text-align:center;
}.twlogin:hover {
background-color:#4cbde6;
}.twlogin:active {
position:relative;
top:1px;
}
.input-group-addon {
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
text-align: center;
background-color: #08C;
color:#fff;
border: 1px solid #08C;
}
.form-control {
font-family: 'Arimo', sans-serif;
font-weight: 400;
font-style: normal;
width: 150px;
display: table-cell;
height: 20px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #FFF;
border: 1px solid #08C;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-addon:first-child {
border-right: 0;
}
.margin-bottom-sm {
margin-bottom: 5px !important;
}
.input-group {
position: relative;
display: table ;
border-collapse: separate;
}
.subbt {
background-color: #08C;
border: none;
color: #FFF;
padding: 10px 15px 10px 15px;
margin-top: 10px;
cursor: pointer;
font-size: .9em;
border-radius: 5px;
width: 218px;
font-family: 'Arimo', sans-serif;
font-weight: 700;
font-style: normal;
}
.right a {
position: relative;
color: #08c;
text-decoration: none;
font-family: 'Arimo', sans-serif;
font-weight: 400;
font-style: normal;
font-size: .9em;
}
.right h {
position: relative;
color: #111;
text-decoration: none;
font-family: 'Arimo', sans-serif;
font-weight: 400;
font-style: normal;
font-size: .9em;
}
.headit {
position: relative;
top: -10px;
}
.fa.fa-check-square {
padding-right: 19px;
}
@media screen and (min-width: 1400px) {
.signform { width: 680px; left: 25%; }
}
@media screen and (max-width: 1400px) and (min-width: 1230px) {
.signform { width: 50%; left: 25%; }
}
@media screen and (max-width: 1230px) and (min-width: 1000px) {
.signform { width: 60%; left: 15%; }
}
@media screen and (max-width: 1000px) and (min-width: 900px) {
.signform { width: 70%; left: 10%; }
}
@media screen and (max-width: 900px) and (min-width: 750px) {
.signform { width: 80%; left: 8%; }
}
@media screen and (max-width: 750px) and (min-width: 640px) {
.signform { width: 90%; left: 1%; }
}
@media screen and (min-width: 640px) {
.left {
border-right: 1px solid #DDD;
width: 47%;
display: inline-table;
margin-left: 20px;
}
.right {
width: 40%;
display: inline-table;
margin-left: 50px;
}
}
@media screen and (max-width: 640px) {
.left {
border-right: 0px solid #DDD;
width: 100%;
display: inline-table;
margin-left: 20px;
margin-bottom: 25px;
}
.right {
width: 100%;
display: inline-table;
margin-left: 20px;
}
.signform { width: 50%; min-width:255px; }
}
@media screen and (max-width: 640px) and (min-width: 460px) {
.signform { left: 25%; }
}
@media screen and (max-width: 460px) and (min-width: 400px) {
.signform { left: 20%; }
}
@media screen and (max-width: 400px) and (min-width: 320px) {
.signform { left: 10%; }
}
@media screen and (max-width: 320px) {
.signform { left: 1%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment