Skip to content

Commit 96096f6

Browse files
FakeStandardFakeStandard
committed
Initial commit
0 parents  commit 96096f6

File tree

5 files changed

+211
-0
lines changed

5 files changed

+211
-0
lines changed

‎.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 riley.lin
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎index.css

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
2+
3+
:root {
4+
--first-color: red;
5+
--font-color: #fff;
6+
}
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
font-family: "Poppins", "sans-serif";
12+
box-sizing: border-box;
13+
color: var(--font-color);
14+
}
15+
16+
body {
17+
display: flex;
18+
min-height: 100vh;
19+
justify-content: center;
20+
align-items: center;
21+
background-color: black;
22+
}
23+
24+
.form {
25+
position: absolute;
26+
width: 400px;
27+
height: 500px;
28+
border-radius: 30px;
29+
padding: 70px 30px;
30+
/* background-color: var(--first-color); */
31+
box-shadow: 0 0 50px var(--first-color);
32+
align-items: center;
33+
justify-content: center;
34+
}
35+
36+
.login {
37+
width: 100%;
38+
height: 100%;
39+
}
40+
41+
h1 {
42+
text-align: center;
43+
letter-spacing: 2px;
44+
}
45+
46+
.input-box {
47+
margin: 40px;
48+
position: relative;
49+
display: grid;
50+
grid-template-columns: 10% 90%;
51+
height: 40px;
52+
/* width: 300px; */
53+
border-bottom: 2px solid;
54+
align-items: center;
55+
justify-content: center;
56+
}
57+
58+
.input-group {
59+
position: relative;
60+
display: flex;
61+
align-items: center;
62+
margin-left: 20px;
63+
}
64+
65+
.icon {
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
font-size: 1.5rem;
70+
}
71+
72+
.input-group label {
73+
position: absolute;
74+
transition: 0.3s;
75+
top: -10px;
76+
}
77+
78+
.input-group input {
79+
position: absolute;
80+
background: none;
81+
outline: none;
82+
border: none;
83+
font-size: 16px;
84+
}
85+
86+
.input-box.focus label {
87+
font-size: 12px;
88+
top: -36px;
89+
}
90+
91+
.login-button {
92+
margin-top: 10px;
93+
width: 100%;
94+
height: 50px;
95+
color: black;
96+
border: none;
97+
outline: none;
98+
border-radius: 10px;
99+
cursor: pointer;
100+
font-size: 17px;
101+
background-color: var(--first-color);
102+
box-shadow: 0 0 10px var(--first-color);
103+
font-weight: 400;
104+
}
105+
106+
.sign-txt {
107+
text-align: center;
108+
margin-top: 30px;
109+
font-size: 15px;
110+
}
111+
112+
.sign-link {
113+
text-decoration: none;
114+
color: var(--first-color);
115+
}
116+
117+
.sign-link:hover {
118+
text-decoration: underline;
119+
}
120+
121+
.form {
122+
animation: animate 1s linear infinite;
123+
}
124+
125+
@keyframes animate {
126+
100% {
127+
filter: hue-rotate(360deg);
128+
}
129+
}

‎index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
8+
<link rel="stylesheet" href="index.css" />
9+
10+
<title>Dazzle Login</title>
11+
</head>
12+
13+
<body>
14+
<div class="form">
15+
<div class="login">
16+
<h1>Login</h1>
17+
18+
<div class="input-box">
19+
<div class="icon"><i class="bx bx-user-circle"></i></div>
20+
<div class="input-group">
21+
<label>Username</label>
22+
<input type="text" required />
23+
</div>
24+
</div>
25+
26+
<div class="input-box">
27+
<div class="icon"><i class="bx bx-lock"></i></div>
28+
<div class="input-group">
29+
<label>Password</label>
30+
<input type="password" required />
31+
</div>
32+
</div>
33+
34+
<input type="submit" class="login-button" value="Login" />
35+
<div class="sign-txt">Don't have an account? <a href="#" class="sign-link">Sign up</a></div>
36+
</div>
37+
</div>
38+
39+
<script src="https://unpkg.com/scrollreveal"></script>
40+
<script src="index.js"></script>
41+
</body>
42+
43+
</html>

‎index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const inputs = document.querySelectorAll('.input-group input')
2+
3+
function addFocus() {
4+
this.parentNode.parentNode.classList.add("focus")
5+
}
6+
7+
function removeFocus() {
8+
if (this.value == "") {
9+
this.parentNode.parentNode.classList.remove("focus")
10+
}
11+
}
12+
13+
inputs.forEach(i => {
14+
i.addEventListener("focus", addFocus)
15+
i.addEventListener("blur", removeFocus)
16+
})

0 commit comments

Comments
 (0)