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

                Login

25

            </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: relative

51

            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 passwords

8

            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 page

25

                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

        }