generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.6 KiB
132 lines
2.6 KiB
* { box-sizing:border-box; }
|
|
|
|
/* basic stylings ------------------------------------------ */
|
|
body {
|
|
background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg);
|
|
display: flex;
|
|
}
|
|
.container {
|
|
font-family:'Roboto';
|
|
width:600px;
|
|
display:block;
|
|
background: #818181;
|
|
padding:10px 0px 50px;
|
|
margin-top: 45px;
|
|
height: 400px;
|
|
}
|
|
h2 {
|
|
text-align:center;
|
|
text-decoration:overline underline;
|
|
margin-bottom:50px;
|
|
background: lightgray;
|
|
width: 100%;
|
|
}
|
|
h2 small {
|
|
font-weight:normal;
|
|
color:#888;
|
|
display:block;
|
|
}
|
|
.footer { text-align:center; }
|
|
.footer a { color:#53B2C8; }
|
|
|
|
/* form starting stylings ------------------------------- */
|
|
.group {
|
|
position:relative;
|
|
margin-bottom:2px;
|
|
}
|
|
input {
|
|
font-size:18px;
|
|
padding:10px 10px 10px 5px;
|
|
display:block;
|
|
width:300px;
|
|
border:none;
|
|
border-bottom:1px solid #757575;
|
|
}
|
|
input:focus { outline:none; }
|
|
|
|
/* LABEL ======================================= */
|
|
label {
|
|
color:#999;
|
|
font-size:18px;
|
|
font-weight:normal;
|
|
position:relative;
|
|
pointer-events:none;
|
|
left:5px;
|
|
bottom:35px;
|
|
transition:0.2s ease all;
|
|
-moz-transition:0.2s ease all;
|
|
-webkit-transition:0.2s ease all;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ label, input:valid ~ label {
|
|
top:-20px;
|
|
font-size:14px;
|
|
color:#5264AE;
|
|
}
|
|
|
|
/* BOTTOM BARS ================================= */
|
|
.bar { position:relative; display:block; width:300px; }
|
|
.bar:before, .bar:after {
|
|
content:'';
|
|
height:2px;
|
|
width:0;
|
|
bottom:1px;
|
|
background:#5264AE;
|
|
transition:0.2s ease all;
|
|
-moz-transition:0.2s ease all;
|
|
-webkit-transition:0.2s ease all;
|
|
}
|
|
.bar:before {
|
|
left:50%;
|
|
}
|
|
.bar:after {
|
|
right:50%;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ .bar:before, input:focus ~ .bar:after {
|
|
width:50%;
|
|
}
|
|
|
|
/* HIGHLIGHTER ================================== */
|
|
.highlight {
|
|
height:60%;
|
|
width:100px;
|
|
top:25%;
|
|
left:0;
|
|
pointer-events:none;
|
|
opacity:0.5;
|
|
}
|
|
|
|
/* active state */
|
|
input:focus ~ .highlight {
|
|
-webkit-animation:inputHighlighter 0.3s ease;
|
|
-moz-animation:inputHighlighter 0.3s ease;
|
|
animation:inputHighlighter 0.3s ease;
|
|
}
|
|
|
|
/* ANIMATIONS ================ */
|
|
@-webkit-keyframes inputHighlighter {
|
|
from { background:#5264AE; }
|
|
to { width:0; background:transparent; }
|
|
}
|
|
@-moz-keyframes inputHighlighter {
|
|
from { background:#5264AE; }
|
|
to { width:0; background:transparent; }
|
|
}
|
|
@keyframes inputHighlighter {
|
|
from { background:#5264AE; }
|
|
to { width:0; background:transparent; }
|
|
}
|
|
|
|
|
|
.check{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
form{
|
|
margin-left: 20%;
|
|
} |