Ajax Loader
HTML 
<html>
1
<html>
2
<head>
3
4
  <meta charset="utf-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <meta name="description" content="Operative Access" />
8
  <meta name="keywords" content="Login, Flat, Dark, HTML5, CSS3" />
9
  <meta name="author" content="I.Quinn" />
10
  <title>Operative Access</title>
11
12
  <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
13
</head>
14
<body>
15
  <div class="box">
16
    <div class="content">
17
      <h1>Authentication Required</h1>
18
      <input class="field" type="text" name="user" placeholder="Operative ID"><br>
19
      <input class="field" type="password" name="pass" placeholder="Access Code"><br>
20
      <input class="btn" type="submit" value="Validate">
21
    </div>
22
  </div>
23
</body>
24
</html>
 
CSS 
body{
1
body{
2
  background:#161616;
3
  color:#888;
4
  font-family: 'Ubuntu Mono', sans-serif;
5
  text-transform:uppercase;
6
}
7
 
8
.box{
9
  width:90%;
10
  max-width:450px;
11
  height:auto;
12
  margin:0 auto;
13
  margin-top:100px;
14
  background:#222;
15
  border-radius:7px;
16
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.9);
17
}
18
 
19
.content{
20
  width:85%;
21
  height:auto;
22
  position:;
23
  margin:0 auto;
24
  padding:30px 0px;
25
  background:;
26
  text-align:center;
27
}
28
 
29
.content h1{
30
  font-size: 24px;
31
  font-weight:400;
32
  color:#FFBF00;
33
  letter-spacing:0.125em;
34
  text-align:center;
35
}
36
 
37
.field{
38
  width:100%;
39
  margin:10px auto;
40
  padding:10px;
41
  background:#2c2c2c;
42
  border:none;
43
  box-shadow: 0px 1px 0px 0px #111;
44
  border-radius:3px;
45
  outline:none;
46
  color:#FFBF00;
47
  font-weight:700;
48
  letter-spacing:0.125em;
49
  text-align:center;
50
  text-transform:uppercase;
51
}
52
 
53
 
54
::-webkit-input-placeholder{ /* WebKit browsers */
55
  color:#5A5A5A;
56
}
57
:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
58
  color:#5A5A5A;
59
}
60
::-moz-placeholder{ /* Mozilla Firefox 19+ */
61
  color:#5A5A5A;
62
}
63
:-ms-input-placeholder{ /* Internet Explorer 10+ */
64
  color:#5A5A5A;
65
}
66
 
67
 
68
 
69
.btn{
70
  width:100%;
71
  margin:10px auto;
72
  padding:10px;
73
  background:#161616;
74
  border:none;
75
  box-shadow: 0px 1px 0px 0px #111;
76
  border-radius:3px;
77
  outline:none;
78
  color:#FFBF00;
79
  font-weight:700;
80
  letter-spacing:0.125em;
81
  text-align:center;
82
  text-transform:uppercase;
83
}
84
 
85
.btn:hover{
86
  background:#FFBF00;
87
  color:#333;
88
}
89
 
90
.btn:active{
91
  background:#FACC2E;
92
  color:#333;
93
}
 

Operative Access

CSSDeck G+