Add files via upload
This commit is contained in:
djsplice07
+203
@@ -0,0 +1,203 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
|
||||
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
|
||||
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
|
||||
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
|
||||
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
|
||||
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
|
||||
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
|
||||
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
|
||||
.btn-block { width: 100%; display:block; }
|
||||
|
||||
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
|
||||
|
||||
html { width: 100%; height:100%; }
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #ffffff;
|
||||
a:link { color: cornflowerblue; } /* Unvisited link color */
|
||||
a:visited { color: yellow; } /* Visited link color */
|
||||
a:hover { color: red; } /* Hover color */
|
||||
a:active { color: yellow; } /* Active link color */
|
||||
background: #092756;
|
||||
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
|
||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
|
||||
}
|
||||
.login {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 25%;
|
||||
margin: -150px 0 0 -150px;
|
||||
width:1000px;
|
||||
height:2000px;
|
||||
}
|
||||
.login h1 { color: #fff; text-shadow: 0 0 12px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||
.login h2 { color: cornflowerblue; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||
.login h3 { color: #fff; text-shadow: 0 0 8px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
|
||||
-webkit-transition: box-shadow .5s ease;
|
||||
-moz-transition: box-shadow .5s ease;
|
||||
-o-transition: box-shadow .5s ease;
|
||||
-ms-transition: box-shadow .5s ease;
|
||||
transition: box-shadow .5s ease;
|
||||
}
|
||||
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
|
||||
|
||||
select {
|
||||
|
||||
/* styling */
|
||||
background-color: white;
|
||||
border: thin solid blue;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font: inherit;
|
||||
line-height: 1.5em;
|
||||
padding: 0.5em 3.5em 0.5em 1em;
|
||||
|
||||
/* reset */
|
||||
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
/* arrows */
|
||||
|
||||
select.classic {
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, blue 50%),
|
||||
linear-gradient(135deg, blue 50%, transparent 50%),
|
||||
linear-gradient(to right, skyblue, skyblue);
|
||||
background-position:
|
||||
calc(100% - 20px) calc(1em + 2px),
|
||||
calc(100% - 15px) calc(1em + 2px),
|
||||
100% 0;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
2.5em 2.5em;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select.classic:focus {
|
||||
background-image:
|
||||
linear-gradient(45deg, white 50%, transparent 50%),
|
||||
linear-gradient(135deg, transparent 50%, white 50%),
|
||||
linear-gradient(to right, gray, gray);
|
||||
background-position:
|
||||
calc(100% - 15px) 1em,
|
||||
calc(100% - 20px) 1em,
|
||||
100% 0;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
2.5em 2.5em;
|
||||
background-repeat: no-repeat;
|
||||
border-color: grey;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
select.round {
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, gray 50%),
|
||||
linear-gradient(135deg, gray 50%, transparent 50%),
|
||||
radial-gradient(#ddd 70%, transparent 72%);
|
||||
background-position:
|
||||
calc(100% - 20px) calc(1em + 2px),
|
||||
calc(100% - 15px) calc(1em + 2px),
|
||||
calc(100% - .5em) .5em;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
1.5em 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select.round:focus {
|
||||
background-image:
|
||||
linear-gradient(45deg, white 50%, transparent 50%),
|
||||
linear-gradient(135deg, transparent 50%, white 50%),
|
||||
radial-gradient(gray 70%, transparent 72%);
|
||||
background-position:
|
||||
calc(100% - 15px) 1em,
|
||||
calc(100% - 20px) 1em,
|
||||
calc(100% - .5em) .5em;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
1.5em 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
border-color: green;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
select.minimal {
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, gray 50%),
|
||||
linear-gradient(135deg, gray 50%, transparent 50%),
|
||||
linear-gradient(to right, #ccc, #ccc);
|
||||
background-position:
|
||||
calc(100% - 20px) calc(1em + 2px),
|
||||
calc(100% - 15px) calc(1em + 2px),
|
||||
calc(100% - 2.5em) 0.5em;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
1px 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select.minimal:focus {
|
||||
background-image:
|
||||
linear-gradient(45deg, green 50%, transparent 50%),
|
||||
linear-gradient(135deg, transparent 50%, green 50%),
|
||||
linear-gradient(to right, #ccc, #ccc);
|
||||
background-position:
|
||||
calc(100% - 15px) 1em,
|
||||
calc(100% - 20px) 1em,
|
||||
calc(100% - 2.5em) 0.5em;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
1px 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
border-color: green;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
body{
|
||||
margin:0;
|
||||
color:#6a6f8c;
|
||||
background:#c8c8c8;
|
||||
font:600 16px/18px 'Open Sans',sans-serif;
|
||||
}
|
||||
*,:after,:before{box-sizing:border-box}
|
||||
.clearfix:after,.clearfix:before{content:'';display:table}
|
||||
.clearfix:after{clear:both;display:block}
|
||||
a{color:inherit;text-decoration:none}
|
||||
|
||||
.login-wrap{
|
||||
width:100%;
|
||||
margin:auto;
|
||||
max-width:525px;
|
||||
min-height:670px;
|
||||
position:relative;
|
||||
background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
|
||||
box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
|
||||
}
|
||||
.login-html{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
padding:90px 70px 50px 70px;
|
||||
background:rgba(40,57,101,.9);
|
||||
}
|
||||
.login-html .sign-in-htm,
|
||||
.login-html .sign-up-htm{
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
position:absolute;
|
||||
transform:rotateY(180deg);
|
||||
backface-visibility:hidden;
|
||||
transition:all .4s linear;
|
||||
}
|
||||
.login-html .sign-in,
|
||||
.login-html .sign-up,
|
||||
.login-form .group .check{
|
||||
display:none;
|
||||
}
|
||||
.login-html .tab,
|
||||
.login-form .group .label,
|
||||
.login-form .group .button{
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.login-html .tab{
|
||||
font-size:22px;
|
||||
margin-right:15px;
|
||||
padding-bottom:5px;
|
||||
margin:0 15px 10px 0;
|
||||
display:inline-block;
|
||||
border-bottom:2px solid transparent;
|
||||
}
|
||||
.login-html .sign-in:checked + .tab,
|
||||
.login-html .sign-up:checked + .tab{
|
||||
color:#fff;
|
||||
border-color:#1161ee;
|
||||
}
|
||||
.login-form{
|
||||
min-height:345px;
|
||||
position:relative;
|
||||
perspective:1000px;
|
||||
transform-style:preserve-3d;
|
||||
}
|
||||
.login-form .group{
|
||||
margin-bottom:15px;
|
||||
}
|
||||
.login-form .group .label,
|
||||
.login-form .group .input,
|
||||
.login-form .group .button{
|
||||
width:100%;
|
||||
color:#fff;
|
||||
display:block;
|
||||
}
|
||||
.login-form .group .input,
|
||||
.login-form .group .button{
|
||||
border:none;
|
||||
padding:15px 20px;
|
||||
border-radius:25px;
|
||||
background:rgba(255,255,255,.1);
|
||||
}
|
||||
.login-form .group input[data-type="password"]{
|
||||
text-security:circle;
|
||||
-webkit-text-security:circle;
|
||||
}
|
||||
.login-form .group .label{
|
||||
color:#aaa;
|
||||
font-size:12px;
|
||||
}
|
||||
.login-form .group .button{
|
||||
background:#1161ee;
|
||||
}
|
||||
.login-form .group label .icon{
|
||||
width:15px;
|
||||
height:15px;
|
||||
border-radius:2px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background:rgba(255,255,255,.1);
|
||||
}
|
||||
.login-form .group label .icon:before,
|
||||
.login-form .group label .icon:after{
|
||||
content:'';
|
||||
width:10px;
|
||||
height:2px;
|
||||
background:#fff;
|
||||
position:absolute;
|
||||
transition:all .2s ease-in-out 0s;
|
||||
}
|
||||
.login-form .group label .icon:before{
|
||||
left:3px;
|
||||
width:5px;
|
||||
bottom:6px;
|
||||
transform:scale(0) rotate(0);
|
||||
}
|
||||
.login-form .group label .icon:after{
|
||||
top:6px;
|
||||
right:0;
|
||||
transform:scale(0) rotate(0);
|
||||
}
|
||||
.login-form .group .check:checked + label{
|
||||
color:#fff;
|
||||
}
|
||||
.login-form .group .check:checked + label .icon{
|
||||
background:#1161ee;
|
||||
}
|
||||
.login-form .group .check:checked + label .icon:before{
|
||||
transform:scale(1) rotate(45deg);
|
||||
}
|
||||
.login-form .group .check:checked + label .icon:after{
|
||||
transform:scale(1) rotate(-45deg);
|
||||
}
|
||||
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
|
||||
transform:rotate(0);
|
||||
}
|
||||
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
|
||||
transform:rotate(0);
|
||||
}
|
||||
|
||||
.hr{
|
||||
height:2px;
|
||||
margin:60px 0 50px 0;
|
||||
background:rgba(255,255,255,.2);
|
||||
}
|
||||
.foot-lnk{
|
||||
text-align:center;
|
||||
}
|
||||
Reference in New Issue
Block a user