Amazing Login/Register page code for your website for free
Preview
index.html
1
<div class="form-container" id="loginContainer">2
<h2 style="color: rgb(10, 10, 224);">Login</h2>3
<form id="loginForm">4
<select id="BRANCH" name="BRANCH" required>5
<option value="Head Office">Head Office</option>6
<option value="Bakakyir">Bakakyir</option>7
<option value="Kojokrom">Kojokrom</option>8
<option value="Anaji-K">Anaji-K</option>9
<option value="Type C">Type C</option>10
<option value="Vol Mgt">Vol Mgt</option>11
<option value="Agona">Agona</option>12
<option value="Axim">Axim</option>13
<option value="Esiama">Esiama</option>14
<option value="Elubo">Elubo</option>15
<option value="Half Assini">Half Assini</option>16
</select>17
<input type="text" id="username" placeholder="Email or Username" required>18
<input type="password" id="password" placeholder="Password" required>19
<button type="button" onclick="login()">20
<span></span>21
<span></span>22
<span></span>23
<span></span>24
Login25
</button>26
</form>27
<div class="register-link">28
<p>Don't have an account? <a href="#" onclick="showRegistrationForm()">Register</a></p>29
</div>30
</div>31
32
<div class="form-container" id="registrationContainer" style="display: none;">33
<h2 style="color: rgb(21, 21, 220);">Register</h2>34
<form id="registrationForm" action="" method="POST">35
<select id="BRANCH" name="BRANCH" required>36
<option value="Head Office">Head Office</option>37
<option value="Bakakyir">Bakakyir</option>38
<option value="Kojokrom">Kojokrom</option>39
<option value="Anaji-K">Anaji-K</option>40
<option value="Type C">Type C</option>41
<option value="Vol Mgt">Vol Mgt</option>42
<option value="Agona">Agona</option>43
<option value="Axim">Axim</option>44
<option value="Esiama">Esiama</option>45
<option value="Elubo">Elubo</option>46
<option value="Half Assini">Half Assini</option>47
</select>48
<input type="text" name="AgentName" placeholder="Agent Name" required>49
<select name="position" required>50
<option value="" disabled selected>Select Position</option>51
<option value="Branch Head">Branch Head</option>52
<option value="DSR">DSR</option>53
<option value="Customer">Customer Service</option>54
</select>55
<input type="text" name="Username" placeholder="Username" required>56
<input type="email" name="Email" placeholder="Email" required>57
<input type="password" name="Password" placeholder="Password" required>58
<button type="submit">Register</button>59
<div class="register-link">60
<p>Already have an account? <a href="#" onclick="showLogin()">Login</a></p>61
</div>62
</form>63
</div>styles.css
1
body {2
margin: 0;3
padding: 0;4
font-family: sans-serif;5
background: linear-gradient(#d0e25b, #7a6df3);6
display: flex;7
align-items: center;8
justify-content: center;9
height: 80vh;10
}11
12
.form-container {13
position: relative;14
top: 50%;15
background: rgba(230, 227, 239, 0.5);16
box-sizing: border-box;17
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);18
border-radius: 10px;19
width: 300px;20
padding: 20px;21
transform: translate(0, -50%);22
text-align: center;23
}24
25
.form-container h2 {26
margin: 0 0 30px;27
padding: 0;28
color: #12023c;29
text-align: center;30
}31
32
input,33
select {34
width: 100%;35
padding: 10px 0;36
font-size: 16px;37
color: #010f12;38
margin-bottom: 10px;39
border: none;40
border-bottom: 3px solid #130303;41
outline: none;42
background: transparent;43
}44
45
select {46
margin-top: 10px;47
}48
49
button {50
position: relative51
background-color: #5820d9;52
color: blue;53
padding: 10px;54
border: none;55
border-radius: 4px;56
cursor: pointer;57
width: 100%;58
margin-top: 20px;59
overflow: hidden;60
letter-spacing: 4px;61
}62
63
button:hover {64
background: #03bcf4;65
}66
67
button span {68
position: absolute;69
display: block;70
}71
72
button span:nth-child(1) {73
top: 0;74
left: -100%;75
width: 100%;76
height: 2px;77
background: linear-gradient(90deg, transparent, #f403c8);78
animation: btn-anim1 1s linear infinite;79
}80
81
@keyframes btn-anim1 {82
0% {83
left: -100%;84
}85
50%, 100% {86
left: 100%;87
}88
}89
90
button span:nth-child(2) {91
top: -100%;92
right: 0;93
width: 2px;94
height: 100%;95
background: linear-gradient(180deg, transparent, #03f4bc);96
animation: btn-anim2 1s linear infinite;97
animation-delay: .25s;98
}99
100
@keyframes btn-anim2 {101
0% {102
top: -100%;103
}104
50%, 100% {105
top: 100%;106
}107
}108
109
button span:nth-child(3) {110
bottom: 0;111
right: -100%;112
width: 100%;113
height: 2px;114
background: linear-gradient(270deg, transparent, #03f41f);115
animation: btn-anim3 1s linear infinite;116
animation-delay: .5s;117
}118
119
@keyframes btn-anim3 {120
0% {121
right: -100%;122
}123
50%, 100% {124
right: 100%;125
}126
}127
128
button span:nth-child(4) {129
bottom: -100%;130
left: 0;131
width: 2px;132
height: 100%;133
background: linear-gradient(360deg, transparent, #f48803);134
animation: btn-anim4 1s linear infinite;135
animation-delay: .75s;136
}137
138
@keyframes btn-anim4 {139
0% {140
bottom: -100%;141
}142
50%, 100% {143
bottom: 100%;144
}145
}146
147
.register-link {148
margin-top: 10px;149
color: #0d0d0d;150
}151
152
.register-link a {153
color: #2207ec;154
text-decoration: none;155
}156
157
.register-link a:hover {158
color: #f30397;159
}main.js
1
function login() {2
// Your login logic here (replace with actual implementation)3
var branch = document.getElementById("BRANCH").value.toLowerCase();4
var username = document.getElementById("username").value.toLowerCase();5
var password = document.getElementById("password").value;6
7
// Sample user data for the given usernames and passwords8
var users = [9
{ branch: branch, username: "", password: "Kantanka&1" },10
{ branch: branch, username: "", password: "Kantanka&13" },11
{ branch: branch, username: "", password: "Kantanka&22" },12
{ branch: branch, username: "", password: "Kantanka&28" },13
{ branch: branch, username: "", password: "Kantanka&20" },14
{ branch: branch, username: "", password: "Kantanka&21" },15
{ branch: branch, username: "", password: "Kantanka&24" },16
{ branch: branch, username: "", password: "Kantanka&27" },17
{ branch: branch, username: "", password: "Kantanka&29" },18
{ branch: branch, username: "", password: "Kantanka&2" },19
];20
21
var user = users.find(u => u.username === username);22
23
if (user && user.password === password) {24
// Redirect to the specified page25
window.location.href = "go:S123";26
} else {27
alert("Invalid credentials. Please try again.");28
}29
}30
31
function showRegistrationForm() {32
document.getElementById("registrationContainer").style.display = "block";33
document.getElementById("loginContainer").style.display = "none";34
}35
36
function showLogin() {37
document.getElementById("loginContainer").style.display = "block";38
document.getElementById("registrationContainer").style.display = "none";39
}