HTML CSS Login Form code for free
index.html
1
<html>2
<head>3
<meta charset="UTF-8">4
<meta name="viewport" content="width=device-width, initial-scale=1.0">5
<title>Basic HTML CSS Login Form</title>6
<link rel="stylesheet" href="/css/styles.css">7
</head>8
<body>9
<body>10
<div class="login">11
<div class="login-screen">12
<div class="app-title">13
<h1>Welcome</h1>14
</div>15
16
<div class="login-form">17
<div class="control-group">18
<input type="text" class="login-field" value="" placeholder="username" id="login-name">19
<label class="login-field-icon fui-user" for="login-name"></label>20
</div>21
22
<div class="control-group">23
<input type="password" class="login-field" value="" placeholder="password" id="login-pass">24
<label class="login-field-icon fui-lock" for="login-pass"></label>25
</div>26
27
<a class="btn btn-primary btn-large btn-block" href="#">Login</a>28
<a class="login-link" href="#">Lost your password?</a>29
</div>30
</div>31
</div>32
</body>33
</body>34
</html>styles.css
1
* {2
box-sizing: border-box;3
}4
5
*:focus {6
outline: none;7
}8
body {9
font-family: Arial;10
background-color: #3498DB;11
padding: 50px;12
display: flex;13
justify-content: center;14
align-items: center;15
}16
.login {17
margin: 20px auto;18
width: 300px;19
}20
.login-screen {21
background-color: #FFF;22
padding: 20px;23
border-radius: 10px24
}25
26
.app-title {27
text-align: center;28
color: #777;29
}30
31
.login-form {32
text-align: center;33
}34
.control-group {35
margin-bottom: 10px;36
}37
38
input {39
text-align: center;40
background-color: #ECF0F1;41
border: 2px solid transparent;42
border-radius: 10px;43
font-size: 16px;44
font-weight: 200;45
padding: 10px 0;46
width: 250px;47
transition: border .5s;48
}49
50
input:focus {51
border: 2px solid #3498DB;52
box-shadow: none;53
}54
55
.btn {56
border: 2px solid transparent;57
background: #3498DB;58
color: #ffffff;59
font-size: 16px;60
line-height: 25px;61
padding: 10px 0;62
text-decoration: none;63
text-shadow: none;64
border-radius: 10px;65
box-shadow: none;66
transition: 0.25s;67
display: block;68
width: 250px;69
margin: 0 auto;70
}71
72
.btn:hover {73
background-color: #2980B9;74
}75
76
.login-link {77
font-size: 12px;78
color: #444;79
display: block;80
margin-top: 12px;81
}main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
